Hotspots are flashing icons that appears on a selected element in your app until it's clicked or hovered on. This is a great option if you would like to subtly draw attention to a specific element in your app.
Creating a Hotspot
Adding a Hotspot to your application is a simple process
- Fire the Userpilot chrome extension builder and navigate to the page where you would like to create the Hotspot on.
- Click on "Start here" then select "Create Spotlight"
You can name the Spotlight and choose your preferred theme
After choosing your preferred theme, click on the "Add Spotlight" button and select 'Hotspots'
6. Using the settings & design side panel, you can fine-tune and adjust the placement, specify the selected element, and change the preferences as you like. These options are listed in detail below.
Hotspot Settings & Design panel
Once you have created your Hotspot, a settings panel will appear on the side of your screen that will allow you to easily customize options such as the placement, behavior, frequency, and design of the Hotspot.
Pro tip: Pre-define the look and feel of the Hotspot in the Theme settings of your Userpilot account.
The following sections appear under the Settings tab:
The element section includes the details of the selected element, the element you place the Hotspot on will automatically be detected by Userpilot, however, you can manually detect an element as well by enabling the 'Text include' option or specifying a unique CSS selector to avoid any element detection failures
This is how it will look when enabling the text include option:
In this section, you can edit the direction and placement of the Native Tooltip accurately.
Dismiss on: This option is to determine whether you would like the hotspot to dismiss upon hover or click
We have added two options in the display section for anchoring the step to the desired element:
Once you've created and edited your Hotspot, you can select the frequency of the Native Tooltip in the 'Frequency' tab.You will find two options:
- Once - This will trigger the Hotspot one time only and it will be dismissed once the user interacts with it.
- Every time - The Hotspot will always appear in your web app.
The following sections appear under the Design tab, where you can edit the width, color, and animation type of the Hotspot.
Ready to publish your Hotspot? Head over here!