How to Create & Edit Hotspots
This doc reviews the basic steps of building hotspots and best practices for placing 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, you can click the hotspot in the editor and it will unanchor itself and allow you to position it where you'd like. You can also go to the settings and click on "Placement" and then click "Place Hotspot".
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 then fine-tune the position of the hotspot by going to the settings of the tooltip and click on "Placement". You can then fine-tune numbers from the left or top of the page as well as the Z-index.
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 three dots and then click the trash can symbol.
To access settings that will impact your entire hotspot group, click on the cogwheel icon while selecting the hotspot group.
Beacons come in two styles: question-mark icons or circles.
Tip: You can create a theme with a pulsing beacon under your Themes page
Flows can be skippable or required for your 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 Navigation button on the top of your screen. 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 Design from the top bar on your screen.
To remove Hotspots or Tooltips from a flow:
- In the editing state of your flow, click on the gear icon of the specific hotspot/tooltip you'd like to delete
- Click on the trashcan icon to delete the hotspot/tooltip