Product Guides

Video Hotspot Builder

Add interactive hotspot markers to video content with time-based triggers. Hotspots appear and move along keyframed paths as the video plays, letting viewers discover product details without leaving the video.

Builder Overview

The video hotspot builder uses a three-panel layout with a timeline:

Left panel — List of all hotspot markers. Click to select, drag to reorder. Import/export hotspots via CSV or JSON.
Center canvas — Video player with draggable hotspot pins overlaid. Click the video to place a new hotspot at the current time.
Right panel — When no hotspot is selected: video settings (source, playback, controls, hotspot defaults). When a hotspot is selected: pin style, popover content, timing, keyframes, and behavior.
Timeline — Beneath the video, a horizontal timeline shows hotspot bands. Drag band edges to resize start/end times. Drag keyframe diamonds to reposition them.

Setting Up

Create a new experience and choose Video Hotspot as the type.
Click Select Video to open the Filerobot Asset Picker and choose an MP4, WebM, or HLS video.
The video loads in the canvas. A poster image is automatically extracted if available.
Click Add Hotspot in the left panel, then click on the video to place a marker at the current playback time.

Video formats

MP4 and WebM play natively. HLS streams (.m3u8) are auto-detected and use an HLS player. The player type can also be set manually in video settings.

Adding Hotspots

Each video hotspot has the following properties:

Property	Description
Position (x, y)	Percentage-based coordinates on the video frame. Drag the pin or enter exact values.
Start / End time	The time range during which the hotspot is visible. Set manually or use the "Set to current time" button.
Label	Internal name shown in the left panel and optionally as a marker label.
Popover content	Product data (title, description, price, image, CTA) or custom HTML for the popover.
Badge	Optional badge text (e.g. "NEW", "SALE") shown on the popover.
Marker style	Visual style: dot, dot + label, or numbered.
Appear animation	How the hotspot animates in: fade, scale, or none.

Keyframes & Motion

Hotspots can move across the video frame over time using keyframes. Each keyframe records a position (x, y) at a specific time. The hotspot interpolates smoothly between keyframes.

Adding keyframes — Navigate to a time and click “Add keyframe” in the properties panel, or simply drag the pin on the canvas at a new time.
Timeline keyframes — Diamond markers on the timeline band. Drag to adjust timing.
Easing — Choose between linear, ease-in, ease-out, and ease-in-out curves.
Interpolation — Linear (straight lines) or Catmull-Rom (smooth curves) between positions.

Edge keyframes

The first and last keyframes always align with the hotspot's start and end times. Resizing the band on the timeline automatically moves these edge keyframes.

Video Settings

When no hotspot is selected, the right panel shows global video settings:

Setting	Description
Video URL	The source URL. Supports MP4, WebM, and HLS (.m3u8).
Poster image	Still image shown before playback starts. Auto-extracted or manually selected.
Theme	Light or dark theme for the player UI.
Player type	Auto-detect, HTML5, or HLS. Auto-detect uses the URL to choose.
Autoplay / Loop / Mute	Standard playback controls.
Controls	Toggle video controls, fullscreen button, hotspot navigation, and timeline dot indicators.

Hotspot Behavior

Each hotspot can override global defaults for interaction behavior:

Trigger — Hover or click to show the popover.
Placement — Auto, top, bottom, left, or right popover position.
Auto-open — Automatically open the popover when the hotspot appears.
Pause on show — Pause the video when the hotspot becomes visible.
Pause on interact — Pause when the user interacts with the popover.
Keep open — Keep the popover visible even after the user moves away.

Chapters

Optionally divide the video into chapters. Each chapter has a title and a start time. Chapters appear as segments on the timeline and can be used for navigation when chapter navigation is enabled in the controls settings.

Import / Export

Bulk manage hotspots via the import/export menu in the left panel:

Export CSV / JSON — Download all hotspots with their positions, timing, and content.
Import — Upload a CSV or JSON file. Choose to append to existing hotspots or replace them.
Template — Download a blank CSV template with the expected columns.

Keyboard Shortcuts

Shortcut	Action
Space	Play / pause the video
Arrow Left / Right	Step backward / forward 0.2 seconds
Shift + Arrow Left / Right	Step backward / forward 2 seconds
Escape	Cancel placement or deselect hotspot

Tips

Use keyframes to make hotspots follow moving subjects in the video.
Enable “Pause on show” for important product callouts so viewers don't miss them.
Use the Catmull-Rom interpolation for smoother, more natural pin motion paths.
Preview on mobile using the responsive preview toggle in the builder top bar.
Changes auto-save every 3 seconds. Look for the "Saved" indicator in the top bar.