If you work with the Digiteka Video Player on your website, you can easily add Spott's interactive layer by adding a script once to your existing implementation.

You'll be able to control the visibility and appearance of the interactive layer per video from the Spott CMS. Your current video publishing process is not affected, as you can decide to publish your videos first and add the interactive layer afterwards.

We also support other video players than Digiteka. You can find the full list here.

For Content Creators

Before you start these steps, make sure you uploaded the video to the Digiteka platform. Take note of the video id.

1.  Upload the video to Spott

You'll add interactive elements to your video in the Spott tagger. In order to do that, you should upload your video to the Spott platform.

Go to https://app.spott.ai/content/interactive-videos, click "Add video" and choose your video file. Wait for the processor status to change to "Done" while we process your video.

2. Make your video interactive

Click the "Launch tagger" on the right of the table to open the video tagger.

Add the interactive items of your choice to the video.
Check out this article how to do this.

Close the tagger to go to the detail page for the next step.

3. Select your video player

In the detail tab of your video, look for External id. Choose "Digiteka".

Fill in the Digiteka id of the video you're making interactive in the text field.

Don't forget to save your changes.

4. Publish the layer
As soon as you're ready to display the interactive layer on your website, make it public to activate the interactive layer on your website.

First switch to the "Share" tab...

...then click the "Change to public" button to publish the layer.

For developers (one-time instructions)

Add the following script to each page where you want Spott's layer to appear:

<script src="//static-cdn.spott.ai/player/js/spott.digiteka.js"/></script>

Every time a new video gets initialized in the player, you can trigger its interactive layer with the following snippet:

<script>
initSpott({
  el: "#digiteka_player", // CSS selector targeting the Digiteka iframe element
  digitekaVideoId: "externalID" // The id of the initialized video
})
</script>

The script acts like a bridge between your player and Spott. To set this up, set these parameters:

  • A selector el which targets the element of your video player. Digiteka uses an iframe to load the videoplayer, so the selector could look like iframe.digiteka or #videoplayer
  • The Digiteka id digitekaVideoId of the video currently initialized.

Did this answer your question?