If you are working with JW Player on your website, you can easily add Spott's interactive layer by adding a script to your existing implementation.

You'll be able to control the visibility and appearance of the interactive layer per video from a central place in Spott. Your current publishing process is not affected, which means you publish your videos first and add the interactive layer independently.

Using Spott Video ID

If you have access to your own website, this is probably the easiest option. If your website is managed by someone else, it might be best to take a look at the next solution by using an External ID

Before you start these steps, make sure you've uploaded your video to the JW Player platform and added it to your website already.

Step 1: Upload your video to Spott and make it interactive

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

Log into Spott and go to the media page, upload your video, and make it interactive.

We have a full step-by-step guide for you if you haven't learned how to do this already.

Step 2: Put this code snippet on your website

In the JW Player setup, make sure you are using JW Player's playlist element and add the Spott media ID. Which we'll show you where to get this in step 3. The setup could look like this.

var player = jwplayer('player').setup({
  playlist: [
    {
      file: 'https://content.jwplatform.com/videos/xJ7Wcodt-cIp6U8lV.mp4',
      mediaid: "a69ed405-8867-4588-a6ef-bd8252d21fe5"
    },
  ],
});

In addition to that, add the code in the next code snippet below the JW Player code. These scripts will take care of overlaying the Spott layer;

<script src="https://static-cdn.spott.ai/videoplayer/js/spott.jwplayer.js"></script>
<script>
  initSpottJWPlayer(player, {
    videoId: "" //Your Spott video ID
  })
</script>

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

• A selector player which targets the instance of your video player.
• The Spott id videoId of the video currently initialized.

Step 3: Get the Spott video ID

When you have uploaded your video, go to the Spott Studio where you can copy the video ID.

Look at the URL and copy the ID, this is the last part of the URL. You can paste this in the Medicaid parameter.

Paste the Spott ID you just copied and place in the script on your website.

Your JW Player video should now have an interactive layer!