Overview
Once you have downloaded the UserGuiding Chrome Extension, you're all ready to create your first Hotspot. In this article, we'll show you all the possibilities while creating them.
How to create a Hotspot
Find the Hotspots under the "Content" section in the left-hand menu.
Click on the Hotspots page, then click on create a new Hotspot Group.
Note: Since Hotspots placed on a specific page are held as groups, first you need to create a Hotspot Group, then you can make the singular hotspots.
Type in your Hotspot group name and the web page address into the opening window where you want to create your first hotspot group.
In the anticipation that soon you will have multiple Hotspot groups, the best practice is to have a well-thought-out naming strategy for easier searching and identification.
A group name based on the page can help. An example hotspot group will hold the hotspots we put on our website's main page.
Important: Each unique URL can contain only one hotspot group. If you target more than one hotspot group to a single page, they override the other. If you would like to learn more about targeting, you can check this article out.
The website will be opened in a new tab with the UserGuiding Chrome extension open, and you'll be asked to create your first Hotspot.
You can start with a template or choose to start from scratch as we did.
Let's assume you've just released new custom plans during a discount season but want to announce them subtly. And you decided to utilize a hotspot for this.
Let's highlight an area on the page written Pricing. Later, you'll re-adjust the Hotspot beacon's location.
Type the text onto the tooltip in the middle of the page. On this Hotspot, we embed a directory link to the text too.
Hotspot
Adjust the tooltip size on the step editor, save it, and preview the first draft of our Hotspot.
See the default beacon on the screen near the highlighted area; if we hover over it, the tooltip reveals its content. If we click on the bit with the link, it'll open as a new tab.
You can design the ways how your Hotspot functions. Again, we'll use the Chrome Extension for this.
Interaction
To set behavior for a Hotspot's appearance and disappearance, switch to the interaction tab.
In the below image, the Hotspot is shown when its beacon takes a click and hides when the cursor is moved away.
Beacon
If you switch to the beacon tab, first, you'll see beacon types as Info, Question, and Default.
Here, you can make it pulsing, change the size and color, adjust its location on the page, and do much more.
Preview your Hotspot and save it once you're satisfied with your work.
How to make a Hotspot visible (live)
If you are done creating a Hotspot, return to the Hotspots section on the UserGuiding panel and find the Hotspot group made.
Click on its name or gear icon and go to its settings page.
Here, make sure the correct container is chosen for your Hotspot Group.
Important: Container is the JS code that should be embedded on your web platform to integrate it with UserGuiding. The pages where you want to show onboarding content, such as Hotspots, must contain this code.
Finally, change the status to active, save, and click on green publish changes.
Publishing changes will make your Hotspots visible on your webpage. If you go to the page where you created your Hotspots and refresh it, you'll see them there.