If you are just getting started with interactive video, this article will be a good starting point as you will learn the basics of all the steps that are part of 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
- Add a thumbnail
- Presenting your project
- Using playouts
- Embedding your project
- Previewing your project
But before we get started it’s 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 the viewer’s to provide feedback at the end of the video. However, most interactive videos have a bit more complexity with several “branchings” based on the viewer’s interaction with the content.
To avoid getting lost, we highly recommend creating a “flowchart”.
A flowchart is a visual representation of the way individual clips are connected and how viewers can navigate through the video. As such, a flowchart is a great starting point to start writing an interactive script. An interactive script is the same as a normal video script, except it also contains all interactions.
In the upcoming section you will learn more on creating a flowchart (3.2).
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.
To upload your files:
- Head over to the “Upload and Transcode” section in the “Media Library”
- Upload your videos by dragging them to the frame or by selecting them from your computer. Alternatively you can import a video by entering a URL. Learn more about uploading and importing your videos (https://support.bluebillywig.com/content-management/uploading-transcoding-publishing/).
Although it’s possible to create basic visuals in the studio, most users will create their own widgets 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, let’s look at 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 viewed one of the three options, they will proceed to the final end clip:
The buttons for navigating to different videos are added to each individual clip.
However, to properly evaluate its success, we are not merely interested in the performance of these 4 separate interactive clips. We also want to know exactly how a viewer has navigated through these videos.
For example: besides analysing the amount of views of the end clip, we also want to know how many viewers came there through option 1, 2 or 3.
To analyse the 4 interactive clips as ‘one’, we will have 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 project screen and click “Create new project”:
- Add the most important project metadata, such as a project name and goal, as well as a name and a description.
- Publish the project on the top right and save the project by clicking the “save” button in the bottom right corner.
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 labeled “Start” is the start of your flowchart.
- Click this box to edit the name and the mediaclip associated with it:
- Hover your mouse over the start item, and click on the “+” symbol that appears.
- Drag the appearing line to the next column:
- Click the new box to add a title and a mediaclip.
- Repeat these steps until you’ve added all your media clips for the project.
- Save your progress by clicking the “save” button in the bottom right corner.
3.4 | Add a thumbnail
When placing a project on a website or app, the thumbnail will be displayed before the project starts playing.
To add a thumbnail:
- Head over to the Thumbnail tab:
- Drop a file in the frame or select files 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, 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).
If you do not see the Add Interactivity button, your account doesn’t have the interactivity permissions. Please contact support@bluebillywig.com to request access.
If a clip already has interactivity, you can also use the studio icon to instantly enter the interactive studio from the Media Library.
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, be sure to visit our section on adding navigation, contact options and more.
If you are looking for a bit more 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. For this you will need to ’embed’ your project on your website or using the Blue Billywig player.
5.1 | Using Playouts
The Blue Billywig video player can be completely customised to meet your brand’s needs. You can change the appearance as well as its behavioural settings of the player by creating a “Playout”.
Learn more on how to create and configure playouts.
5.2 | Embedding an interactive project
There are two ways of embedding:
- 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 would highly recommend embedding the project. Embedding a project enables statistics logging for the entire project as well as displaying the project metadata (only if this is configured in the playout).
The steps below describe how to preview and embed projects (learn more about embedding media clips).
- In the Projects section of the Media Library page, open your project and head over to the Embed tab.
The embed code for the project is generated in this tab based on the embed type and playout.
By selecting an embed type you determine what sort of embed code is generated. Learn more about the differences between Javascript and Iframe embeds.
5.3 | Previewing an interactive project
There might be colleagues without access to the Online Video Platform who need to preview the project. For a quick preview of your project or to share with others, use the preview player in the embed tab.
Open the “Preview without statistics” link to preview the project that is accessible without having to login.
