Hotspots on interactive images allow recipients to uncover additional information when they hover on an item in your email. 

Setting up your fallback

Because the hotspots block isn’t supported on all email clients, it's important to start by setting up a fallback which will display to contacts who open your campaign in unsupported email clients.

You chose your preferred fallback option before the hotspot was added to your master templates.

Find out more about compatibility and fallback options: Hotspots in emails

When you first add the hotspot block to a template the fallback is visible first, so that you can set it up before moving onto your hotspot.

The fallback editable content works similarly to most of our standard template blocks.

Large image and line item fallback

If you're using the large image and line item fallback, all you need to do is:

• Edit the large image on the left 
• Edit the smaller images on the right
• Change the copy 

The large left image should be the same as your hotspot background and the content on the right is the information that belongs in your hotspots: 

Animated GIF fallback

If you're using the animated GIF fallback option then you can simply click on the image and  upload your desired animated GIF on the left:

Open the hotspot settings

In the visual editor, select the Edit template tab on the left.

A list of the blocks you've added to your template displays.

Find the hotspots block in the list and click the top (first) <>Html element.

A list of settings appears:

Turn the hotspots on

To turn on your hotspots, find  {% set hotspots_show = "n" %} {# option "y" or "n" #}

Change the first "n" to "y", e.g:. {% set hotspots_show = "y" %} {# option "y" or "n" #}

The hotspot element displays:

Changing the background image 

It’s a good idea to start by changing your background image so that you know where to position your hotspots. 

You can easily change the image url here:

Replace the current image URL with the URL of your background image.

Positioning the hotspots

You have two variables available to control vertical and horizontal positioning of each hotspot. 

The vertical element is controlled by the variable <{% set="set" hotspot_y_position="" %}="%}"></{%>

You can move your hotspot top, middle or bottom by using any of the following settings: 

• t = top
• m = middle
• b = bottom

For the horizontal positioning, edit the  {% set hotspot_x_position = "" %}

The options are:

• l = left
• c = centre
• r = right

Adding content to your hotspots

To view the hotspot pop-up, hover your mouse over the hotspot:

You can edit the image, copy and CTA content by clicking on each elements and updating the content as you would for any other block:

Repeat this for each hotspot and there you have it! 

How does it look on mobile?

The hotspot block is fully responsive, so any changes you make to the hotspot's positioning are mirrored on mobile.

The block simply scales down depending on device width.