Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

DESIGN  & UX

Hotspots for Setka – create more interactive, clickable content

Published October 12th, 2021

Setka’s new native hotspot feature adds interactive, contextual pop-ups to your visual content, with the click of a mouse.

Anastasia Vyshkvarkina

Marketing Specialist at Setka


There’s a coveted new feature in the Setka – Hotspots – and it gives you the ability to add contextual pop-ups to any image. The rich content appears as a pop-up, and there’s no need to use any code or an external integration to get them working.

You can insert text, another image, a button, divider, icon, video or other interactive elements that help your content convert.

This easy-to-use feature encourages more engagement, conversions, interactions and provides extra value for the customers. How does it do that? Content readers get the information they want and need, and can immediately take action right there on the image – instead of scrolling down through the content piece or exiting the page.

Users can go directly from reading to interacting, and purchasing in just a few clicks. This feature shortens the gap between awareness and conversion.

We’ve always listened to our customers’ struggles and looked for ways to offer them out-of-the-box native solutions. Hotspots creates an interactive experience that’s more conversion oriented, and it can be done in no time, with no code. We can’t wait to see some incredible results.

Kate Sutormina

Product Manager at Setka

Previously, you could add descriptive information (about a word or a phrase) by using the Footnotes feature. However, Hotspots transforms your images from being just informative, to becoming interactive and aimed at building both engagement and conversion. Best of all, you can add as many hotspots as you want.

There’s no need to involve developers or use any external or paid solutions to create Hotspots. It’s a no-code solution that anyone can activate.

Hotspots add interactive elements to your content that encourage readers to take specific actions or to learn more about the product or service mentioned (or shown).

Here’s a few ideas and examples of how Hotspots elevate your visual content (hover or click on the red dot to see how it works):

How to use Hotspots

Once you’ve selected the uploaded image, click on the ‘Add hotspot’ button – either in the upper contextual toolbar, in the bottom right corner of the image, or in the right-click menu. A red dot appears on the image – which 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).

In the pop-up window, you can insert either (or both) text and any element from the right panel: a picture, CTA button, divider, icon, a link, and more.

The following settings can be applied to hotspots:

  • Shape: select a circle, rhombus, square or rounded square
  • Select an ‘action’ when the hotspot opens: 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

Click ‘Done’ and your hotspots are now set-up.

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

As always, the Preview Mode shows you how your end-users see the hotspots both on desktop, and mobile.

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


Head to our Help Center to learn more details about how to use Hotposts, and to share any feedback.

Visit Help Center

Give Setka a try

Get a demo from our Customer Success team or try Setka for 14 days, free.

Related Articles

  • Design & UX

    How to use grids: best practices for beginners

    by Oleg Uppit in Design & UX
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing