Product Guides

Hotspot Builder

Create interactive image hotspots that display product information, links, or custom content when clicked. The builder provides a visual canvas for precise marker placement.

Builder Overview

The hotspot builder uses a three-panel layout:

Left panel — List of all hotspot markers. Drag to reorder. Click to select.
Center canvas — Your image with draggable hotspot markers. Click the image to add a new hotspot.
Right panel — Properties for the selected hotspot (position, content, link, styling).

Setting Up

Create a new experience and choose Hotspot as the type.
Click Set Image on the canvas to open the Filerobot Asset Picker and select your base image.
The image loads on the canvas. Click anywhere on the image to place your first hotspot.

Image resolution

Use high-resolution images. The Filerobot CDN automatically optimizes and resizes for each visitor's device.

Adding Hotspots

Click on the canvas to add a new hotspot marker. Each hotspot has:

Property	Description
Position (x, y)	Percentage-based coordinates. Drag the marker on canvas or enter exact values.
Title	Text shown in the popover header. Supports plain text.
Description	Body text for the popover. Supports plain text.
Link	Optional URL. When set, adds a clickable action to the popover.
Image	Optional image shown in the popover. Selected via Asset Picker.
Marker style	Visual appearance: default dot, numbered, or custom icon.

Styling Options

The style panel (accessible via the gear icon in the top bar) controls the global appearance:

Marker color — Primary color for hotspot markers.
Popover theme — Light or dark popover background.
Pulse animation — Enable/disable the pulsing animation on markers.
Image crop — Aspect ratio and gravity for the base image.

These style options inherit from your workspace branding by default but can be overridden per experience.

Tips

Keep hotspots spaced apart — overlapping markers can be hard to click on mobile.
Use short, scannable titles. Visitors interact more with concise callouts.
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.

Builder Overview

The hotspot builder uses a three-panel layout:

Left panel — List of all hotspot markers. Drag to reorder. Click to select.

Center canvas — Your image with draggable hotspot markers. Click the image to add a new hotspot.

Right panel — Properties for the selected hotspot (position, content, link, styling).

Setting Up

Create a new experience and choose Hotspot as the type.

Click Set Image on the canvas to open the Filerobot Asset Picker and select your base image.

The image loads on the canvas. Click anywhere on the image to place your first hotspot.

Image resolution

Use high-resolution images. The Filerobot CDN automatically optimizes and resizes for each visitor's device.

Adding Hotspots

Click on the canvas to add a new hotspot marker. Each hotspot has:

Property	Description
Position (x, y)	Percentage-based coordinates. Drag the marker on canvas or enter exact values.
Title	Text shown in the popover header. Supports plain text.
Description	Body text for the popover. Supports plain text.
Link	Optional URL. When set, adds a clickable action to the popover.
Image	Optional image shown in the popover. Selected via Asset Picker.
Marker style	Visual appearance: default dot, numbered, or custom icon.

Styling Options

The style panel (accessible via the gear icon in the top bar) controls the global appearance:

Marker color — Primary color for hotspot markers.

Popover theme — Light or dark popover background.

Pulse animation — Enable/disable the pulsing animation on markers.

Image crop — Aspect ratio and gravity for the base image.

These style options inherit from your workspace branding by default but can be overridden per experience.

Tips

Keep hotspots spaced apart — overlapping markers can be hard to click on mobile.

Use short, scannable titles. Visitors interact more with concise callouts.

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.