Main Settings

In the main widget settings section you will have the ability to update your widget name, enable/disable your widget, change the visibility, position behavior and placement, as well as add a custom trigger.

Widget Name

You can edit and manage your Widget Name by typing in the Widget Name field. Name your widget according to your use case to make it easy to identify.

Enable/Disable Widget

You can easily enable or disable your widget by toggling it on or off. This will reflect in the preview screen on the right hand side of the screen.

Widget Visibility

You can change your widget visibility by selecting from the dropdown menu. You have the following options:

  • Everywhere - Shows the widget on both desktop and mobile.

  • Desktop - Shows the widget ONLY on desktop.

  • Mobile - Shows the widget ONLY on mobile.

Widget Position Behavior

You can choose the behavior with which the Widget Floating Action Button is to be positioned on your website.

  • Fixed - Stays at the bottom of the website.

  • Anchored - Stays on one side of the website, allows users to move widget up and down.

  • Floating - Allows users to move the widget freely around the website.

In this guide, we'll show you how to configure the widget position behavior in your Engagement Widget™. The feature allows you to set your widget as either "Fixed," "Anchored," or "Floating" on your website or funnel page.

Widget Placement

Choose which side of the page the button should appear on your website

  • Left - Shows widget on the left side of your website.

  • Right - Shows widget on the right side of your website.

Use Custom Trigger

The Custom Trigger allows you to use a custom element to open/close the Widget. When toggled on, you will see a field appear to type in the Custom Trigger ID.

Enable Custom Trigger

  • Locate the option that says "Use a Custom Trigger" and toggle it on.

  • Upon doing so, a field labeled "Custom Trigger ID" will appear below the toggle.

Specify Custom Trigger ID

  • After enabling custom triggers, you'll see a field for "custom trigger ID."

  • Input the ID of the HTML element you want to serve as your custom trigger for the widget.

Show of Hide Floating Action Button (FAB)

  • Below the "Custom Trigger ID" field, you'll find another toggle for the Floating Action Button.

  • Toggle this on if you want a floating action button to appear on your webpage. Toggle off if you want the widget to be triggered only by the custom element you will define in the next steps.

Paste Custom Trigger ID into ChatHQ Portal

  • Go back to your ChatHQ portal.

  • Paste the copied CSS selector code into the "Custom Trigger ID" field.

  • Remove the hashtag '#' from the pasted code if it's already pre-filled in the portal.

Test the Custom Trigger

  • Return to your funnel page to test the custom trigger.

  • Click on the element you chose as your custom trigger (e.g., the "Open Widget" button).

  • The Engagement Widget™ should now open when you click this element.

  • If you toggled off the floating action button, it should not appear on the webpage.

How To Find Custom Trigger ID in a HighLevel Funnel or Website

  • Open your HighLevel website or funnel builder and navigate to the page where you wish to implement the Engagement Widget™.

  • Choose the page element (e.g., a button) that you want to act as your custom trigger.

  • With the element selected, go to its settings, usually found on the right-hand side of the funnel builder interface.

  • Navigate to the "Advanced" settings and scroll down to find the "CSS Selector" field.

  • Copy the code that represents your chosen element (this will be your "Custom Trigger ID").

How To Find Custom Trigger ID in Elementor (Wordpress)

Documentation Coming Soon

Last updated