How to add SeekView™ to your website

Step 1 - Get a SeekView Token

Use the token given to you by the Seek team or for testing use this sample token:

Step 2 - The seek.js sdk

Add the following script (it's less than 10KB!) to your html at the end of the <head> section:

<script data-token="YOUR_TOKEN_HERE" src=""></script>

Be sure to replace the data-token attribute with your own, for example:

<script data-token="d878219b-3897-434a-8efe-0cbc68ea8bde" src=""></script>

Step 3 - Add a SeekView link

Each model has a unique, case-sensitive key. Use this key when adding a SeekView link.
A SeekView link can wrap any element, but works best when it contains an image. Simply find an <img> tag and wrap it in an anchor tag with a special data-seek attribute, as shown below:

<a data-seek="YOUR_MODEL_KEY">
	<img src="preview.jpg">

Make sure to replace the value of data-seek with the key for your model, for example:

<a data-seek="sci_fi_helmet">
	<img src="preview.jpg">

Here are a few model keys that can be used with the sample token above:




Additional Configuration Options

Configure seek.js by setting attributes on the global variableseek after the seek.js sdk loads.

<script data-token="d878219b-3897-434a-8efe-0cbc68ea8bde" src=""></script>
// Disable by setting to ""
seek.config.icon = "";

// Force use of a specific viewer regardless of platform
// Options: "webgl", "quicklook", "seekview"
seek.config.viewer = ""; 

// Override token configuration at run time
seek.config.token = YOUR_TOKEN;

// Alert with state information
seek.config.debug = true;

// Allow DOM modification to show webgl viewer over all content when Fullscreen fails
seek.config.overlayEnabled = true;

// Override webgl viewer iframe style
seek.config.iframeStyle = "";

Dynamic Content (e.g. Angular, React)

The seek.js sdk exposes a function for manually binding links. Executing seek.bindLinks() will bind any unbound seek links on the page.

Elements that use attribute binding will need to be forcibly rebound by passing a list of link nodes, for example:


Programmatically Launching the Viewer

The global seek variable exposes a method for programmatically launching the viewer for a given key. The type of viewer can be passed as an optional argument. Example:


	// Force use of webgl viewer
	seek.view('sci_fi_helmet', 'webgl');

Programmatically Launching AR Only

To launch only the AR experience, use seek.view(key, "ar"). If the platform supports AR, the return value will be undefined and it will immediately launch the AR experience. If the platform is not supported, it will return an object that can be used to explain to the user the steps necessary to view the content in AR. Example:

	// If executed on a desktop platform
	var instructions = seek.viewAR('sci_fi_helmet');
//  code: "OS_UNSUPPORTED",
//  message: "Visit this page on an ARCore compatible Android device, or an iOS device with iOS 12.",
//  link: "",

Below is a table of codes and messages that can be returned if the platform is unable to launch the AR experience.

OS OS Version Browser AR Capable Code Message Link
iOS 12.3+ Safari Yes SUPPORTED Your device is compatible. If you continue to see this message, please contact support. Current Page
iOS 12.3+ Other No BROWSER_UNSUPPORTED Open this page in Safari! Current Page
iOS <12.3 Any No UPGRADE_OS Upgrade to iOS 12.3 or later and open this page in Safari! Apple Support
Android 7.0+ (Oreo) Any Yes INSTALL_APP Install the Augmented Reality Viewer! ARCore compatible device required. Deep Link
Android <7.0 Any No UPGRADE_OS Upgrade to Android 7.0 (Oreo) or later! Google Support
Other Any Any No OS_UNSUPPORTED Visit this page on an ARCore compatible Android device, or an iOS device with iOS 12. Current Page

We highly recommend using a QR Code generator when the returned code is "OS_UNSUPPORTED", as this allows users to quickly open the experience on their AR capable mobile device. Recommended tool for web or server side QR Code generation: node-qrcode

Listening for Events

The seek.js sdk passes through several events using the listener pattern. seek.addEventListener() and seek.removeEventListener() accept an event identifier and callback. When the event fires, it is passes the model key to the listener callback.

Available events include:






Usage example:

	seek.addEventListener("modelLoaded", function (key) {
		ga('send', 'event', 'SeekView', 'modelLoaded', key);

Full Example

Here is a simple webpage using SeekView:

<!doctype html>
<html lang="en">
		<title>SeekView Demo</title>
		<script data-token="d878219b-3897-434a-8efe-0cbc68ea8bde" src=""></script>
		<h1>Sci-Fi Helmet</h1>
		<a data-seek="sci_fi_helmet">
			<img src="" alt="Sci-Fi Helmet">

Sci-Fi Helmet

Sci-Fi Helmet