Hotspots

Hotspots bring interactive, contextual pop-ups that contain rich content (text, images, buttons, links, icons, and more) to your images.

Adding Hotspots

To add a hotspot, select any uploaded image and click the ‘Add hotspot’ button – either in the Upper Contextual Toolbar, in the bottom right corner of the image, or in the right-click menu.

Hotspots settings in Upper Contextual Toolbar of the Setka Editor interface

Hotspots settings in the Right Corner of the Image of the Setka Editor interface

Hotspots settings in the right-click menu of the Setka Editor interface

Once the hotspot dot appears on the image, it can be placed (or moved) anywhere in the image. There’s no limit to the amount of hotspots you can add to an image (but try to keep it to a reasonable number).

When you click the ‘Add hotspot’ button, a pop-up window opens. In the pop-up you can insert either (or both) text and any element from the right panel: a picture, button, divider, icon, grid, etc.

Hotspot rich content in the Setka Editor interface

Editing Hotspots

You can set the format for your hotspots: choose the most preferable shape for the dots, the way the pop-up appears in a published post and also make the dots animated. By selecting several elements, you can apply changes to all selected dots at once.

Hotspot Settings in Upper Contextual Toolbar of Setka Editor interface

Feature settings

• Shape: select a circle, rhombus, square, or rounded square.

• Color: at the moment you can change the color of hotspots via custom CSS.

• If you want to use the same hotspot's color for all posts, add the following custom CSS in the Styles:

  .stk-image-figure { --stk-hotspot-color: rebeccapurple; } Replace rebeccapurplewith the desired color.

• If you want to change the hotspot color for a single image in the post, click on the image and add this code to the Custom CSS field --stk-hotspot-color: green; Replace greenwith the desired color.

Reach out to the Setka team if you need assistance.

• Select an ‘action’ when the Hotspots open: on hover, on click.

• Hotspots animation: on / off.

• Settings can be applied to either one or several selected Hotspots, or to all at once.

• Within the same image, you can add Hotspots in different settings.

Feature limitations

• You can't change the width of the popup/widget ;

• You can't apply animation to an element inside the popup (widget) ;

• You can't add a footnote or add another hotspot inside the popup (widget);

• Hotspots can’t be used on PDF pages.

Click ‘Done’ and your Hotspots are now set up.

When your reader clicks or hovers over your Hotspots, a pop-up opens with all the information you shared – description, price, link, CTA button, or other.

In the Preview Mode, you can check how your end-users see the Hotspots both on desktop, and mobile.

If you want to remove the hotspot, click on it, and then click Remove.

Check out the video below to see how to use Hotspots in action!

Video tutorial on how to use Hotspots in Setka Editor