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:

<script type="text/javascript" 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 can 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 ATLATL Visual, we need to add the atlatl-visual element to your theme or page’s HTML and provide it with your client ID (provided by ATLATL):

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

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

const atlatlVisual = document.getElementById('atlatl-visual');
atlatlVisual.setClientId('a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5');
Note

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 ATLATL Visual Component has been completed.

Adding your Product to the Visual Component​

To display a product, we need to 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 can be found in the config matrix as well):

<atlatl-visual id="visual-component" client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5" >
    <av-product id="my-product" namespace="my_namespace" name="my_product_name"></av-product>
</atlatl-visual>

If desired, the version attribute can 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 type="text/javascript" src="https://builds.dopple.io/atlatl-visual-component/releases/current/index.js" defer></script>
    </head>
    <body>
        <!-- The Visual Component -->
        <atlatl-visual id="visual-component" client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5">
            <av-product id="my-product" namespace="my_namespace" name="my_product_name"></av-product>
        </atlatl-visual>
    </body>
</html>