---
title: Publitas interactive - Vimeo video player
description:   If you are working with Vimeo 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 appearanc
---

[Skip to content](https://support.publitas.com/spott-vimeo-video-player#main-content)

English

Show submenu for translations

[Contact Support](https://support.publitas.com/kb-tickets/new?hsLang=en)

![Publitas blue-270](https://support.publitas.com/hs-fs/hubfs/Publitas%20blue-270.png?width=175&height=57&name=Publitas%20blue-270.png)

Open main navigation

Close main navigation

- English
  
  Show submenu for translations
- [Contact Support](https://support.publitas.com/kb-tickets/new)
- [Back to Publitas](https://www.publitas.com/)

[Back to Publitas](https://www.publitas.com/)

 How can we help you?

- There are no suggestions because the search field is empty.

1. [Knowledge Base](https://support.publitas.com/?hsLang=en)
2. [Using Publitas Interactive](https://support.publitas.com/using-publitas-interactive?hsLang=en)
3. [Integrations](https://support.publitas.com/using-publitas-interactive?hsLang=en#integrations)

# Publitas interactive - Vimeo video player

 

If you are working with Vimeo 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 the video details in Spott. Your current video publishing process is not affected, which means you publish your videos first and add the interactive layer independently.

There are two ways you can easily set up the Spott interactive overlay on Vimeo.

1. Using the Spott Video ID (**Easiest**)
2. Using an external ID and link it internally in Spott (**Advanced**)

#### 1. 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 Vimeo 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](https://app.spott.ai/media), upload your video, and make it interactive.

We have a [full step-by-step guide](https://support.publitas.com/hc/en-us/articles/360052364732?hsLang=en) 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.*

```
<!-- Import Vimeo script --><script src="https://player.vimeo.com/api/player.js"></script><!-- Spott script --><script src="https://static.spott.ai/videoplayer/js/spott.vimeo.js"/></script><div id="js-video"></div><script>//setting up your Vimeo playerconst player = new window.Vimeo.Player('js-video', {id: '', // your Vimeo video idwidth: 640});initSpottVimeo(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 that targets the instance of your video player.
- videoId is the video in the Spott ID of the video currently initialized, which we'll show you how to get into the next step.

**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 videoId parameter.

 

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

Awesome, your Vimeo video should now have an interactive layer!

#### 2. Using an External ID

Use an External ID if you are looking for a more advanced but scaleable integration. Using the External ID will allow you to have to put in the code snippet on your website once. We only advise you to set up this implementation if you are a developer yourself or have one in your team.

If this is not you, it might be easier to use the first solution by *using the Spott Video ID.*

### **For Content Creators**

*Before you start these steps, make sure you've uploaded your video to the Vimeo platform. Take note of the 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 [media page](https://app.spott.ai/media) and make it interactive.

If you don't know how to do this, [see this step-by-step guide](https://support.publitas.com/hc/en-us/articles/360052364732?hsLang=en) on how to do this.

**Step 2: Set an external source**

While you're still in the Studio, go to the publish tab and enter the Vimeo ID in the *External id* field and select Vimeo as *External source*:

 

 

**Step 3: Enter your external ID and save**

Fill in the Vimeo id of the video you're making interactive in the text field. Click "Save" to persist your changes.

### For developers

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

```
<script src="https://static.spott.ai/videoplayer/js/spott.vimeo.js"/></script>
```

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

```
<script>  initSpottVimeo(player, {    vimeoVideoId: '' //your Spott external reference  });</script>
```

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

- A **selector player** that targets the instance of your video player.
- **vimeoVideoId** is the external ID of the video currently initialized. This is the External ID that Spott will be looking for when your video is played.

If there are certain things not clear or you might have any questions, don't hesitate to contact us!

- [Managing Publications](https://support.publitas.com/managing-publications?hsLang=en#main-content)

    - [Create Content in Publitas](https://support.publitas.com/managing-publications?hsLang=en#create-content-in-publitas)
    - [Managing your publications](https://support.publitas.com/managing-publications?hsLang=en#managing-your-publications)
    - [Editing pages](https://support.publitas.com/managing-publications?hsLang=en#editing-pages)
    - [Updating the Publication URL](https://support.publitas.com/managing-publications?hsLang=en#updating-the-publication-url)
    - [SEO](https://support.publitas.com/managing-publications?hsLang=en#seo)
    - [Troubleshooting](https://support.publitas.com/managing-publications?hsLang=en#troubleshooting)
    - [Create Adaptive content in Publitas](https://support.publitas.com/managing-publications?hsLang=en#create-adaptive-content-in-publitas)
- [Adding Hotspots](https://support.publitas.com/adding-hotspots?hsLang=en#main-content)

    - [Using the hotspot editor](https://support.publitas.com/adding-hotspots?hsLang=en#using-the-hotspot-editor)
    - [Hotspots explained](https://support.publitas.com/adding-hotspots?hsLang=en#hotspots-explained)
    - [Hotspot automation](https://support.publitas.com/adding-hotspots?hsLang=en#hotspot-automation)
- [Customizing the Reader](https://support.publitas.com/customizing-the-reader?hsLang=en#main-content)

    - [Reader settings](https://support.publitas.com/customizing-the-reader?hsLang=en#reader-settings)
    - [Branding](https://support.publitas.com/customizing-the-reader?hsLang=en#branding)
    - [Banners](https://support.publitas.com/customizing-the-reader?hsLang=en#banners)
- [Publishing Publications](https://support.publitas.com/publishing-publications?hsLang=en#main-content)

    - [Sharing](https://support.publitas.com/publishing-publications?hsLang=en#sharing)
    - [Embedding](https://support.publitas.com/publishing-publications?hsLang=en#embedding)
    - [Availability](https://support.publitas.com/publishing-publications?hsLang=en#availability)
    - [Generating reach](https://support.publitas.com/publishing-publications?hsLang=en#generating-reach)
- [E-commerce & Product Feeds](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#main-content)

    - [Importing Product Feeds](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#importing-product-feeds)
    - [Managing product details](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#managing-product-details)
    - [E-commerce Solutions](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#e-commerce-solutions)
- [Dynamic Publications](https://support.publitas.com/dynamic-publications?hsLang=en#main-content)

    - [Creating dynamic content](https://support.publitas.com/dynamic-publications?hsLang=en#creating-dynamic-content)
- [Using Publitas Interactive](https://support.publitas.com/using-publitas-interactive?hsLang=en#main-content)

    - [The basics](https://support.publitas.com/using-publitas-interactive?hsLang=en#the-basics)
    - [Integrations](https://support.publitas.com/using-publitas-interactive?hsLang=en#integrations)
- [Publication Analytics](https://support.publitas.com/publication-analytics?hsLang=en#main-content)

    - [Publication Dashboard](https://support.publitas.com/publication-analytics?hsLang=en#publication-dashboard)
    - [Google Analytics](https://support.publitas.com/publication-analytics?hsLang=en#google-analytics)
    - [Other integrations](https://support.publitas.com/publication-analytics?hsLang=en#other-integrations)
    - [Insights & Recommendations](https://support.publitas.com/publication-analytics?hsLang=en#insights-recommendations)
- [API](https://support.publitas.com/api?hsLang=en#main-content)

    - [Publitas API](https://support.publitas.com/api?hsLang=en#publitas-api)
- [Privacy and Security](https://support.publitas.com/privacy-and-security?hsLang=en#main-content)

    - [Account security](https://support.publitas.com/privacy-and-security?hsLang=en#account-security)
    - [Cookies, privacy, and policies](https://support.publitas.com/privacy-and-security?hsLang=en#cookies-privacy-and-policies)
- [Account](https://support.publitas.com/account?hsLang=en#main-content)

    - [Login and password](https://support.publitas.com/account?hsLang=en#login-and-password)
    - [Managing your account](https://support.publitas.com/account?hsLang=en#managing-your-account)
- [Billing](https://support.publitas.com/billing?hsLang=en#main-content)

    - [Billing Details](https://support.publitas.com/billing?hsLang=en#billing-details)
    - [Subscription](https://support.publitas.com/billing?hsLang=en#subscription)
    - [Data Traffic](https://support.publitas.com/billing?hsLang=en#data-traffic)
- [Partners and Integrations](https://support.publitas.com/partners-and-integrations?hsLang=en)
- [Learning Center](https://support.publitas.com/learning-center?hsLang=en#main-content)

    - [Tutorials](https://support.publitas.com/learning-center?hsLang=en#tutorials)
- [Trust & Safety](https://support.publitas.com/trust-safety?hsLang=en)

[![Publitas blue-270](https://support.publitas.com/hs-fs/hubfs/Publitas%20blue-270.png?width=100&height=32&name=Publitas%20blue-270.png "Publitas blue-270")](http://publitas.com)

Copyright © 2025, Publitas B.V.