Skip to main content

Styling the Visual Component

The Dopple Visual Component will automatically resize the internal canvas to match the size of the atlatl-visual element on your page, so you are free to size this element via CSS however you like.

Additionally, the Visual Component uses a transparent color for the background so that the web page content behind the canvas will be visible by default.

If this is undesirable, a background-color property may be applied to the atlatl-visual element’s CSS.

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">
<av-product namespace="my_namespace" name="my_product_name"></av-product>
atlatl-visual {
background: white;
cursor: grab;
height: 720px;
touch-action: none;
width: 960px;

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