Hotspot Image widget

Hotspot Image widget

The Hotspot Image widget lets you place interactive hotspots directly on top of an image.

Each hotspot can open a popover containing additional information such as:

  • Title
  • Description
  • Icon
  • Link
  • Link text
  • Optional image

This makes the widget useful for explaining products, highlighting features, annotating screenshots, creating interactive diagrams, or guiding visitors through different parts of an image.

Visitors can reveal the information by hovering or clicking/tapping a hotspot, depending on how the widget is configured.

This article explains how to add and manage hotspots and how to customize their appearance and behavior.

Image and hotspots

The main settings view displays the image together with all hotspots currently added to it.

Click Change to replace the image.

Add a hotspot

Click directly on the image where you want the hotspot to appear.

A new hotspot is created at that position.

You can also click Add to create another hotspot.

Move a hotspot

Drag a hotspot pin directly on the image to reposition it.

This makes it easy to place each hotspot precisely over the part of the image it describes.

Edit a hotspot

Click a hotspot on the image or click the settings icon next to the corresponding item in the list.

Reorder hotspots

Use the drag handle next to an item to change its order.

This is particularly relevant when using the Numbered pin style, since the order determines the numbers displayed on the image.

Delete a hotspot

Click the trash icon next to an item to remove it.

💡 Tip

Position hotspots close to the exact feature or area they describe. Visitors should be able to immediately understand what each pin refers to without having to guess.

Hotspot content

Each hotspot can contain several types of information.

Title

Enter the heading displayed in the hotspot popover.

For example:

Get your own app

Keep titles short and easy to scan.

Description

Enter the supporting text displayed underneath the title.

For example:

Give your users direct access to your content on all devices.

Use the description to explain what the highlighted area represents or why it matters.

Icon

The Icon field is optional.

Select an icon to visually represent the hotspot.

Icons work particularly well when the pin itself should indicate what type of feature is being highlighted, such as:

  • Mobile
  • Desktop
  • Video
  • Shopping
  • Information
  • Settings

Click Clear to remove the selected icon.

The Link field is optional.

Add a link when visitors should be able to navigate somewhere from the hotspot popover.

This can be useful for linking to:

  • Another page
  • A product
  • A funnel
  • More detailed information
  • An external resource

Link text

Use Link text to control the clickable text displayed inside the popover.

For example:

Learn more

Keep link text short and action-oriented.

Image

You can optionally add another image inside the hotspot content.

Click Select to choose an image or Remove to remove the currently selected image.

This can be useful when the hotspot needs a closer view, screenshot, example, or supporting visual.

💡 Tip

You do not need to fill every optional field. For simple hotspots, a short title and description may be enough. Add icons, links, and images only when they make the information more useful.

Styling

The Styling settings control the appearance and interaction of all hotspots in the widget.

Image alt text

Use Image alt text to add a meaningful description of the main image.

The description should communicate the relevant content or purpose of the image.

Keep it concise and avoid unnecessary phrases such as "image of" when the context is already clear.

Pin style

Controls the appearance of the hotspot markers.

Available options:

  • Numbered
  • Dot
  • Plus

Numbered

Displays a sequential number on each hotspot.

This is useful when the hotspots represent steps or when you want visitors to follow them in a particular order.

Dot

Displays a simple dot marker.

This creates a more minimal appearance and works well when the location itself is more important than the order.

Plus

Displays a plus symbol.

This can make it visually clear that visitors can interact with the hotspot to reveal more information.

💡 Tip

Use Numbered when order matters. Use Dot or Plus when hotspots are independent and visitors can explore them in any order.

Dot size

Controls the size of the hotspot pins.

Available options:

  • Small
  • Medium
  • Large

Choose a size that keeps the pins easy to notice without covering important parts of the image.

Popover theme

Controls the overall appearance of the information box that opens from a hotspot.

Available options:

  • Light
  • Dark

Choose the theme that provides the best contrast against your image and surrounding page design.

Open on

Controls how visitors reveal the hotspot content.

Available options:

  • Hover (tap on mobile)
  • Click / tap

Hover (tap on mobile)

The popover opens when a desktop visitor moves the cursor over the hotspot.

On touch devices, visitors tap the hotspot instead.

This creates a fast, lightweight interaction.

Click / tap

Visitors must actively click or tap a hotspot to open it.

This can be easier when the popovers contain more detailed information, links, or other content that visitors need time to interact with.

💡 Tip

Use Hover for short explanatory content. Consider Click / tap when a hotspot contains longer descriptions or links, since visitors can interact with the popover more deliberately.

Pin color

Controls the color of the hotspot markers.

Choose a color that:

  • Stands out clearly against the image
  • Fits your website design
  • Remains visible over both light and dark parts of the image

For consistency, use one of your website's Global Colors whenever possible.

How hotspots appear on the live page

On the live page, hotspot pins are displayed directly over the selected image.

When a visitor interacts with a pin, a popover can display the configured:

  • Title
  • Description
  • Icon
  • Link
  • Link text
  • Additional image

For example, you could place one hotspot over a mobile device and another over a desktop screen, allowing visitors to explore different features within the same visual.

This makes it possible to communicate several pieces of information without permanently placing large amounts of text around the image.

Common use cases

The Hotspot Image widget works particularly well for:

  • Product feature explanations
  • Software screenshots
  • Platform walkthroughs
  • Interactive product images
  • Annotated diagrams
  • Maps or floor plans
  • Course or program overviews
  • Before-and-after explanations
  • Device mockups
  • Portfolio presentations
  • Step-by-step visual guides

Best practices

  • Keep each hotspot focused on one specific feature or area
  • Avoid placing pins too close together
  • Position pins precisely over the element they describe
  • Keep popover titles short
  • Use concise descriptions
  • Use numbered pins only when the order is meaningful
  • Choose a pin color with strong contrast against the image
  • Avoid adding more hotspots than visitors can comfortably understand
  • Use links only when there is a useful next step
  • Check hotspot placement on both desktop and mobile

💡 Tip

An interactive image is easiest to understand when the underlying image is already clear. Hotspots should add context to the visual rather than compensate for an image that is overly complex or difficult to interpret.

Summary

  • The Hotspot Image widget adds interactive points directly on an image
  • Click the image to add hotspots and drag pins to reposition them
  • Each hotspot can include a title, description, icon, link, link text, and image
  • Reorder or remove hotspots as needed
  • Choose between Numbered, Dot, and Plus pin styles
  • Select Small, Medium, or Large pin sizes
  • Choose a Light or Dark popover theme
  • Open hotspots on Hover or Click / tap
  • Customize the hotspot pin color
  • Add meaningful alt text to the main image

Used well, the Hotspot Image widget turns a static image into an interactive explanation that lets visitors explore features and details directly in context.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.