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

  1. Fire the Userpilot chrome extension builder and navigate to the page where you would like to create the Hotspot on.
  2. Click on "Start here" then select "Create Spotlight"

  3. You can name the Spotlight and choose your preferred theme

  4. After choosing your preferred theme, click on the "Add Spotlight" button and select 'Hotspots' 

5.You'll notice that a highlighted rectangle follows the cursor around the screen. Choose where you would like to have your Hotspot appear within your application.

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.

Settings options

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.

Design options

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!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.