Through this article, you will read about hotspots and learn how to create them with the Chrome Extension of UserGuiding.
What are Hotspots?
Hotspots are static onboarding contents that can exhibit near at hand information
about any item of your product.
You can think of a hotspot as an asynchronous, hidden box that can be placed on several locations on a page, presenting its informative content on demand without causing a crowd on your interface.
How to create Hotspots?
- Here, find the Hotspots under the “Content” section in the left-hand menu.
- Click and go to the hotspots page, then click on create a new Hotspot Group.
Important: Since hotspots placed on a specific page are held as groups, first you need to create a Hotspot Group, then you can create the singular hotspots.
- Into the opening window, type in your webpage address, where you want to create your first hotspot group.
Important: Each unique URL can contain only one hotspot group. If you target more than one hotspot group to a single page, one of them overrides the other.
To learn more about targeting, check this article out.
- The website will be opened in a new tab with the UserGuiding Chrome extension.
- First, name the hotspot group and then, select a theme for it, then click on Create.
In the anticipation of 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.
- Add the first hotspot via Click here or +Hotspots
- 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 in a subtle manner. 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 in the text onto the tooltip in the middle of the page. On this hotspot we embed a directory link to the text too.
- 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 the beacon, the tooltip reveals its content. If we click onto the bit with the link, it'll open as a new tab.
- You can design the ways how your hotspot functions. We’ll use the chrome extension for this.
- To set a behavior for a hotspot’s appearance and disappearance, switch to the appearance tab.
- In the below image, the hotspot is set to be shown when its beacon takes a click and hides when the cursor is moved away.
- 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 many more.
- Once you're satisfied with your work, preview your hotspot and SAVE it.
How to show a Hotspot (Live) ?
- After creating a hotspot the extension, come back to the UserGuiding panel and refresh the page, find the hotspot group you've just created.
- Click on its name, see the hotspot you want to release and go to its settings page.
- Here, as you do with the guides, first select a container code for it.
Important: Container is the JS code that should be embedded on your web platform to integrate it with UserGuiding. The pages in which you want to show onboarding contents, 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 hotspot visible on your webpage.
- If you go to the page of the hotspot group and refresh it, you’ll see the hotspot you put there.