Skip to main content
Creating Hotspots

Guide on creating a Hotspot and accompanying Tooltip.

Flora Sanders avatar
Written by Flora Sanders
Updated this week

How to create a hotspot

Hotspots are a great way to draw attention to a new feature or an updated existing feature without interrupting a user's workflow. They can also provide contextual help and influence user behavior with gentle nudges that users opt into.

Some everyday use cases for Hotspots:

  • Contextual help

  • New features Announcements

  • Influence user behavior

Let's get started building out a Hotspot!

Jump to:

1. To begin, hit the Create New Content button on the Dashboard or Content page:

Screenshot showing the Dashboard with the Create New Content CTA

2. Select Hotspots as your content type:

Screenshot showing Step 1 of creating a Hotspot - pick your Content Type

3. Name your Hotspot Group and add it to a section (optional but recommended for a clean and tidy Content page!):

Screenshot showing step 2 of creating a Hotspot - name your Hotspot Group

4. Add the URL where you want the content to go:

Screenshot showing Step 3 of creating a Hotspot doc

5. Grab your snapshot:

GIF showing Snapshot journey for Hotspots

6. Then, you'll need to select the div you want - you can move your mouse around the page to find your chosen div or use the HTML section of the toolbar; just hit the target icon to confirm your selection:

7. You can also manually add your div at this point! Then click 'Start Editing Content' to begin:

Screenshot showing where you add your Hotspot div

Beacon controls

8. You can name your Hotspot, align the beacon from the top and left, and change the size with the controls on the right-hand editor toolbox.

You can also change the tooltip position manually or keep it on auto (recommended ✨):

GIF showing changing the size and placement of the beacon

You can also change the color of your beacon at the bottom of the right-hand editor toolbox 🎨

GIF showing changing the color of your beacon

9. Build out your content as you usually would by dragging on layouts, CTAs, and other components from the left-hand palette!

Need a refresh? Check out our guide on creating content here πŸ‘€

Adding multiple Hotspots to your Hotspot Group

Ready to add a new Hotspot to your Hotspot Group?

10. Hit the + Add Hotspot button at the bottom of your screen and add your new selector:

GIF showing how to add another Hotspot to your Hotspot Group

Repeat this as many times as you need!

Navigating multiple Hotspots in the editor

  • Your Active Hotspot (the one you're viewing) will be highlighted in the Hotspot menu as turquoise; you can switch between viewing your different Hotspots in your Hotspot Group by clicking on the other Hotspots in the menu, clicking on the other beacons or using the Layers tab on the left:

GIF showing ways to switch between Hotspots

Tip ✨: naming your Hotspots might make it easier to switch between them if you have a few!

  • You can Duplicate, Delete, or change the order of your Hotspots by clicking on the three dots next to your active Hotspot in the menu:

GIF showing how to Duplicate, Delete, or change the order of your Hotspots

  • You can click on the three dots to the right of + Add Hotspot to move the Hotspot menu to the top or bottom of the editor:

Screenshot showing control to move the Hotspot menu to the top or bottom of the editor

Hotspot Interactions

Screenshot of Hotspot interactions
  • Minimizing - Clicking elsewhere on the page or clicking the 'X' in a Hotspot minimizes the Tooltip, i.e., the beacon will remain until the user clicks on the CTA set to dismiss it or the content is unpublished.

  • Dismiss Hotspot - This will dismiss that individual Hotspot; the other Hotspots in the Hotspot Group will remain. For example, you might have one Hotspot highlighting a new feature, and you want CTA to take them to that page and also dismiss the Hotspot!

  • Dismiss & Open Next Hotspot - If you have a few Hotspots in a Hotspot Group that follow on from each other, you can set the CTA to Dismiss & Open Next Hotspot to trigger the flow for the user.

  • Dismiss Hotspot Groupβ€”If you have multiple Hotspots in a Hotspot Group, you might want to give users an exit-all option. That's where you'd use Dismiss Hotspot Group, which will dismiss them all at once!

Screenshot showing Dismiss Hotspot Group

Publishing your Hotspots

As you've already added your div, you'll want to check you're targeting the correct segment, and then you're ready to launch them - simply hit the Publish button πŸš€

GIF showing publishing your Hotspot

Watch our 6-minute overview video on creating Hotspots.

Did this answer your question?