Note: We’re just releasing our new amazing feature: the customizable style sets. Some parts of our help articles might need an update. We’re working on them, thanks for your understanding! Here is the new updated version!

In this article, you will learn how to assign, create and edit spott styles to an asset on your interactive content.

With spott styles, you can customize the look & feel of your tooltips and cards, as well as for deciding what'll happen when a user engages with your interactive content. Whether you want to modify the contents of your tooltip, open an iframe or trigger a Javascript event, spott styles is the way to go.

Spott styling options

There are many parameters you can edit to fit the spott style to your needs. For an easy explanation, we've grouped these in 3 categories:

  • Style types are multiple ways of visualizing your asset.
  • Actions define what should happen when a user clicks on your tagged asset.
  • Custom fields will explain how you can use your data in Spott styles.

Style types

There are 2 ways of visualizing an asset: cards and markers with tooltips. Cards will be shown in the top left corner of your video player and are great to use on assets used throughout multiple shots in your video. While markers with tooltips are a great way to stick to a visible element in your video.

Actions

Not only can you change the contents of your tooltip, but you can also change its behavior.

Spott supports three types of actions:

  • Open URL: this is the default type of action and will open a link in a new tab to the URL you set at buttonURL.
  • Open in Iframe popup: this option will open a web page within your interactive video. Because this feature makes use of iframes, it has the following limits:-- Your web page you want to include has to be secure. You can check this at the beginning of your URL it should say https, not http .-- Opening a page from a different domain requires you to add an X-Frame-Options in the header of your iframe. Please contact your developer to allow this functionality.
  • Trigger Javascript event: selecting this option will allow you to create your own functionalities like an 'add to basket' feature or your own tracking implementation. 

Note: all events run a Javascript event by default.

Custom fields

Custom fields are extremely flexible and allow you to use the asset information of your choice.
You can use predefined variables (name, url, image), your own custom fields, plain text or a combination of both. When using predefined or custom fields, make sure to put curly brackets { }  around it in styles like shown in the following image.

Did this answer your question?