If you are working with Alugha Player on your website, you can easily add Spott's interactive layer by adding a script to your existing implementation. Only a one-time setup is needed, from then on you can use your own IDs to link Alugha Player with Spott.
You'll be able to control the visibility and appearance of the interactive layer per video from the video details in Spott. Your current video publishing process won't be affected, which means you publish your videos first and add the interactive layer independently.
Follow the steps below to set up the Spott interactive overlay on Alugha Player.
If you're working with Alugha Player, the embed code that's already on your website will look something like the following.
<iframe id="iframe" src="https://alugha.com/embed/web-player?v=6aadd1dd-31f2-11ea-b84a-7728e8e7eaa7"></iframe>
Step 1: Put the Spott Alugha Player adapter on your website
Add the Spott Alugha Player adapter script to each page where you want Spott's layer to appear over an Alugha Player video.
<!-- Spott Alugha Player adapter -->
Each time a new video gets initialized in the player, you can trigger its interactive layer with the following snippet.
var element = document.querySelector('#iframe');
alughaVideoId: '', // enter your external ID
// videoId: '' // OR enter your Spott ID
The script acts as a bridge between your player and Spott. To set this up, you can adjust the following parameters:
alughaVideoIdis the external ID of the video that is currently initialized. This is the External ID that Spott will look for when a video is played.
videoIdif you want to use the Spott ID instead of an external ID.
This can be found here:
Steps per video (Setting an External ID)
Before you start the following steps, make sure you've uploaded your video to the Alugha 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. To do that, you should upload your video to the Spott platform.
Log into Spott and go to the projects 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.
Step 2: Set external reference
While you're video is still open in the Studio, click the Publish tab:
Step 3: Enter your external ID and save
In this modal, you should see "External source" and next to it another dropdown menu. Choose "Alugha Player".
Fill in the Alugha Player id of the video you're making interactive in the External ID field.
If all is set up right, your Alugha Player video should now have an interactive layer! 🎉
If there are certain things not clear or you might have any questions, don't hesitate to contact us!