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:
d878219b-3897-434a-8efe-0cbc68ea8bde

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

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

                
<script data-token="d878219b-3897-434a-8efe-0cbc68ea8bde" src="https://view.seekxr.com/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="sci_fi_helmet">
  <img src="preview.jpg">
</a>
                
            

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

Suzanne

armchair

ramen

Additional Configuration Options

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

                
<script data-token="d878219b-3897-434a-8efe-0cbc68ea8bde" src="https://view.seekxr.com/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('sci_fi_helmet');

  // Force use of webgl viewer
  seek.view('sci_fi_helmet', '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('sci_fi_helmet', '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.

OSOS VersionBrowserAR CapableCodeMessageLink
iOS12.3+SafariYesSUPPORTEDYour device is compatible. If you continue to see this message, please contact support.Current Page
iOS12.3+OtherNoBROWSER_UNSUPPORTEDOpen this page in Safari!Current Page
iOS<12.3AnyNoUPGRADE_OSUpgrade to iOS 12.3 or later and open this page in Safari!Apple Support
Android7.0+ (Oreo)AnyYesINSTALL_APPInstall ARCore! Compatible device required.Play Store Link
Android<7.0AnyNoUPGRADE_OSUpgrade to Android 7.0 (Oreo) or later!Google Support
OtherAnyAnyNoOS_UNSUPPORTEDVisit 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

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('sci_fi_helmet', 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 is passes the model key to the listener callback.

Available events include:


closeSeekViewer

modelLoaded

loadedSeekViewer

howToViewARShown

viewARFailed

Usage example:

                
<script>
  seek.addEventListener("modelLoaded", function (key) {
    ga('send', 'event', 'SeekView', 'modelLoaded', key);
  });
</script>
                
            

Full Example

Here is a simple webpage using SeekView:

                
<!doctype html>
<html lang="en">
  <head>
    <title>SeekView Demo</title>
    <script data-token="d878219b-3897-434a-8efe-0cbc68ea8bde" src="https://view.seekxr.com/seek.min.js"></script>
  </head>
  <body>
    <h1>Sci-Fi Helmet</h1>
    <a data-seek="sci_fi_helmet">
      <img src="https://media.seekxr.com/preview?key=sci_fi_helmet&token=d878219b-3897-434a-8efe-0cbc68ea8bde" alt="Sci-Fi Helmet">
    </a>
  </body>
</html>
                
            



Sci-Fi Helmet

Sci-Fi Helmet