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.


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>

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>

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

<html lang="en">
<meta charset="utf-8">
<title>My Page</title>
<!-- Link to the Visual Component's scripts -->
<script src="" defer></script>
<!-- Link to styles.css -->
<link rel="stylesheet" href="styles.css" />
<!-- 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 {
cursor: grab;
height: 720px;
touch-action: none;
width: 960px;

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