Highlights - Tooltips/Hotspots

To initiate the creation of a Tooltips or Hotspots, navigate to the "Engagement" section "Highlights" and click on "Create Tooltip/Hotspot" or use the shortcut "Command + K" or "CTRL + K" and enter "Create Tooltip" or "Create Hotspot" to access the respective page.

Choose between Tooltip or Hotspot based on your needs. Pick a template and customize it according to your content and specific requirements.

You can include sections by clicking on the "+" symbol and choosing the desired type (text, header, button, video, image, embed) that you wish to add.

You have the option to add sections either at the bottom or on the right side.

You can include up to three sections in a row and any desired number of sections in a column.

Enhance the appearance of your Tooltip or Hotspot by applying styles through the Styles tab, and fine-tune its configuration in the Settings tab.

Within the Settings, you have the ability to control the audience and display location of your Tooltip or Hotspot by incorporating segments.

Moreover, you need to incorporate element data such as data-beacon-id, id, or classname+xpath for the specific element to which you intend to display the tooltip. Additionally, specify the path where the tooltip should be visible.

Once you've made all the necessary modifications, switch the status to "live" to apply the changes and make them visible to your users.

Click here to install the Beacon Editor extension and enable visual editor.

Utilize our chrome extension to create or modify Tooltips or Hotspots. Click on "Create New" or use shortcut "command + E" or "CTRL + E" and navigate to the Tooltips section, where you can view the list of your existing Tooltips and Hotspots. Use the "Create New" button to initiate the creation of a new Tooltip or Hotspot.

To preview existing tooltips or hotspots, navigate to the corresponding element page and click on the play icon.

When creating a new tooltip or hotspot, use the magic tool. Choose the magic tool, then click on the element where you wish to display the tooltip and customize it according to your needs.

The following illustrates the display of the tooltip for the chosen element.

The following illustrates the display of the hotspot for the chosen element.