How to Create & Edit Hotspots
This doc reviews the basic steps of building hotspots. For more advanced use:
- Learn how to place hotspots on dynamic elements (dropdown menus, popouts, etc) here
- View and copy CSS sheets to style your hotspots
- Troubleshoot hotspots that won't display
- Open the Appcues editor; click Create and select Hotspots
- Your cursor is now in editing state to place your first hotspot: as you move your cursor around the page, you'll notice it highlights elements you hover over with a blue outline
- Place your first hotspot on the element you're pointing to: get as specific as you can, though you can always re-position this later
- To add another hotspot, click Add > Hotspot in the bottom of your editor bar
- Continue adding hotspots until your flow is complete: once it looks good, click Target & Publish to edit your targeting rules before publishing your flow
You can edit hotspots per-step, or make adjustments that affect your entire hotspot flow.
To access your individual hotspot settings, click the cog icon next to the number of the step you'd like to work on.
To reposition hotspots, select Reposition at the top right corner of the step settings. Your cursor will again start outlining the elements you can place your hotspot on.
If you notice the selector in your step settings is too general (or your hotspot throws an error/does not show up when published), you can enter more specific selector in the Selector field. Adjust where you'd like the beacon to appear accordingly by changing the numbers under Distance from left/top edge.
Tooltip arrow position
This controls where your text box will appear from in relation to the hotspot beacon. By default your arrow is set for the optimal position (based on the browser size and where the element sits on the page), but you can select for your text to appear from other corners, the top, or the bottom of your beacon.
To delete a hotspot, click on the trash icon in the top of the step settings.
To access settings that will impact your entire hotspot flow, click on the paintbrush icon to the left of your hotspot group.
Beacons come in two styles: question-mark icons or circles.
Tip: You can create a theme with a pulsing beacon under your Styles page
Flows can be skippable or required for you end users.
Skippable hotspots include an option for users to Hide these tips. If you uncheck the Skippable box, the Hide these tips option will be removed and users will have to click through your entire flow before your hotspot beacons disappear.
You can apply any of the themes you create at your Styles page to your flow. Select a theme from the Theme dropdown and it will automatically apply its styling to every step in your flow.
Learn more about creating themes here.
Switch Preview Page
You can change the page you build or view your flow on by clicking the Switch Preview Page button. Once this button is clicked, you'll be able to navigate through your app normally. You can also use this button to open non-Appcues pop-ups or windows that you'd like to place hotspots on.
When you've found the page or elements you'd like to work on, select Display flow on this page from the bottom bar on your screen.