The Hotspot tool allows you to annotate images with animated 'hotspots' - glowing circles that can be clicked for more information, images, videos and galleries. You can customise the colour and size of each spot and choose from a library containing thousands of icons to assign to them to better illustrate the category or purpose of each annotation.

🖼️ Examples

Here's some examples of how you can configure the Hotspot tool:

⚙️Settings

Settings you can configure in the Hotspot tool:

Add/edit image

  • Choose or Upload Image - Add a base image on which your annotations will be placed.
  • Alternative Description - Provide a description of the image as an accessible 'alt tag' for users who may be using screen readers.

Edit hotspots

Select Add Spot to choose a location for your hotspot.

  • Content - Provide text content and call to action link:
    • Title - the heading for your annotation.
    • Description - a rich text annotation of up to 500 characters.
    • Call to Action Text - a description for an optional call to action link.
    • Call to Action Link - optionally provide a URL or use the sitemap or document icons to link to another page within your site or a document.
  • Media - Provide an optional image, video or gallery:
    • Image/Video - select whether to add an image or video.
    • Choose or Upload Image (if Image is selected) - select or upload an image via the File Manager.
    • Video Link (if Video is selected) - paste the YouTube or Vimeo URL of the video you wish to embed.
    • Alternative Description - Provide a description of the image as an accessible 'alt tag' for users who may be using screen readers.
    • Credit - If relevant, credit third parties, photographers, film makers etc. responsible for the media you add.
  • Design- Define the appearance of your hotspot:
    • Hotspot Size - Choose how large the hotspot appears. Options range from extra small through to large.
    • Hotspot Colour - Choose the colour of the hotspot. You can choose from a predefined palette, drag the cursor across the colour spectrum or input the HTML for the colour.
    • Icon - Search the icon library by keyword to find the right icon for your hotspot.
    • Icon Colour - choose between light (white) or dark (black) icons to ensure optimal contrast between the icon and the hotspot colour.

Settings

  • Block Title - Provide a heading for your annotated image.
  • Block Description - Provide a subheading or description for your annotated image.
  • Pop-up Theme - Choose whether the information and media that displays when a hotspot is clicked displays on a light or dark background.
  • Hotspot Animation - Choose whether hotspots are animated to pulse/glow on the screen, drawing attention to them.

🎯 Key Actions

Key actions you can perform in the Hotspot tool:

  • In the Add/Edit Image tab, select the Select New Image button.
  • You will be taken to the File Manager screen, where you can choose an existing file.
  • If your image is not in the File Manager, select Upload Files at the top right hand side of the screen.
  • You can also cancel by hitting the x at the top right hand side of the File Manager screen.
  • Optionally add alternative text.
  • Under the Edit Hotspots tab, select Add Spot.
  • The cursor will become a cross when hovering over the base image, allowing you to choose an exact spot by clicking.
  • The hotspot editor will appear. Add a title and optional description and call to action text and link.
  • Under the Media tab optionally add media by selecting the Add Media button.
  • Under the design tab, choose a size, colour, optional icon and icon colour.
  • You can add up to 50 hotspots to an image, but be mindful of space and user experience when adding a large amount.
  • When you are finished, select the green Save button.
  • Navigate to the Edit Hotspots tab.
  • Select a hotspot from the list and select the edit (pencil) icon.
  • Change the content, media and design of the hotspot as desired.
  • When you are finished, select the green Save button.
  • Select the hotspot you want to move on the image.
  • Click, hold and drag the hotspot to a new location.
  • Navigate to the Edit Hotspots tab.
  • Select a hotspot from the list and select the delete (bin) icon.
  • A pop-up will ask you if you're sure. If you want to proceed, select OK, otherwise select Cancel.

Premium customers can embed a Hotspot tool on an external website. To do this, select the 'share' button next to the 'expand' button on the top right of the tool while logged in. An iframe code will be generated allowing you to embed the tool on external sites.