In this article you will learn how to make your videos interactive by using different types of widgets.
1.0 | What are widgets?
Widgets are interactive elements in an interactive video. These elements alter the flow of the video or collect user input. For example:
- A button that navigates the viewer to a contact page
- A textfield where the viewer can enter their feedback on a product
- A video in your video
To be truly interactive, “actions” need to be attached to widgets. For example an ‘onclick’ action that determines the behaviour when a button is clicked. This article describes the various available widgets in the interactive studio and how to use them.
If you are familiar with the basics and are looking for more specific interactive cases, such as how to add navigation widgets or contact options, you might be interested in the following articles:
2.0 | Add a button
Add a button to an interactive video by uploading the image into the media panel and then dragging it onto the canvas where you can change its exact location and size:
Most commonly static images (png) are used for buttons, but they can be moving images as well (gif).
In the right panel you can change several properties for your widgets. Below we will go over some of the most frequently used properties: hover image, preload, use as KPI and actions.
2.1 | Hover image
We strongly recommend adding a hover image to your buttons. The hover image will be displayed when the viewer hovers over the widget. This will be helpful for giving viewers direct visual feedback to help them determine which objects in the video are clickable.
2.1 | Preload
By selecting the Preload option, the button’s normal image and hover image will load before the video starts playing. This is important if your interactive video contains many images and buttons. When the Preload option isn’t enabled, images might not be able to see them immediately.
2.2 | Use as KPI
Select the Use as KPI option on a button to measure its views and clicks in the analytics. This setting is most frequently enabled when a viewers are presented an option, so the amount of clicks are logged in the analytics.
For example: when using thumbs up and thumbs down buttons to collect feedback on your video, you can easily measure the results in the analytics section with the Use as KPI setting enabled.
2.3 | Add actions
Last but not least, you can add actions to a button in the right panel below the button properties:
As buttons are clickable by definition, add an OnClick action to your button. Here you can set up the behavior of the button when a viewer clicks on it, such as linking to a webpage or navigating to another clip (learn more about how to add navigation widgets).
3.0 | Add a rectangle (invisible)
Rectangles are by default invisible widgets and are often used to trigger actions without the viewer having to interact with the video.
For example: an invisible rectangle is placed right before the end of the video an OnShow action that pauses the player.
Add a rectangle to the studio by clicking the rectangle icon just below the canvas.
Pausing the player automatically is the most commonly used action for rectangles. Other examples:
- A rectangle used to loop a video by navigating back to an earlier timecode in the video to make sure the video will not reach the end until a viewer selects an option.
- A rectangle used to show widgets that were previously hidden.
- A rectangle used to set (or clear) a local storage value.
Since these actions should be triggered when the rectangle is ‘shown’ in the video, all of the examples above would require an OnShow action on the right panel.
The size of a rectangle doesn’t matter as they are invisible. However we strongly recommend making them as small as possible and/or moving them at the bottom of the timeline list. This will avoid the rectangles overlapping clickable widgets (e.g. buttons).
Sometimes an item (such as a button) might already be rendered into the video source file. In this case, rectangles can be added (with the same size) to make these items clickable. For example, if your video is divided into two halves that the viewer can select, add two rectangles that cover the entire left and right part of the video respectively to create two options for viewers.
4.0 | Add a text field/textarea
Text fields and textareas are elements viewers can use to enter text, such as their email address. You can add both textfields and textareas to your video by clicking their icon just below the canvas. Once they’re on the canvas you can resize them.
Select the text field or textarea to change its:
- Font (size, colour, style opacity, alignment)
- Background (colour, opacity, corner-radius, padding)
On the right panel you can change several properties such as the placeholder text.
For example, if you add a textarea to allow viewers to give feedback on your video, you could add the placeholder text “Let us know what you think of this video”. Once a viewer starts typing in the textarea, the placeholder text will immediately disappear:
Textfields and textareas behave the same way; the difference is their size: textareas can be multi-lined (to collect larger texts) whereas text fields are single lined (sufficient to collect a viewer’s name or email address).
5.0 | Add text
Use the text widget to add text to your video. By clicking the text icon just below the canvas you can add it to the video. Once it’s on the canvas you can resize the widget:
Select the text widget to change its:
- Font (size, colour, style opacity, alignment)
- Background (colour, opacity, corner-radius, padding)
On the properties panel on the right you can change the text (default: “Textlabel”).
Text widgets are often used for titles or short questions.
For example, when asking viewers for feedback by having them click a thumbs up or thumbs down button, you can add a text widget above: “Did you learn something from this video?”.
Text widgets can also be used for “video personalisation”. In this case the value of the text widget can be based on a value the viewer has entered earlier in the video, such as their name. As a result the text widget will look differently for everyone who watches, John will see “John” in the video whereas Jane will see her own name.
Whenever possible, we usually recommend rendering as much texts as possible in the video file itself. Text will most often look slightly better this way. If this isn’t an option however, a text widget (or an image widget containing text) should do the trick as well.
6.0 | Add an audio track
Audio files can also be added to an interactive video. Unlike all other widgets in this list, audio files can’t be found right below the canvas. Instead, they can be added in the timeline.
Click on “Add new track” and select the audio widget:
Once the audio file is selected in the timeline, you can change its properties on the right panel. Here you can add an .mp3 or .wav file and change the volume (default value: 70).
Because audio is most commonly rendered into the video file itself, adding audio files can be very useful for adding sound effects.
For example, when creating a quiz in your interactive video, you might want a sound effect to play once a viewer selects the correct or incorrect answer. In that case, the audio files should be hidden on the timeline, and they’re only called upon in the action of a button click.
<<<Example???>>>>
7.0 | Add video (video in video)
It’s also possible to add another video to your video. To add a video fill : drag a video file from the media library on the left onto the canvas, where you can change its precise location and size:
Use the properties panel on the right to change the video file and enable or disable the “Show controls” option. By enabling this, the video in video will have its own control bar.
We strongly recommend enabling the Preload setting as the video in video will load before the video starts playing. Video files are generally larger, resulting in longer loading times.