Skip to main content

Basic Usage

Embedding the Visual Component on your site​

First, you will need to add a script tag to your page or template for the Visual Component:

HTML
<script src="https://builds.dopple.io/atlatl-visual-component/releases/current/index.js"></script>

The above snippet will always reference the latest release; if desired, you may use a specific release instead by using a version number in the URL rather than “current” (e.g. .../releases/1.0.0/index.js).

Next, to load and display Dopple Visual, add the atlatl-visual element to your theme or page’s HTML and provide it with your client ID (provided to you by Dopple):

HTML
<atlatl-visual client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5"></atlatl-visual>

Alternatively, for security concerns (or any other reason), the client ID may be specified through JavaScript by omitting the client-id attribute and invoking the .setClientId method on the atlatl-visual element:

JS
const doppleVisual = document.querySelector('atlatl-visual');
doppleVisual.setClientId('a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5'); // Replace with your client ID
Heads Up

When omitting the client-id attribute, if the .ready method is used for any reason to perform additional JavaScript logic, that it will not resolve until .setClientId has been called and initialization of the Visual Component has been completed.

Adding your product to the Visual Component​

To display a product, add an av-product element as a child of the atlatl-visual element, specifying the namespace, name, and version of the product to load (these may be found in the config matrix as well):

HTML
<atlatl-visual client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5">
    <av-product namespace="my_namespace" name="my_product_name" version="1"></av-product>
</atlatl-visual>
Note

If desired, the version attribute may be omitted and the latest version of the product available will be utilized.

Full code example​

index.html
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Page</title>
        <!-- Link to the Visual Component's scripts -->
        <script src="https://builds.dopple.io/atlatl-visual-component/releases/current/index.js" defer></script>
    </head>
    <body>
        <!-- The Visual Component -->
        <atlatl-visual client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5">
            <av-product namespace="my_namespace" name="my_product_name"></av-product>
        </atlatl-visual>
    </body>
</html>