Hotspots

Overview

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.
Click on "Start here" then select "Create a 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'
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.
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.

Settings options

The following sections appear under the Settings tab:

Element

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 contains' option or specifying a unique CSS selector to avoid any element detection failures

This is how it will look when enabling the text contains option:

Placement

In this section, you can edit the direction and placement of the Native Tooltip accurately.

Behavior

Dismiss on: This option is to determine whether you would like the hotspot to dismiss upon hover or click

Embedding:

We have added two options in the Display section for anchoring the step to the desired element:

Overlay

We've adopted the Overlayed embedding. In this selection, Spotlights are positioned directly above the app which calculates the correct position periodically to ensure the correct position is maintained as the user scrolls the page or hides or expands different elements on the page.

The primary goal of this approach is that the position is fixed. However, it has the drawback of not being embedded, which causes positioning issues on different screens and causes the behavior to be faulty in some cases - for example, dragging and dropping an element with a Native Tooltip or hotspot attached to it. Therefore, we have added the inline option for such cases.

Inline

Inline Embedding is another option. Inline spotlights will be inserted into the app's HTML before or after the selected element. More specifically, the spotlight will be positioned according to the layout set by the page, not as strictly as the overlayed approach.

In this option, the Spotlight will scroll smoothly across the page without periodic repositioning, making it feel more native to the app. Another advantage is that it will be responsive on a variety of devices. Because the Spotlight positioning is bound to the app layout, the user will have no control over it.

Frequency

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.
Everytime - 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!