How to create Tooltips/Hotspot?
Tooltips/Hotspot
Tooltips and Hotspots are design elements that can be created using the options provided by Beacon to enhance product tour flows. These are customizable templates that are designed specifically for use within the product tour creation process.
Once created and marked as “Public/Live” in Beacon, these templates become available for inclusion in product tour flows, where they serve different purposes:
Key Features:
Tooltips:
Provide straightforward tips or guidance to users during the tour.
These are static in appearance and designed to deliver clear, concise information.
Hotspots:
Include interactive animations like "ripple" or "sonar" effects to attract attention to specific elements.
Ideal for highlighting key features or areas in an engaging way.
By designing and customizing these templates, you can create product tour flows tailored to your application's needs, making the user experience more intuitive and impactful.
Using Beacon Editor
Steps to initiate “Create Tooltips/Hotspots” Ensure the latest Beacon extension is installed and that the Beacon Bar & Visual Editor are enabled.
Note: Enabling this will activate the Beacon-related features on your Website/application.
Navigate to the “footer section” of the page to locate the Beacon Visual Editor as shown in the above image.
In the footer section we can navigate to creation of flows page in two ways. To create a “Create Tooltips/Hotspots", The first way is to select the “choose existing” button in the footer section which will open a pop-up window, and in that pop-up window choose “Tooltips”. This will open an editor which consists of existing Tooltips list as well as options for creating new ones.
Note: Do not modify the “Dropdown” on the editor page, as it is set to “Tooltips” by default. If changed, it will navigate to different feature lists within the same pop-up window based on the selection.
An alternative way to access the flows page is through the footer section, where you will find the “Create” button. Clicking on it will open a popup window. From there, select “Tooltips” to navigate to the editor flows page. In this section, you will be prompted to choose whether you want to create “Tooltips,” “Hotspots,” or proceed with an existing design or can opt for “Create from scratch ” , as per our preference. Refer the video below,
Tooltip Template Design options: We can use the default pre-configured design template and edit on it or can create a design template for tooltips of our choice by using options as
Text Block: To insert content or text.
Header Block: To add header content or text.
Button Block: To include buttons.
Image Block: To insert images.
Video Block: To embed videos.
Embed Block: To include website content or specific URLs.
HTML Block: To write custom HTML code for a specific block and design the modal accordingly.
As per the below image section 1 : Editor section and section 2 : Footer section,
Section 1 :- Beacon Editor section
on the section 1 : Editor section options are as follows 1. While initiating the system will prompt the user to select any element in the application, in order to Visualise the UI design of the tooltip. Or we can reselect it with the help option “Reselect Element” as shown in the below image. After selecting, AI will Auto suggest the title and description for the element we have selected.
2. Save As template : Toggle Button , if enabled then the current template design will be saved as template for Product tour flows. This will suggest while creating PT flows.
3. Make Default for Auto Product Tours : Toggle Button , if enabled then the current template design will be considered or saved as default design for the Product tour flows.
4. Under Styles Tab
If the “Type” is set to “Hotspots” this additional option under Styles > Animated is available, including radio buttons for “Ripple” and “sonar” animations .( Option is Only for Type = Hotspots).
Offset Distance : X-axis and y- axis , can be set to option tooltip as per our choice.
The options in Styles > Placement allow users to set the tooltip position on the screen.( Option is for BOTH type)
Styles > Dismiss (Close button) provides options for positioning the “Close” icon.( Option is for BOTH type)
Styles > Padding allows users to configure the tooltip’s padding.( Option is for BOTH type)
Styles > Width & Height enables users to set the tooltips width and height.( Option is for BOTH type)
Styles > Box includes:( Option is for BOTH type)
Radio buttons for:
Color: Sets the background color of the tooltip.
Image: Allows users to add a background image.
Options for setting the border radius of the entire tooltip.
8. Styles > Overlay provides options for adding an overlay to the tooltip. When the ‘Toggle’ button is enabled, only the tooltip is visible, preventing interactions outside of it.( Option is for BOTH type)
9. Styles > Stroke allows users to set the modal’s border stroke.( Option is for BOTH type)
Note : Both type refers to “Tooltips” and “Hotspots”
Under Settings Tab( Options are common for BOTH type)
Settings > Who specifies the audience for the tooltip/Hotspots:
“Everyone” radio button: Enables the tooltip/Hotspots for all users of the application.
“Segment” radio button: Restricts the tooltip/Hotspots to specific users or user groups based on defined “Segment” rules within Beacon.
2. Settings > Where determines where the tooltip/Hotspots is shown:
“Everywhere” radio button: Displays the tooltip/Hotspots on any page within the application.
“Segment” radio button: Restricts the tooltip/Hotspots to specific pages or URLs based on defined “Segment” rules.
3. Settings > When offers options for display timing: The section provides the following configurable options:
Trigger Type:
On-click: The flow or action is triggered when the user clicks on the specified element.
On-hover: The flow or action is triggered when the user hovers over the specified element.
These triggers are selectable from a dropdown menu, allowing you to tailor the flow behavior based on user interaction.
Selector Options: These options define how the target element is identified within the application. They include:
Selector Type: Allows you to specify the method for identifying the element (e.g., class name, XPath, etc.).
Class Name: Automatically captures the class name of the selected element.
XPath: Retrieves the exact XPath of the element for precise targeting.
Text: Uses the visible text content of the element to identify it.
These options are auto-filled when using the "Reselect Element" functionality mentioned earlier. The system automatically captures these details, reducing manual effort and errors.
Path Type:
After defining the selector options, you can choose between two path types based on your application requirements:
Static Path: Use this option if the element's location or structure remains constant across the application.
Dynamic Path: Select this if the element's position or structure changes dynamically, ensuring the flow remains functional under varying conditions.
And the remaining options are for that element which we want to choose.
Section 2 : Beacon Editor
In Section 2, the main “Beacon Editor” provides options such as “Preview,” “Save,” and “Publish” after initiating the “Create tooltip/Hotspots” process.
Preview: Allows users to view their work within the same screen. To close the preview, hover over the top (header section) and click the “Close” button.
Save: Saves any changes made.
Publish: Deploys the tooltip/Hotspots with the configured settings.
Using Beacon Dashboard
Steps to Initiate “Create Tooltips/Hotspots”
Verify Access Permissions Ensure you are an admin or a user with access to the Beacon Dashboard for your application. Note: If you lack access, request the admin to add you as a member by navigating to:Beacon Dashboard > Settings > Team > Add Member.
Navigate to the “Tooltip/Hotspots” Section
Go to Engagements > Highlights > Tooltips/Hotspots.
This will take you to the “Tooltips/Hotspots List” page.
Click on the “Create Tooltip/Hotspots” button to open the side pop-up page.
Settings that can be done through the Dashboard Changes that can be made for Tooltips/Hotspots through the dashboard are listed below. NOTE : We Always Recommand to create the product tours or Engagement/DAP (Digital Adaption Platform) related features from the “Beacon Editor”.
Let divide the thing into sections, as below image
Section 1 :-Editor section
on the section 1 : Editor section options are as follows 1. While initiating the system will prompt the user to select any element in the application, in order to Visualise the UI design of the tooltip. Here we need to manually add elements related info under the ‘When’ section. 2. Save As template : Toggle Button , if enabled then the current template design will be saved as template for Product tour flows. This will suggest while creating PT flows.
3. Make Default for Auto Product Tours : Toggle Button , if enabled then the current template design will be considered or saved as default design for the Product tour flows.
Under Styles Tab
4. If the “Type” is set to “Hotspots” this additional option under Styles > Animated is available, including radio buttons for “Ripple” and “sonar” animations .( Option is Only for Type = Hotspots).
5. Offset Distance : X-axis and y- axis , can be set to option tooltip as per our choice.
6. The options in Styles > Placement allow users to set the modal’s position on the screen.( Option is for BOTH type)
7. Styles > Dismiss (Close button) provides options for positioning the “Close” icon.( Option is for BOTH type)
8. Styles > Padding allows users to configure the modal’s padding.( Option is for BOTH type)
9. Styles > Width & Height enables users to set the modal’s width and height.( Option is for BOTH type)
Styles > Box includes:( Option is for BOTH type)
Radio buttons for:
Color: Sets the background color of the modal.
Image: Allows users to add a background image.
Options for setting the border radius of the entire modal.
11. Styles > Overlay provides options for adding an overlay to the modal. When the ‘Toggle’ button is enabled, only the modal is visible, preventing interactions outside of it.( Option is for BOTH type)
12. Styles > Stroke allows users to set the modal’s border stroke.( Option is for BOTH type)
Note : Both type refers to “Tooltips” and “Hotspots”
Under Settings Tab( Options are common for BOTH type)
1. Settings > Who specifies the audience for the tooltip/Hotspots:
“Everyone” radio button: Enables the tooltip/Hotspots for all users of the application.
“Segment” radio button: Restricts the tooltip/Hotspots to specific users or user groups based on defined “Segment” rules within Beacon.
2. Settings > Where determines where the tooltip/Hotspots is shown:
“Everywhere” radio button: Displays the tooltip/Hotspots on any page within the application.
“Segment” radio button: Restricts the tooltip/Hotspots to specific pages or URLs based on defined “Segment” rules.
3. Settings > When offers options for display timing: The section provides the following configurable options:
Trigger Type:
On-click: The flow or action is triggered when the user clicks on the specified element.
On-hover: The flow or action is triggered when the user hovers over the specified element.
These triggers are selectable from a dropdown menu, allowing you to tailor the flow behavior based on user interaction.
Selector Options: ( Manually should be add ) These options define how the target element is identified within the application. They include:
Selector Type: Allows you to specify the method for identifying the element (e.g., class name, XPath, etc.).
Class Name: Automatically captures the class name of the selected element.
XPath: Retrieves the exact XPath of the element for precise targeting.
Text: Uses the visible text content of the element to identify it.
Path Type:
After defining the selector options, you can choose between two path types based on your application requirements:
Static Path: Use this option if the element's location or structure remains constant across the application.
Dynamic Path: Select this if the element's position or structure changes dynamically, ensuring the flow remains functional under varying conditions.
And the remaining options are for that element which we want to choose.
Section 2 :- Main Navigation Bar
The "Main Navigation Bar" in Section 1 includes the following options: Save, Menu, and a Status dropdown button.
Save: Use this button to save any changes you have made.
Status Dropdown: This menu allows you to set the visibility of your content with the following options:
Public: Live for everyone as per behaviour settings.
Private: Can be invoked only through chrome extension
Unlive: To remove from public
Draft: To save your work in progress
4. Menu: it has the option to Duplicate & Delete buttons. ( This appears after the “Creation”)
Duplicate : will duplicate it.
Delete : will delete with conformation.
Note: If you have any questions, please don't hesitate to reach out to us at Support@beacon.li
Last updated
