Hotspots are a flashing icon that appear 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, further specify the selected element, and change the preferences as you like. These options are listed in detail below.
Hotspot Settings & Design pannel
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 enable the text include option:
In this section you can edit the direction and placement of the Native Tooltip accurately.
This option is to determine whether you would like the hotspot to dismiss upon hover or click
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!