Events for both hotspot clicks and clicks on buttons and overlay elements in interactive videos are surfaced in the Vimeo Player API (see documentation). (Note: Interactive requires a custom Enterprise account). You can read about adding or deleting a hotspot in this article.
By listening to these interactive events, you can create integrations between the interactive video and your parent page. For example, adding a product to a cart on the parent page where the video is embedded.
You can also insert custom data into the payload inside the interactive editor when creating a hotspot or an element in an overlay (for example, a product SKU) which will help your developers better utilize the events in their scripts.
Common use cases
- Create a seamless add-to-cart & wishlist experience with your commerce website.
- Link Vimeo with your targeted advertising solution.
- Keep track of interactive events in your own user tracking system (such as Google Analytics).
- Change the design, layout, or animation of elements on your page based on the actions viewers take in the video.
- Open custom page dialogs and overlays based on actions viewers take in the video.
Setting up your video
- Hotspot action: You can make any Vimeo Interactive hotspot fire a JavaScript event by using the Fire an event (add to cart) action.
- Overlay action: You can also use an overlay button to fire an event by selecting the Fire an event (add to cart) button action.
Assign a key & value
Once chosen, you can give your hotspot or overlay button a key & value. These are open and optional fields that can give your developer more information about the action taken. These may vary depending on the type of information your developer needs to retrieve.
For instance, if it’s an add-to-cart experience you might need to identify the product that has been clicked. So, ‘SKU’ and ‘xxxxxxx’ (the product SKU code) might be what you wish to send.
If you are unsure, speak to your web page developer to identify the required keys & values.
Add additional keys & values
Once you’ve assigned a key & value, you can add additional key & value pairs to the action if desired.
This is useful if you need to identify other variables of a product or item.
For instance, you might need to specify a quantity, color, or size to add the item to the shopping cart.
Hotspot and Panel ID
As a developer, you can copy the Hotspot ID or Panel ID (Overlay Button) to ensure that you are listening for the correct events in the Player API.
Add Custom payload data to any action
Javascript events can also be added to buttons and hotspots that have other primary actions, such as opening an overlay or jumping to a point in the video.
Set up your hotspot or button action as you normally would, but toggle on Add custom payload data.
This will allow you to then add keys & values as well as your primary action. This could be useful when looking to add additional tracking to your video.
Adding the Vimeo Player API
- Use the Vimeo Player API on your webpage to listen for events from your embedded interactive video.
- Tip: You can use the interactive events in the Vimeo Player API to create any connection between the video and the page; not just add to the cart.
Cart Integration
By utilizing the Vimeo Player API, you can call the Shopify Ajax Cart API to merge your commerce videos with your Shopify-powered site in one seamless conversion funnel.
Whether you’ve included commerce video hotspots or overlay product pages, you can select any button within your Vimeo video to act as a one-click, add-to-cart event, meaning your viewers can act with immediacy upon their purchase intent and checkout through their Shopify cart on-site.