Navigation


You can watch our tutorial video on adding navigation options here, or read the article below.

In this article you will learn how to let your viewers navigate through your video content. This could be either:

  • Navigating to a different part of the video
  • Navigating to a totally different video or 
  • Referring viewers to a website that might be relevant to them

1.0 | Navigate to clips

Most interactive projects contain multiple clips. This allows viewers to choose for themselves what other videos in the interactive project are relevant to them. 

To navigate to other clips using a button:

  • Upload a new button image or search for an existing file in the Media Library. 
  • Drag the file to the canvas.Interactive Studio drag to canvas
  • Expand the onClick option in the right panel

Select the “navigate to” option and choose a video from the media library

Interactive Studio navigate to clip
By default, navigating to other clips will let the viewer start from the beginning of the clip. Set an offset timecode to let the viewer start at a later moment in the video.

2.0 | Navigate to clips (automatically)

Instead of using a button click to navigate to other videos, you can also switch to a different video automatically. This can be useful for clips that don’t present any choices at the end of the video. In those cases you can automatically let the viewer navigate back to a main menu or to the next clip in the flow.

To automatically navigate to other clips: 

  • Drag the blue playhead to the end of the timeline. 
  • Click the ‘rectangle’ icon to add a new widget to the canvas. 
  • Instead of using “OnClick”, add an “OnShow” action. 
  • Select the “navigate to” option and choose a video from the media library.Interactive Studio onshow navigate to clip

The video will now automatically navigate to another clip when it reaches the rectangle in the timeline.

3.0 | Navigate within clips

3.1 | Skip ahead

Use the Interactive Studio to let viewers skip ahead in the same video by clicking a button. 

  • Drag an image onto the canvas 
  • Expand the OnClick menu to add an action. 
  • Select the ‘navigate to’ option and click the ‘clock’ icon. 
  • By entering a time-code you can direct viewers to an exact moment in the video.Interactive Studio time offset

3.2 | Create a loop

It’s also possible to apply this setting to create a ‘loop’. For example: at the end of a clip, add an invisible rectangle widget and make it navigate to an earlier point in the video. This way the video remains ‘looping’ and will never pause or finish. This can be useful if you’re presenting several options for the viewer to choose from. The loop will enable background animations or music to keep playing.

4.0 | Navigate to websites

Instead of navigating the viewer within the interactive project, it’s also possible to refer viewers to specific websites, such as a contact page, social media channels, etc. 

To navigate to a website: 

  • Drag an image onto the canvas 
  • Add an OnClick action. 
  • Select the “navigate to” option 
  • Click the third “chain link” icon to add a URL.Interactive Studio onclick website
Tip:

In most cases it’s recommended to leave the target to “_blank” so that the website will open in a separate browser tab. Select “_self” to open the website in the same browser tab.

 

Was this article helpful?

Related Articles