About

Hotspots are the main way to add interactivity to your video. They let users click areas in the video to jump to another video, open a web link, or trigger other actions.

Create hotspots

There are two ways to create hotspots.

Automatically generated hotspots

When you connect nodes, the system automatically creates hotspots on the Start node.

1. Double-click the Start node to open the editor.
You'll see all connected hotspots stacked in the upper left corner.



2. Grab and drag them anywhere on the video to position them.



You can edit these app-generated hotspots. See Edit hotspots below.

Manually drawn hotspots

1. Double click on a node on the node map to open the editor. 
2. Click the Draw Hotspot icon to activate it.



3. Draw the hotspot on your video.

There's a protected zone, a rectangle at the bottom of the player, which is reserved for captions. You can't create hotspots in this area.

Edit hotspots

Double click the hotspot to open the Properties panel on the right.

Size and positioning

• Drag the hotspot to reposition it.
• Drag the handles to resize.
• For pixel-precise control, use the properties panel on the right.

You can also add guides:

1. Click the Rulers & Guides toggle at the top left.
2. Click the ruler to add vertical/horizontal guides.

Click the “X” next to a guide to remove it.

Hotspot behavior

Options under the Behavior section of the properties pane answer the question “What happens when the hotspot is clicked?”

Under the Behavior section, choose what happens when the hotspot is clicked:

• Instant Jump: Instantly jump to another node.
• Pause Video: Pause the video (useful for Custom URL linkouts - see below).
• No Action: No click action; display text only.

Custom URL Linkouts

You can set a hotspot to open a web page in a new tab:

1. Enter the URL in the URL field.
2. The video will pause when the hotspot is clicked, and the viewer can explore related information without missing any video content. 
3. Please follow this format: http://www.example.com

Styles

Custom skins

1. Click on a hotspot and click on the Styles section.
2. Click the dropdown next to Skin and select Create new skin.
   
3.  Enter a name for the new skin.
   
4. Modify the skin style (select the attributes for the custom skin) and click Save.

You can now apply the custom skin to any hotspot in your project. 

Text

Double-click inside the hotspot and type your text.

Style the text (font, size, color) in the Text section of the Properties panel.

Background color

1. Click the color square to open the color picker.



2. Choose from the palette or enter Hex/RGB values. 
To make the hotspot transparent, move the opacity slider or set the Alpha (A) to 0.



The color you pick instantly updates on the hotspot.

Hover color

Choose a hover color (often a lighter version of your hotspot color).

The color picker displays these options for you automatically.

Hotspot timing

Each hotspot has its own timeline below the video:

1. Play and pause the video at the point you want the hotspot to appear.
2. Drag the left and right anchors to set the start and end times.



Use Timeline Snapping to align timings precisely across multiple hotspots.



With the Timeline Snapping toggle on, dragging a timeline anchor anywhere close to another timeline anchor causes it to snap to the exact location. This is useful if you want hotspots to appear at the exact same time.

When you have finished editing your hotspots, exit by clicking the arrow at the top left.

Copy, paste or delete hotspots

Copy / Paste

1. Select the hotspot.
2. Press CTRL+C / CTRL+V (PC) or Command+C / Command+V (Mac).
3. Or use the Duplicate icon.

The hotspot is duplicated and you can grab it and move to the position you want.

Delete a hotspot

1. Click on the hotspot you want to delete.
2. Click the trashcan icon at the top left.



A confirmation message displays.



3. Click OK to continue.

Click the arrow at the top left to exit.