[Spott] What can you customize per interactive templates?

To adapt the settings to resemble your brand best, there are a lot of settings you can change for each template. Each template has different options which you can customize. Some of the commonly available options are as follows:

  • Spott

  • Tooltip

  • Button

  • Product

Spott

The Spott is the trigger that viewers see on the content and which opens the interactive content on hover. You can adapt:

  • The Type: how does the trigger look
    • Circle: a small circle
    • Ping: a small bullet
    • An image: you can add any image or icon
    • A button: a rectangular button
  • The clickable area: when will the interactive content be shown
    • Only the tag is interactive
    • The entire box is interactive

  • The color: of the spott
  • Pulsating: animation of the spott

Tooltip

The tooltip is the information that pops up when there is hovered over the Spott. You can adapt:

  • Position: where to display the tooltip in relation to the spott
    • Left, Right, Bottom, Top
    • Top left corner, Bottom right corner,...

  • Image: what image to display

  • Text: which title and text the tooltip has

  • Custom Font: add your own font by linking the font URL

  • Border radius: border-radius of the corners of the tooltip

  • Background color: the color of the tooltip

  • Hovered state: All of the above, but in a hovered state

 

Button

The button inside of the tooltip. You can change:

  • Contents: the text inside the button

  • Style: How the button looks
    • Font on the text
    • Color of the text
    • Size of the text
    • Background color
    • Border-radius
    • Border color and thickness

  • Hovered state: All of the above, but in a hovered state

 

Product

You can attach a product to an interactive layer, which will fill in the image and contents of your tooltip.

Click here to learn more about products.


 

Product

You can attach a product to an interactive layer, which will fill in the image and contents of your tooltip.

Click here to learn more about products.