Basic Usage

Dopple runs as a fully client-side script on your product pages — no backend setup or API calls required. Simply include Dopple’s SDK script on your page, place a container element anywhere in your UI for the 3D render to be shown in, and initialize a new Dopple instance for your 3D product.

CDN Import

To include Dopple on your site and render configurable 3D products, you will need to import the Dopple SDK from the CDN inside a module script on your page.

index.html

<script type="module">
  import { DoppleXR } from "https://builds.dopple.io/packages/dopple-sdk@latest/dopple-sdk.js";
</script>

The latest SDK version is always available at https://builds.dopple.io/packages/dopple-sdk@latest/dopple-sdk.js. However, an exact version number (X.X.X) may be specified instead if needed.

// Use version 1.0.0 of the SDK
import { DoppleXR } from "https://builds.dopple.io/packages/dopple-sdk@1.0.0/dopple-sdk.js";

Note

Products are only able to be loaded on whitelisted domains.

Before following the steps below, be sure your domain (example: *.yoursite.com) has been added to its whitelist in the platform.

Initialization

To initialize a new Dopple product on your page, create a new DoppleXR instance and pass it an options object with owner, workspace, and projectName properties for your product, along with the container element to place the canvas in.

You may also include a selection object to customize the initial configuration of the product when it first loads, and a specific version of the product if needed.

index.html

<div id="dopple-container"></div>

<script type="module">
  import { DoppleXR } from "https://builds.dopple.io/packages/dopple-sdk@latest/dopple-sdk.js";

  const dopple = new DoppleXR({
    container: document.getElementById("dopple-container"),
    owner: "my-org",
    workspace: "my-workpsace",
    projectName: "My Project",
    productVersion: "1",
    selection: {}
  });
</script>

Then, call the load() method on the dopple instance to begin loading the product and its assets, followed by the run() method to begin rendering the product.

index.html

<div id="dopple-container"></div>

<script type="module">
  import { DoppleXR } from "https://builds.dopple.io/packages/dopple-sdk@latest/dopple-sdk.js";

  const dopple = new DoppleXR({
    container: document.getElementById("dopple-container"),
    owner: "my-org",
    workspace: "my-workpsace",
    projectName: "My Project",
    productVersion: "1",
    selection: {}
  });

  await dopple.load();
  dopple.resize({ trackParentSize: true });
  dopple.run();
</script>

Tip

Although optional, calling dopple.resize({ trackParentSize: true }) before dopple.run() is strongly recommended to enable responsive resizing of the canvas.

The instance’s options object accepts the following properties:

Parameter	Type	Description
container	HTMLElement	The DOM element which will receive the <canvas> for the Dopple product to be rendered onto.
owner	string	The name of your organization in the Dopple platform.
productVersion	string	The version of the product to load. The product will default to the latest version if not specified.
projectName	string	The name of the project that the product was published from.
selection	Selection	Selection management object (see Product Configuration for more info).
workspace	string	The name of the workspace containing the product.

Note

There may be times when you need to access the dopple instance from outside of your module script, such as having it interact with external libraries or logging events to the console for debugging.

To do this, you can assign it to the global window object on your page, then access it from another scope as needed.

<script type="module">
  const dopple = new DoppleXR({ /* ... */});
  window.dopple = dopple;
</script>

<script>
  console.log(window.dopple);
</script>

Styling and Positioning

After calling dopple.load(), a <canvas> element will be automatically created inside of the container you specified during initialization. This canvas will be absolutely positioned inside the container to fill its width and height.

To size the canvas, simply put position: relative on the container and size it using the width and height or aspect-ratio CSS properties.

<div id="dopple-container"></div>

#dopple-container {
  aspect-ratio: 16 / 9;
  position: relative;
  width: 100%;
}

Full Code Example

index.html

<html>
  <head>
    <script type="module">
      import { DoppleXR } from "https://builds.dopple.io/packages/dopple-sdk@latest/dopple-sdk.js";

      const dopple = new DoppleXR({
        container: document.getElementById("dopple-container"),
        owner: "my-org",
        workspace: "my-workspace",
        projectName: "My Project",
        productVersion: "1",
        selection: {}
      });

      await dopple.load();
      dopple.resize({ trackParentSize: true });
      dopple.run();
    </script>
    <style>
      #dopple-container {
        aspect-ratio: 16 / 9;
        position: relative;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="dopple-container"></div>
  </body>
</html>