Augmented Reality Embed Documentation

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: seek-web

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 src=“https://view.seekxr.com/YOUR_TOKEN_HERE/seek.min.js”></script>

Be sure to replace the YOUR_TOKEN_HERE text with your own, for example:

<script src=“https://view.seekxr.com/seek-web/seek.min.js”></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”>
</a>

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

<a data-seek=“nike_high_top”>
 <img src=“preview.jpg”>
</a>

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

nike_high_top

black-backpack

armchair

kayak

Additional Configuration Options

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

<script src=“https://view.seekxr.com/seek-web/seek.min.js”></script>
<script>
// Disable by setting to “”
seek.config.icon = “https://example.com/your_icon.png”;

// Force use of a specific viewer regardless of platform
// Options: “webgl”, “quicklook”, “arcore”
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 = “”;

// Host Element that the 3d viewer should be injected into
seek.config.iframeHostElement = document.getElementById(‘host-element’);
</script>

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:

<script>
seek.bindLinks([document.getElementById(‘my-dynamic-link’)]);
</script>

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:

<script>
seek.view(‘nike_high_top’);

 // Force use of webgl viewer
seek.view(‘nike_high_top’, ‘webgl’);
</script>

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:

<script>
 // If executed on a desktop platform
 var instructions = seek.view(‘nike_high_top’, ‘ar’);
 console.log(instructions);
//{
// code: “OS_UNSUPPORTED”,
// message: “Visit this page on an ARCore compatible Android device, or an iOS device with iOS 12.”,
// link: “https://seekxr.com/seekview-embed/”,
//}
</script>

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

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

Injecting the 3D Viewer

The global seek variable exposes a method for injecting the 3d viewer for a given key into a parent element. Example:

<script>
var parentEl = document.querySelector(‘#parentEl’);
seek.inject3dViewer(‘nike_high_top’, parentEl);
</script>

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 passes the model key to the listener callback.

 

Available events include:

webSDKReady

experienceLaunched

experienceLaunchFailed

experienceReady

experienceLoadFailed

startExperience

modelLoaded

endExperience

 

 

Usage example:

<script>
seek.addEventListener(‘experienceReady’, function (event) {
gtag(‘event’, ‘view_item’, {
items: [{
    ‘id’: event.session.context.modelKey,
    ‘name’: event.session.context.model.name,
}]
});
});
</script>

Full Example

Here is a simple webpage using SeekView:

<!doctype html>
<html lang=“en”>
 <head>
  <title>SeekView Demo</title>
  <script src=“https://view.seekxr.com/seek-web/seek.min.js”></script>
 </head>
 <body>
  <h1>Nike High Tops</h1>
  <a data-seek=“nike_high_top”>
   <img src=“https://view.seekxr.com/seek-web/nike_high_top/thumbnail” alt=“Nike High Tops”>
  </a>
 </body>
</html>

Nike High Tops

X
X
Contact Sales

X
Contact Support

X
Contact Marketing

X