1. Home
  2. Interactive Video
  3. Get started
  4. Get started with the Interactive Studio

Get started with the Interactive Studio

You can watch our tutorial video on the Interactive Studio here, or read the article below.

1.0 | Accessing the Interactive Studio

In this article we’ll introduce the interactive studio by highlighting the 4 main sections. To access the interactive studio, first open a clip in the media library and scroll down in the right sidebar to click the “Add interactivity” button (or “Edit interactivity” if a clip already contains interactivity).

Add / Edit interactivity

The studio is divided into four different sections:

  • Canvas
  • Timeline
  • Media library
  • Properties and actions panel

interactive studio sections

2.0 | Canvas

When starting out, the canvas only displays the video. Once widgets are added to the video they will be visible here. On the canvas you will be able to move elements around freely or align them perfectly along other widgets using ‘snap’ rulers.

3.0 | Media library panel

On the left you will find a panel showing media files you’ve already uploaded to the media library. These can be videos, but also audio files or images. Use the upload button to add new media files. 

Besides the media tab, we can also switch to the “templates” and “timelines” tab. We won’t go into detail about that here, but these tabs make it easy to add interactivity that is already used in other videos.

interactive studio: media library

To add a widget to the video: drag an image from the media library to the canvas:

Interactive Studio: drag to canvas

Only upload images, audio and pdf files

Only use the upload button in the interactive studio to upload images, audio files or pdf files. (Additional) video files should always be uploaded in the Upload & Transcode section of the OVP. Read more about how to upload videos to the OVP.

4.0 | Timeline

A widget is displayed on the canvas, as well as in the timeline.

The timeline can be used to determine exactly when a widget should be visible to the viewer by changing the start and endpoint.

Interactive Studio timeline widget

You can also hide widgets from the timeline completely. This can be useful for widgets that should only appear when a viewer clicks on a certain button.

Interactive Studio hide widget

When having multiple widgets on a timeline, it’s possible to change the order of the widgets.

WCAG: order of clickable items

According to the WCAG standards all web content should be usable with the keyboard. This means that users can access and move between links, buttons, forms, and other controls using the Tab key and other keystrokes. Ensure that the order of clickable widgets is logical (tab order), by determining the order in the timeline. Place the first clickable widget at the bottom of the timeline and the last clickable widget at the top of the timeline, etc.

5.0 | Properties and actions panel

The properties and actions panel allows you to set several widget properties and actions. 

5.1 | Widget properties

Let’s say, for example, you’d like to resize a widget. The size can be changed on the canvas, but it’s also possible to change the width and height in the properties settings to the exact values you prefer.

Interactive Studio widget properties

5.2 | Widget actions

Scroll down in the same panel to add actions to your widget. Actions determine the behaviour of widgets when a viewer interacts with it. 

For instance, we could set our widget to pause the video whenever a user clicks on it. Or we can use it to mute the video.

At the bottom of the panel we can switch tabs to set a message or check the form data. These advanced settings allow for quicker use of similar interactivity on different buttons and data exchange.


Was this article helpful?

Related Articles

Contact Support
Can't find the answer you're looking for?
Contact Support