Loft Reference Guide

Installation

3D Models

How do I request or upload 3D models of my products?

News

End User Experience

Seek Portal

How do I get an Ocavu account?

Scene Editor

Configurator

Embedding an integrated viewer is as simple as including a "container element" on your webpage and adding a few data-ocavu- attributes.

Step 1

Add a "container element" to your webpage layout. This container can live anywhere on your webpage, even within a product image carousel! The only requirement is that the container have an explicit height and width. Here is a typical example:

<div style="width: 500px; height: 500px;"></div>

Step 2

Add the two required data-ocavu- attributes: data-ocavu-key and data-ocavu-embed. data-ocavu-key needs a value that corresponds to the model key that you desire to load in the integrated viewer. Example:

<div style="width: 500px; height: 500px;" data-ocavu-key="default-test-model" data-ocavu-embed></div>

Step 3

If desired, add the data-ocavu-xp attribute to indicate a custom experience to load within the integrated viewer. Example:

<div style="width: 500px; height: 500px;" data-ocavu-xp="auto-rotate" data-ocavu-key="default-test-model" data-ocavu-embed></div>

Step 4

Consider using a "launch trigger". By default, the Web SDK will launch an integrated viewer as soon as the DOMContentLoaded event fires, but specifying a trigger delays that launch until certain conditions have been met. This can be important for improving page load speed and SEO. The following launch triggers are available:

delay - Wait 2 seconds before launching.
visibility - Wait until viewport scrolls over container before launching.
activity - Wait until the user scrolls, clicks, or moves their mouse.
click - Wait until the user clicks on the container element.

Example:

<div style="width: 500px; height: 500px;" data-ocavu-xp="auto-rotate" data-ocavu-key="default-test-model" data-ocavu-embed data-ocavu-trigger="visibility"></div>

Step 5

If a launch trigger is used and the integrated viewer is located "above the fold" (meaning it is visible as soon as the web page loads) consider using a background image as a visual placeholder.

The Web SDK provides functionality for automatically embedding a model preview as a background image, as well as the usage of an icon / call-to-action overlay.