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 four 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).
The studio is divided into four sections:
- Canvas
- Timeline
- Media library
- Properties and actions panel
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 can move elements around freely or align them perfectly along other widgets using snap guides. Use the zoom controls to zoom in for precise positioning or zoom out to see the full canvas layout.
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, you can also switch to the Templates and Timelines tabs. We won’t go into detail about those here, but these tabs make it easy to reuse interactivity already used in other videos.
Besides dragging media files from the media library, you can add widget types directly using the widget bar above the canvas. Available widget types include Rectangle, Image, Button, Video, Text Label, Group, and more.
To add a media file as a widget, drag an image from the media library to the canvas:
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
Above the timeline you’ll find the player bar, which lets you play back the video and see the current playhead position and duration.
A widget is displayed on the canvas as well as in the timeline.
The timeline is used to determine exactly when a widget should be visible to the viewer by setting its start and endpoint.
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.
When you have multiple widgets in the timeline, you can also change their order.
According to 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 the order of clickable widgets is logical (tab order) by setting their order in the timeline. Place the first clickable widget at the bottom of the timeline and the last clickable widget at the top.
5.0 | Properties and Actions Panel
The properties and actions panel is where you configure individual widget settings and define their behaviour.
5.1 | Widget Properties
For example, if you’d like to resize a widget, the size can be changed directly on the canvas, but you can also enter exact width and height values in the properties panel. When two or more widgets are selected, alignment and distribution controls appear, allowing you to align widgets along a shared edge or distribute them evenly across the canvas.
5.2 | Widget Actions
Scroll down in the same panel to add actions to your widget. Actions determine the behaviour of a widget when a viewer interacts with it.
For instance, you could set a widget to pause the video when a user clicks on it, or to mute the video.
At the bottom of the panel, you can switch tabs to configure a message or check form data. These advanced settings allow for quicker reuse of similar interactivity across different buttons and for data exchange.