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

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

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