Spott styles is a way of easily customizing your interactive experience.

With spott styles, you can customize the look & feel of your tooltips and cards, as well as 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.

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

Afterward, we'll go in-depth and show a variety of customizable options.

Getting to spott styles

You can assign, create and edit styles from the Spott video tagger. However, any edits to your styles will persist throughout your organization's account. You can get there by following these steps:

Step1

After logging in, starting from the Home page, go to the Videos page.

Step 2

Then click on 'Launch Tagger' on the video you want to make interactive.

Step 3

Drag a bounding box on the element you want to make interactive.

Step 4

Click the 'Select' button to find a new modal popping up.

From this point on, you can learn more about assign, create and edit spott styles.

Assigning spott styles

When you've found your way to the style pane, you are now ready to work with spott styles.

In the window that opened when you clicked on 'Select', you will find all the created spott styles.

By clicking on one of them, you will assign a style to your asset.

If none of your team members of your organization have created any styles yet. You will find a series of basic styles premade to get you started.

Creating a style

There are two ways to create a new spott style, you can either duplicate an existing style or start a new empty style.

Creating a new style

In the video tagger, clicking the 'Select' button under Styles will open a new modal. In this modal, the first button 'New Style' will allow you to create a new style. When you do this, all fields will be pre-filled with default values.

Duplicating an existing style

You can also duplicate an existing style. The advantage of duplicating an existing style is that all of your previous settings will get copied, which might save you some time.

In the video tagger, clicking the 'Select' button under Styles will open a new modal. In this modal, 3 dots will appear when you hover over the style you want to duplicate. Click on 'Duplicate'.

A copy of the style will show up in the window where you can edit.

Editing a style

Editing a style can be done in the same way you duplicate a style, by clicking on the 3 dots when hovering over a style, only now you click on 'Edit'. A modal will open where you can edit the style.

On this modal, there are numerous fields you can adjust. Learn more about all options.

Always make sure to click 'Save' when you are done with your edits.

Note: While you are making changes, it can take up to 5 minutes for your changes to be visible in a video player.

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, 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.

Default fields

If you are using the default styles, your content will take the following fields as default values:

Interactive images

  • Image: The first image of the asset.
  • First Line: the asset will check if it has a custom field "brand", if it's not set, then the asset Name will be selected.
  • Second Line: the asset will check if it has a custom field "price", you can set all kinds of values like "€39.99" or even a text. If the value is not set, no second line will be displayed.

Interactive videos

  • Image: The first image of the asset.
  • First Line: the asset will check if it has a custom field "brand", if it's not set, the first line won't be displayed.
  • Second Line: The Name of the asset will be displayed.
  • Buy button: the asset will check if it has a custom field "buyButton", if it's not set, the first line will be "Buy now".

Note: for interactive videos, all options can be changed with Spott styles.

Overriding

When you have assigned a spott style to your asset, you will notice that the same content fields will appear below the selected style in the right panel. Any changes in these fields will replace values from your style for this layer only.

Note: When you have selected the default style, options can be configured in the embed code. Overrides aren't available here.

Did this answer your question?