Setup Guide: Image with Hotspots

The “Image with Hotspots” feature allows you choose a custom image and place buttons that link to other features or trigger an action. This article should serve as a guide on how to set up the feature and the different configuration options.

1. Setting the Background Image

After creating a new Image with Hotspots feature, the first thing you want to configure is the Background Image. This is the image on top of which the buttons and hotspots are placed. To do so, simply switch to the “Content” tab and select an item from the dropdown menu labeled “Background Image“.

Now we have to define how the image will be displayed on the screen of the device: The Image gravity option determines how the image is positioned, while the Resize mode specifies whether the image should be stretched to fill the screen or not. Also, you can optionally select a second version of the Background Image that will be used on tablets.

Note: By default, the background image is used on all devices.

2. Placing Buttons & Hotspots

With the Background Image set up, you can now begin placing Buttons and Hotspots. To do so, you can use the Visual Editor under the “Editor” tab as well as the input fields in the “Buttons & Hotspots” tab.

2.1 Buttons or Hotspots?

Buttons and hotspots work exactly the same way except for two things:

  • Buttons are invisible zones while Hotspots display an image on top of the Background Image
  • A Hotspot is always a square whereas a Button can take the form of any rectangle

This means that you should use Hotspots if you want to create visible buttons and Buttons if you simply want to make parts of the Background Image clickable.

2.2 Placing Buttons & Hotspots using the Visual Editor

The easiest way to setup your Image with Hotspots feature is by using the Visual Editor as it allows you to simply place Buttons and Hotspots via drag and drop.

Start by clicking the button labeled “+ Add button“. This will cause a new button to appear in the top left corner of the Background Image. You can move the Button by clicking and dragging across the editor. Furthermore, you can change the size and shape of the Button by clicking the red square in the bottom right corner and dragging. In order to remove a Button, simply click the “x” in its top right corner.

Note: In the Visual Editor, you can currently only create Buttons.
In order to change the Button into a Hotspot, use the “Buttons and Hotspots” tab.

2.3 Using the “Buttons & Hotspots” tab

In addition to the Visual Editor, you can configure your Buttons under the “Buttons & Hotspots” tab.
Here, you can change the following properties:

  • Type: Select whether you want to place a button or a hotspot
  • X/Y: The horizontal/vertical position of the button or hotspot measured in pixels
  • Feature or Action: The feature or action that should be opened when the button or hotspot is clicked

In addition to these values, there are some properties that are specific to either Buttons or Hotspots:

  • Width/Height (Buttons only): Width and height of the button in pixels
  • Size (Hotspots only): Size of the hotspot in pixels
  • Image (Hotspots only): The image that is displayed at the hotspot’s position

Note: You can use the Visual Editor to preview the changes you make in the “Buttons & Hotspots” tab.

3. Additional Options

In addition to the configuration options already mentioned, there are several settings under the “Style” tab that affect the appearance of the feature:

  • Default Hotspot Image: This image will be displayed for all hotspots that do not have a specific image set
  • Default Hotspot Size: The size used for hotspots whose size is not set
  • Background Color: If the background image doesn’t fill the whole screen, the rest of it will have this color
  • Transparent Navbar: If enabled, the navbar will be hidden on this feature

4. The “Image with Actions” Feature

You may have noticed that in addition to the Image with Hotspots feature, there is an Image with Actions feature. The difference between these two page types is that the Image with Actions feature does not support linking to other features, which means you can only trigger custom actions with the Buttons and Hotspots. Apart from that, the features behave the same way.