Skip to content
Dopple Documentation

Basic Usage

Embedding the Visual Component on your site

Section titled “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:

<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):

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

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

Adding your product to the Visual Component

Section titled “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):

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

Full code example

Section titled “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>