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:

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

  2. Desktop - Shows the widget ONLY on desktop.

  3. 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 the screen. The behavior options include "Fixed," "Anchored," and "Floating".

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.

Each user/visitor can move the widget without the position affecting any other user/visitor.

  • The widget will always START in the bottom corner, and has memory based on each person interacting with it.

For Example:

If my widget is in the bottom corner, and I move it to the top corner, it will only be in the top corner for ME.


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 in the Widget Builder

  • Go back to your widget builder.

  • 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 widget should now open when you click this element.

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


Custom Trigger ID in Website or Funnel (CRM)

  • Open your CRM website or funnel builder and navigate to the page where you wish to implement the 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").

Custom Trigger ID in Elementor (Wordpress)

Documentation Coming Soon

Last updated