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 be used to provide contextual help and influence user behavior with gentle nudges that users opt into.
Some common 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:
2. Select Hotspots as your content type:
3. Name your Hotspot Group and add it to a section (optional but recommended for a clean and tidy Content page!):
4. Add the URL where you want the content to go:
5. Grab your snapshot:
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:
Beacon controls
8. You can name your Hotspot, align the beacon from the top and left, and change the beacon size with the controls on the right-hand editor toolbox.
You can also change the tooltip position manually or keep it on auto (recommended ✨):
You can also change the color of your beacon at the bottom of the right-hand editor toolbox 🎨
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:
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:
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:
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:
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 to 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 and it'll dismiss them all at once!
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 🚀
Watch our 6-minute overview video on creating Hotspots: