If you are working with Blue Billywig on your website, you can easily add Spott's interactive layer by adding a script to your existing implementation.
Your current video publishing process is not affected, which means you publish your videos first and add the interactive layer independently.
Our Blue Billywig integration works by adding a code snippet to your website where your video is shown and by adding the Spott project id to your Blue Billywig init script.
Using Spott video ID
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 project 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
Go to your website and put in this code snippet. Leave this page open as you still need to make some changes in step 3.
<script src="https://demo.bbvms.com/launchpad/"></script>
<script src="https://static.spott.ai/videoplayer/js/spott.bbwig.js"></script>
<script>
constplayer = newbluebillywig.Player("http://demo.bbvms.com/p/default/c/xxxxx.json", {
target :document.getElementById("player")
});
constspottPlayer = createSpottBlueBillywigInstance(player, {
blueBillywigVideoId:'xxx-xxx-xxx-xxx-xxx'
});
</script>
The script acts as a bridge between your player and Spott. To set this up, enter these parameters:
- The Blue Billywig video ID is in the example xxxxx
- blueBillywigVideoId:'xxx-xxx-xxx-xxx-xxx' inside spott-overlay is the Spott video id
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 before the '?' symbol. You can paste this in the videoId parameter in the code snippet.
Using Blue Billywig video ID
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 project 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
Go to your website and put in this code snippet. Leave this page open as you still need to make some changes in step 3.
<script src="https://demo.bbvms.com/launchpad/"></script>
<script src="https://static.spott.ai/videoplayer/js/spott.bbwig.js"></script>
<script>
constplayer = newbluebillywig.Player("http://demo.bbvms.com/p/default/c/xxxxx.json", {
target :document.getElementById("player")
});
constspottPlayer = createSpottBlueBillywigInstance(player, {
blueBillywigVideoId:'xxxxx'
});
</script>
The script acts as a bridge between your player and Spott. To set this up, enter these parameters:
- The Blue Billywig video ID is in the example XXXXXX
- blueBillywigVideoId:'xxxxxx' inside spott-overlay is the Spott video id
Step 3: Add the external id on Spott
While you're still in the Studio, click on the projects tab:
In this modal, you should see "External source" and select "Blue Billywig." In the ExternalID field, you can enter your Blue Billywig ID.
Click save to continue. Now you're all set!