Skip to main content

Custom Styling

At its core, the Dopple Visual Component behaves like a <canvas> element, and can be sized and styled similar to how a <canvas> would be.

Sizing​

The Visual Component will automatically resize its internal canvas to match the size of the <atlatl-visual> element on your page, so you are free to size this element via CSS to best fit your page’s layout.

<atlatl-visual style="height: 512px; width: 100%;" client-id="...">
    <av-product namespace="..." name="..."></av-product>
</atlatl-visual>

Background Color​

By default, the Visual Component’s <canvas> renders with a transparent background so that the web page content behind the canvas will be visible by default.

An optional bg-color attribute may be added to the <atlatl-visual> tag to set a background color for the <canvas> to render with when the Visual Component is first initialized.

<!-- Render the Visual Component's canvas with a fully opaque orange background -->
<atlatl-visual bg-color="255, 128, 64, 255" client-id="...">
    <av-product namespace="..." name="..."></av-product>
</atlatl-visual>

bg-color takes an array of RGBa values ranging from 0 – 255. For the alpha value, 0 is fully transparent and 255 is fully opaque.

Setting an opaque background color using bg-color can help give higher quality renders when using certain post-processing effects, such as bloom.

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>
        <!-- Link to styles.css -->
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <!-- The Visual Component -->
        <atlatl-visual client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5" bg-color="255, 255, 255, 255">
            <av-product namespace="my_namespace" name="my_product_name"></av-product>
        </atlatl-visual>
    </body>
</html>
styles.css
atlatl-visual {
    cursor: grab;
    height: 720px;
    touch-action: none;
    width: 960px;
}

atlatl-visual:focus-within {
    outline: 2px solid black;
}