Interactive video lets viewers actively engage with your content by making choices that determine what they watch next. Instead of passively watching a linear video, viewers click buttons or interact with on-screen elements to navigate between clips (for example, choosing a product category, selecting a scenario in a training course, or picking a story path).
If you are just getting started with interactive video, this article is a good starting point. You will learn all the steps involved in the workflow for creating an interactive video.
These workflow steps involve:
- Uploading video files and widget assets
- Working with projects
- Creating a project
- Creating a flowchart
- Adding a thumbnail
- Presenting your project
- Using playouts
- Embedding your project
- Previewing your project
Before we get started, it is important to go over the proper preparations.
1.0 | Preparations: map out your project flow
Interactive videos come in many shapes and forms. A simple interactive video might only contain one clip prompting viewers to provide feedback at the end of the video. However, most interactive videos have a bit more complexity, with several branching paths based on the viewer’s interaction with the content.
To avoid getting lost, we highly recommend sketching a flowchart before you start building in the OVP.
A flowchart is a visual representation of the way individual clips are connected and how viewers can navigate through the video. Sketching one out first (on paper or in a diagramming tool) is a great starting point for writing an interactive script. An interactive script is the same as a normal video script, except it also contains all interactions.
Once your clips are ready, you will recreate this structure inside the OVP using the built-in Flowchart tool (see section 3.3).
2.0 | Uploading video files and widget assets
As soon as your video files, buttons, and other visual widgets are ready, you can upload them to the Online Video Platform. For a full walkthrough, see the Uploading, transcoding and publishing article.
Widgets are the visual, interactive elements overlaid on your video: clickable buttons, images, or hotspots that viewers use to navigate. Although it is possible to create basic visuals in the studio, most users design their own widgets externally and upload them as image files (JPG or PNG).
3.0 | Interactive projects
3.1 | “Interactive clip vs interactive project”: what is the difference?
To explain the difference between interactive clips and interactive projects, consider a simple example.
The chart below displays a simple flow where an intro clip presents three options to the viewer. After the viewer has fully watched one of the three options, they proceed to a final clip:
The buttons for navigating between videos are added to each individual clip.
However, to properly evaluate its success, we are not merely interested in the performance of these four separate interactive clips. We also want to know exactly how a viewer navigated through the videos.
For example: besides analysing the number of views of the end clip, we also want to know how many viewers arrived there through option 1, 2, or 3.
To analyse the four interactive clips as a single unit, you need to add them to an interactive project. A project connects these clips with overarching metadata, a thumbnail, and a flowchart.
3.2 | Creating an interactive project
To create a new project:
- In the Media Library, go to the Projects screen and click Create new project:
- Add the most important project metadata, such as a project name, goal, and description.
- Click Save & Publish in the action bar at the bottom of the screen to publish and save the project.
3.3 | Creating a flowchart
A flowchart is a visual representation of the way individual clips are connected and how viewers can navigate through the video. To create a flowchart:
- Head over to the Flowchart tab:
- The box labelled Start is the beginning of your flowchart.
- Click this box to edit the name and the media clip associated with it:
- Hover your mouse over the start item and click the + symbol that appears.
- Drag the line that appears to the next column:
- Click the new box to add a title and a media clip.
- Repeat these steps until you have added all media clips for the project.
- Save your progress by clicking the Save button in the bottom right corner.
3.4 | Adding a thumbnail
When placing a project on a website or app, the thumbnail is displayed before the project starts playing.
To add a thumbnail:
- Head over to the Thumbnail tab.
- Drop a file in the frame or select a file from your hard drive.
- Save your progress by clicking the Save button in the bottom right corner.
We recommend adding an inviting and descriptive thumbnail to your project. If no thumbnail is manually selected, the project thumbnail will be an automatically selected frame from the first media clip in the flowchart.
4.0 | Accessing the Interactive Studio
Use the Interactive Studio to add interactivity to your content.
To access the Interactive Studio, open a clip in the Media Library. In the right panel, click Add interactivity (or Edit interactivity if the clip already has interactivity). The studio icon shown next to this option can also be used to open the Interactive Studio directly.
If you do not see the Add interactivity option, your account does not have the interactivity permissions. Please contact support@bluebillywig.com to request access.
Once inside the Interactive Studio, you add the interactive elements (buttons, hotspots, and other widgets) to each individual clip. This is also where you define what happens when a viewer clicks an element, such as navigating to the next clip in the flowchart.
To get an overview of the Interactive Studio, head over to our Interactive Studio Introduction article.
To get started with adding interactivity to your content, visit our section on navigation, contact options, and more.
If you are looking for inspiration, head over to our Academy article.
5.0 | Presenting your project
After adding and testing your interactive project, you are ready to present your work. To do this, you will need to embed your project on your website or app.
5.1 | Using playouts
A playout is the configuration template for the Blue Billywig video player; it controls the player’s appearance (colours, controls, logo) and behaviour (autoplay, sharing options, and more). You select a playout when generating your embed code, so it is worth setting one up before you embed your project.
Learn more about how to create and configure playouts.
5.2 | Embedding an interactive project
There are two ways to embed:
- Embedding an interactive project: when your flowchart contains multiple clips.
- Embedding a single interactive video: when there is only one video that does not navigate to other clips.
While it is possible to embed a project by only embedding the intro clip, we highly recommend embedding the project. Embedding a project enables statistics logging for the entire viewer journey; meaning you can see not just how many times a clip was viewed, but also which paths viewers took through your interactive flow. It also displays the project metadata (if this is configured in the playout).
- In the Projects section of the Media Library, open your project and click Preview & embed in the top right corner.
This opens the embed panel where you can select an embed type and playout, then copy the generated embed code. For a full overview of embed types and options, see Embed clips, projects, channels and playlists.
5.3 | Previewing an interactive project
There may be colleagues without access to the Online Video Platform who need to preview the project. For a quick preview or to share the project with others, open your project and click Preview & embed in the top right corner.
In the embed panel, use the Preview without statistics link to open a preview of the project that is accessible without requiring a login.