Hotspots are great ways to draw attention to features or provide contextual help without interrupting your users’ workflow. Think of them as persistent, friendly guides that invite interaction when users are ready to engage with a feature.
This article is about hotspots. For overlays, product tours, or inline, see:
What are Hotspots?
When a hotspot appears, your users see a pulsing beacon (a small, attention-grabbing dot). When they're curious or ready for help, they click it to reveal a tooltip with more information. They can minimize the tooltip and come back to it later, or dismiss it entirely when they're done.
When to use hotspots
Use hotspots when you want to highlight new features without disrupting workflow, gently influence behavior, or provide contextual help. Examples:
After a product update, use hotspots to point out new buttons, settings, or capabilities.
Add hotspots near complex settings to explain what they do and when to use them.
Place hotspots on a dashboard, navigation, and key actions for first-time users to explore at their own pace.
In this guide, we’ll walk through creating hotspots, triggering, previewing, and publishing them.
Create a Hotspot
To get started, navigate to Content on the left sidebar.
Click Create New Content
Select Hotspots as your content type
Name your Hotspot (Tip: use descriptive names like "Dashboard tour" or "New feature highlights")
Add it to a content section / category to keep things organized
Select an audience segment (or you can skip and refine targeting later)
Want to see it in action?
Watch this short demo to see how to create hotspots in Candu.
Place it on a page
To anchor your hotspot, you’ll first capture a snapshot of your product page, then select the exact element you want to highlight. This ensures your hotspot appears precisely where you want users to see it.
Take a snapshot. Decide where the hotspot will appear in your product by grabbing a snapshot. This lets you place it precisely and preview it in context.
Select your element. Hover over the snapshot to find the element you want to highlight, then click to save the selector. Click on Start Editing Content to save the spot.
📌 Note: You can also manually add a div at this point if needed! Click here to learn how.
Add more hotspots (groups)
Got multiple things to highlight? Click + Add Hotspot at the bottom of your screen and repeat the process.
Navigating multiple hotspots:
Your active hotspot (the one you're editing) appears turquoise in the menu
Switch between hotspots by clicking them in the menu, clicking beacons in the canvas, or using the Layers tab
Use the three dots menu to duplicate, delete, or reorder hotspots
Style the tooltip
Your hotspot comes with a default style, but you can fully customize it, or save time by creating a reusable style in your Styleguide. Saved styles keep your hotspots consistent for future content.
In the right-hand Toolbox, you can:
Rename your hotspot(s) for easy reference
Adjust beacon position and size
Set tooltip position and size
Customize colors and fonts to match your brand
Edit spacing, shadows, and borders for fine-tuned styling
Use the left-hand Palette to build your tooltip content. Drag in any component such as layouts, text blocks, buttons, images, videos, or links to design your tooltip.
Triggers and group settings
Once you’ve built your hotspot, you need to decide when and how users will see it. You have three triggering options:
Auto-display on page load
Hotspots appear automatically when users land on the target page. You can configure placement and audience under Settings → Placements:
URL rules: Set specific URL conditions for when your hotspots should display.
Audience segmentation: Show different hotspots to different user groups.
Hotspot Group Settings
If your hotspot group includes multiple beacons, you can choose whether to open the first hotspot on load or let users explore them on their own.
Select the hotspot
On the toolbox find Hotspot Group Settings
Check on/off
📌 Note: Only one tooltip can be opened at a time, but multiple beacons can be visible simultaneously.
Trigger from a Candu CTA
When you want another piece of Candu content (like a modal or banner) to reveal the hotspot:
Publish your hotspot without a placement
In another piece of Candu content, select the call-to-action (button/link)
Add the Trigger Hotspot action
Select your published hotspot from the dropdown
Best for:
Progressive disclosure (show advanced features after basics)
Creating connected content journeys
Programmatic triggering
Use Candu’s Javascript API to trigger hotspots programmatically when you need to control when hotspots appear based on specific user events or conditions. See our developer docs to learn more.
Hotspot interactions
When building your hotspot tooltips, you can add CTAs with different interactions.
Here’s the complete list of what each one does:
Open URL: Opens a link in the same or a new tab. Great to redirect users to external resources.
Trigger Overlay: Opens a Candu modal. Useful for layered experiences such as opening a detailed modal with a video.
Trigger Hotspot: Triggers another hotspot or hotspot group.
Trigger Tour: Launches a Candu product tour.
Change Content: Swaps current content with different Candu content.
Callback: Let Candu content trigger actions in your app. More details here.
Trigger Click: Clicks an element on the page
Send Email
Hotspot specific Interactions
Dismiss Hotspot: Removes that specific hotspot
Dismiss & Open Next Hotspot: Closes current, opens next hotspot in sequence
Dismiss Hotspot Group: Removes all hotspots in the group at once
📌 Note: When users click X or click outside the tooltip, the tooltip minimizes but the beacon remains. When no CTA added, the tooltip stays opened until dismissed.
Preview and Publish
You can preview and test your hotspot experience by using the share link, publishing to a test segment, or previewing with the Chrome Extension.
Publishing Hotspots
When you're ready to go live, click Publish. In the launch modal, you can confirm:
Segments:
You should have defined your audience by creating a segment. To double check your segment conditions, go to the honeycomb icon on the top section of the editor.
URL Rules:
Confirm the URL matches the right environment (e.g., prod, staging) and the page you're targeting.
And that's it! Content can take up to five minutes to appear. During this time, try doing a hard refresh (Ctrl+Shift+R on Windows or Cmd+Shift+R on Mac) to ensure you're not seeing cached content.
If you still do not see it after five minutes, see the troubleshooting guide.
Need more help? Reach out to us via chat or email us at [email protected].