# Important

Here you can find all the documentation about ChatHQ products and services!

Welcome to the ChatHQ Help Center! Here you will find EVERYTHING you need to be successful with ChatHQ! Below you will see a few different options to get started asap!

## Understanding The ChatHQ Portal

We recommend watching the videos and reading the articles in "Understanding ChatHQ" before moving on to building your first widget so that you have a full understanding of the way our application works, and how it can best serve you!

{% content-ref url="/pages/ZGGGuE6BGwDDP2Nq88Zj" %}
[Learning The Portal](/learning-the-portal/overview)
{% endcontent-ref %}

## Build Your 1st Engagement Widget™

Once you are ready, start building your 1st Widget! Learn everything you need to know about ChatHQ Engagement Widgets™ so you can get started as fast as possible!

{% content-ref url="/pages/3zpWr4RweXcF1IhfS6kL" %}
[Engagement Widgets™](/engagement-widgets/overview)
{% endcontent-ref %}

## Need Help? Reach Out To Support!

If you are in need of customer support, we recommend watching the videos here to learn how to get in touch with the ChatHQ team about your support inquiry.

{% content-ref url="/pages/XTCnDvn4h4lwCZdmX4kC" %}
[Customer Support](/customer-support/support-options)
{% endcontent-ref %}


# Ideas, Roadmap, & Announcements

{% embed url="<https://youtu.be/cKd8gIu8GUM>" fullWidth="false" %}

## Submit New Product Ideas

* Click on "**Ideas**."
* A pop-up will appear on the right-hand side.
* Scroll through the submitted ideas.
* To upvote an idea, click on the upvote option.
* To comment, click on the comment option.

### Filter Ideas

* Click on the **filter** button.
* Choose from "under consideration," "up next," "in progress," or "finished."

### Sort Ideas

* Use the **dropdown** menu.
* Choose from "trending," "latest ideas," "most votes," or "least votes."

### Submit Your Idea

* Click "**add an idea**."
* Type in a summary, explain its utility, who would benefit, and how it should work.
* Optionally, attach images and select up to three topics.
* Click "**submit** **idea**."

***

## Follow Product Roadmap

* Click on "**Roadmap**."
* Four categories will be visible: "under consideration," "up next," "in progress," and "finished."
* Click on any of these to view details.
* To comment, click on the comment option and type your comment. You can also attach images.

***

## View Recent Announcements

* Click on "**Announcements**."
* Scroll through to view all announcements.
* Click on any announcement to read more details.
* To like an announcement, click on the like option.
* Choose an emoji reaction: “like”, "heart eyes" or "fire."


# ChatHQ Affiliate Program

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FQMVZuDe3MAYU3ry4fJnM%2FXnip2024-03-08_18-06-24.jpg?alt=media&amp;token=a6ed357e-ac5c-4a46-ab55-81a737d95fde" alt=""><figcaption></figcaption></figure>

ChatHQ offers an amazing affiliate program to every single customer who creates a ChatHQ Portal account!

{% hint style="success" %} <mark style="color:red;">**As a ChatHQ Affiliate, you will earn 40% MRR for LIFE on all ChatHQ products sold using your affiliate link!**</mark>
{% endhint %}

**To access the affiliates section and sign up:**

1. Navigate to the Affiliates Page from the sidebar.
2. Follow the on-screen instructions to create your affiliate account.

Mastering the ChatHQ portal is essential for maximizing your productivity and fully leveraging the resources, features, and opportunities it offers. Whether you're an account owner, or simply a member of an account, this guide serves as a roadmap to navigate the platform's complexities with ease.


# White Label Resources

{% @arcade/embed flowId="mQq6lKVVsm1nGAvtVkfw" url="<https://app.arcade.software/share/mQq6lKVVsm1nGAvtVkfw>" %}

ChatHQ offers white label resources in the form of email templates, paid ad templates, and more! These resources are designed to help you sell ChatHQ under your own brand to your niche so you can success in building your very own SaaS company!

**How to access the white label resources page:**

1. Click on the **Resources** Page.
2. There will be a link to a shared Google Drive folder containing the white label  resources that may include:
   * Sales Email Templates
   * Paid Ad Templates
   * Social Media Posts
   * Sales Funnel Outline

***

## Unbranded Knowledge Base

**Link to the unbranded knowledge base:** <https://widgets.yourhelpcenter.net/>

If you have installed the White Label Widget Builder in your HighLevel account, you can give your customers access to this knowledge base to teach them everything they need to know about setting up widget!

{% hint style="warning" %}
**There is NO mention of ChatHQ or HighLevel in this knowledge base.**

If you see any mention of ChatHQ, HighLevel, or any other brand, please take a screenshot and send an email to <support@chathq.io> with the name of the page where it was found.
{% endhint %}

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Fdqs7YRgjpsR2UrT8b7Cf%2FXnip2024-03-08_18-04-11.jpg?alt=media&amp;token=a41985ec-1f49-4ba9-a830-6b2f24bab5ee" alt=""><figcaption></figcaption></figure>


# Overview

Welcome to our comprehensive guide on navigating the ChatHQ portal. We'll walk you through the home screen layout, explain how to manage and switch between accounts, and dive into specialized sections like the affiliates section, partners section, and white label resources section.

{% embed url="<https://www.loom.com/share/3516ba8df2f8452cad0024a53163984e?sid=99273c5d-1cc3-45e4-8d43-7b464a764a51>" fullWidth="false" %}

## Account Selection

Once you log into ChatHQ, you'll land on the home screen. At the top, you'll find the Accounts Tab.

The main account list will show you all ChatHQ Portal accounts you are a part of in any capacity, whether you are the owner of the account, a member, or any other role. You will have the ability to access accounts you're a part of from this table.

On the top left, you'll notice a dropdown menu that also lets you quickly navigate to different accounts. Simply click on the dropdown menu and choose the account you want to navigate to.

***

## Partners

Within the Partners section, you will find other companies that have partnered with ChatHQ, and you will have options to contact them for products/services, or simply visit their website by using the link in their partner profile!

**To explore our strategic business partners:**

1. From the sidebar, click on Partners Page.
2. Browse through our list of business partners and find offerings that may suit your needs.


# Profile Settings

## Preferences

In the ChatHQ Portal, the term "User Preferences" refers to a set of customizable settings that apply globally across all your accounts within the application. This means that changing these settings will affect the entire user interface and experience.

{% embed url="<https://www.loom.com/share/115dd2cf80234e4b8ad121db51e00aaa?sid=837ae18b-7fa7-4a7b-9c4f-99e2fc4aea36>" fullWidth="false" %}

### Navigating to the User Preferences Page

1. **Locate the User Icon:** Look for the user icon at the top-right corner of your application's homepage.
2. **Access Preferences:** Click on the user icon. A dropdown menu will appear.
3. **Go to Preferences Page:** In the dropdown menu, click on the "Preferences" button to navigate to the User Preferences page.

### Available User Preference Settings

There are two key settings you can change in the User Preferences:

* **Language:** Changing the language setting will translate all the text within the application to your selected language.
* **Theme:** Adjusting the theme will change the overall look and feel of the application.

### Change Language

1. Navigate to the "Language" section on the User Preferences page.
2. Choose your desired language from the available options.
3. The change will be applied immediately across the entire application.

### Change Theme

1. Navigate to the "Theme" section on the User Preferences page.
2. Select your desired theme.
3. The new theme will be applied instantly across the application.

User preferences serve as a simple yet powerful way to make your ChatHQ experience more personalized, consistent, and accessible, while also potentially increasing your efficiency and comfort. By taking a few moments to adjust these settings, you can significantly enhance your interaction with the application.

***

## Security

In this section we will show you how to link your Google email accounts to your ChatHQ portal account. This straightforward process not only simplifies your login experience but also adds an additional layer of security.

{% embed url="<https://www.loom.com/share/1a28d8b52f9343b5ad931077c7d8f114?sid=2121a8a3-0a90-4c8c-a9f8-0d77256cf20c>" fullWidth="false" %}

{% hint style="warning" %}
You can only link a single Google account to your ChatHQ Portal account, so if you created your account already with our "Continue With Google" option, you cannot link another Google account.

**The following information is only relevant to users who created a ChatHQ Portal account with EMAIL and PASSWORD.**
{% endhint %}

### Access Security Settings

1. Login to your ChatHQ portal account.
2. Click on your profile photo icon usually located at the top-right corner of the screen.
3. Select Preferences from the dropdown menu.
4. You will be directed to a new page. Click on the Security tab to proceed.

### OAuth Registration and Login

ChatHQ Portal offers OAuth to manage users when registering and logging in. This means you can login to a single ChatHQ account with email or with Google!

{% hint style="warning" %}
*To avoid getting locked out of your ChatHQ Portal account, connect Google to your ChatHQ Portal account so you have multiple options to login to the same account!*
{% endhint %}

### Linking Google Account

* Locate the Google section.
* Click the Connect button next to it.
* A pop-up window will appear asking you to sign in to a Google account.
* Enter your Google credentials to link the account to your ChatHQ portal.

Linking your social media accounts to your ChatHQ portal account enhances both the convenience and the security of your user experience. By integrating platforms like Google, Microsoft, Facebook, and LinkedIn, you streamline the login process, allowing for quicker and more efficient access to your account.


# Your Account

{% embed url="<https://www.loom.com/share/426209cee5ff4101961092cf5c193a6a?sid=5d734504-65b8-4dad-a9fd-52acc733314d>" fullWidth="false" %}

## Selecting an Account

Open the ChatHQ portal and log into your account. Once logged in, you can use the account table or the account selector on the left-hand side of your screen to navigate to your account.

## Dashboard

The dashboard is currently not populated with much information, but future additions such as widget analytics will likely be added.

## Engagement

**Once in the Engagement section, you will see multiple options:**

* [**Widget Settings:**](/engagement-widgets/widget-settings)&#x20;
* [**Conversion Tools:**](broken://pages/RLckn8JSjBt9JFhg17as)&#x20;
* [**Smart Popups:**](broken://pages/mU5lauxfMVqnjTRNBbV0)&#x20;
* [**Analytics:**](broken://pages/fb9i05jZ0KW364lz0I95)&#x20;

## Knowledge Bases

## Conversations

## Account Settings

Find and click on the **"Settings"** tab on the left-hand navigation bar.

**Once in Settings, you will see multiple options:**

* [**Account:**](broken://pages/BS7y2dBikQKE1tDcQAVv) Here, you can view and copy your Account ID and even change your account name.
* [**Billing:**](/learning-the-portal/billing-management) This section displays your billing information, including subscriptions and payment methods.
* [**Plans:**](broken://pages/GvQ96jGvWMSwaQmu34tp) In this section you can upgrade or downgrade your portal subscription.
* [**Team:**](broken://pages/QccMsg8nAufAE4UyBri9) Manage your team members here.
* [**Integrations:**](/integrations/overview) This is where you configure various integrations with other services.


# Engagement

In the following article, we'll walk you through the basics of the Engagement section within the ChatHQ portal.

{% embed url="<https://www.loom.com/share/ce472d18aadd415280a2fa369c11be5b?sid=61d70526-4863-403c-afeb-745cd760f37c>" fullWidth="false" %}

### Accessing the Engagement Section

* Log in to your ChatHQ portal and navigate to the "Engagement Widget™ Section."
* By default, you'll find a widget already present in the section.
* This default widget will be disabled initially.

### Enabling Your Widgets

* Click to enable the default widget.
* Save the settings to view a preview of what the widget will look like.

### Customizing Your Widget

* Navigate to "Widget Settings."
* Here, you can customize various aspects of the widget:
  * Its appearance
  * Location on your webpage
  * Custom branding options, and more

### Installing Your Widget

* Look for the "Installation Script" section.
* Copy and paste the installation script where needed in your application or web page.
* If you encounter issues, refer to help articles specifically designed for various applications and web pages.

### Using Conversion Tools™

* Initially, no Conversion Tools™ will be visible in the widget preview.
* To add tools, click on "Add Tool" and select from a library of different tools.
* You'll need to configure each tool individually. Resources are available in the help center for guidance.

### Creating Smart Popups™

* You can build popups to highlight specific actions you'd like your visitors to take.
* These popups have several customizable options including:
  * Triggering settings
  * Visibility settings
  * Display settings
  * Media elements and more

{% hint style="info" %}
***Click one of the options below to learn more about each sub-section inside of the Engagement section!***
{% endhint %}

<table data-card-size="large" data-column-title-hidden data-view="cards"><thead><tr><th data-card-target data-type="content-ref"></th><th data-hidden></th><th data-hidden></th><th data-hidden></th></tr></thead><tbody><tr><td><a href="/engagement-widgets/widget-settings">Widget Settings</a></td><td></td><td></td><td></td></tr><tr><td><a href="/engagement-widgets/conversion-tools-tm">Conversion Tools™</a></td><td></td><td></td><td></td></tr><tr><td><a href="/engagement-widgets/smart-popups-tm">Smart Popups™</a></td><td></td><td></td><td></td></tr><tr><td><a href="/engagement-widgets/widget-analytics">Widget Analytics</a></td><td></td><td></td><td></td></tr></tbody></table>


# Knowledge Bases

{% hint style="warning" %}
Help Documentation Coming Soon!
{% endhint %}


# Conversations

{% hint style="warning" %}
Help Documentation Coming Soon!
{% endhint %}


# Account Settings

The "Account" section in your settings is where important account information is located such as your Account ID and Account Name. More data specific to your ChatHQ Portal account will be added here in the future as well.

## Account Details

* **Navigate to Settings:** Look for the '**Settings**' option on the left-hand sidebar menu.
* **Click on 'Account':** Under '**Settings**,' you will find an '**Account**' option. Click on it to access your account settings.

### Account ID

The first box in the Account section displays your Account ID. Each ChatHQ Portal account has a unique account ID. This ID is very important to have readily available, especially when speaking to our support team.

* **Copying Account ID:** Next to your Account ID, you'll see a '**Copy**' icon that looks like two overlapping sheets of paper. Click on this icon to copy your Account ID to your clipboard. You may need your Account ID for various functions within the ChatHQ portal.

### Account Name

Your account name can be edited. Your original account name is based on the "company name" field in the onboarding flow when setting up your ChatHQ account.

* **Editing Account Name:** To keep your account name up-to-date, especially if you are using this for business, you can edit the name in this field.

***

## Billing

The Billing section of your account settings gives you the ability to view your subscription details, manage payment methods, and view information regarding any additional subscriptions associated with your account.

1. On the left-hand side of the screen, locate and click on the **Settings** menu.
2. In the Settings menu, click on **Billing**.

{% hint style="info" %}
[Click here to learn more about Billing Management](/learning-the-portal/billing-management)
{% endhint %}

***

## Plans

1. Log in to your ChatHQ portal.
2. Navigate to the '**Settings**' menu.
3. Click on the '**Plans**' option.

### Choose Your Subscription Level

1. Review the features and costs for each plan listed.
2. Click the option under the plan you're interested in to either '**Upgrade**' or '**Downgrade**'.
3. Follow the on-screen instructions to complete the process.

{% hint style="warning" %}
**Note:** If you have any questions about your subscription please contact support
{% endhint %}

***

## Team

The following functionality is available in the Team section:

* View and manage team members, their emails, and role
* Invite new team members using direct invite or invite link
* Delete team members

{% embed url="<https://www.loom.com/share/6a4535c18ecd4f1fb7720545766bd3a6>" fullWidth="false" %}

### Inviting New Members

You have two options for inviting new members:

#### Invite by Email:

* Click on "I**nvite Members.**"
* Type in the email addresses of the people you wish to invite.
* Separate multiple email addresses by pressing space or adding a comma.

#### Create Invite Link:

* Click on "**Generate Link**" under the "**Invite** **Members**" option.
* This will create a link that expires after 24 hours.
* Click on "**Copy**" to copy the link and send it via email or messaging apps.

#### **Invalidating an Invite Link**

* If you wish to invalidate a previously generated link, click on "**Invalidate Link**."
* You can then generate a new link if needed.

### Remove Team Members

1. **Trash Can Icon:** Next to each team member's details, you'll see a trash can icon.
2. **Click to Remove Team Member:** Click on this icon to remove a member from your team.

***

## Integrations

<table data-card-size="large" data-column-title-hidden data-view="cards"><thead><tr><th data-card-target data-type="content-ref"></th><th></th><th data-hidden></th><th data-hidden></th><th data-hidden></th></tr></thead><tbody><tr><td></td><td><a href="/integrations/highlevel">HighLevel</a></td><td></td><td></td><td></td></tr><tr><td></td><td>ChatGPT</td><td></td><td></td><td></td></tr><tr><td></td><td><a href="/integrations/extendly">Extendly</a></td><td></td><td></td><td></td></tr><tr><td></td><td>Capri AI (coming soon)</td><td></td><td></td><td></td></tr><tr><td></td><td><a href="/engagement-widgets/conversion-tools-tm/conversion-tools-library/tawk.to-livechat">Tawk.To</a></td><td></td><td></td><td></td></tr><tr><td></td><td>Livechat (coming soon)</td><td></td><td></td><td></td></tr><tr><td></td><td>Calendly (coming soon)</td><td></td><td></td><td></td></tr><tr><td></td><td>Hubspot (coming soon)</td><td></td><td></td><td></td></tr></tbody></table>


# Billing Management

{% hint style="warning" %}
**Note:** If you have any questions about your subscription please contact support
{% endhint %}

{% embed url="<https://youtu.be/q0Kp1UYOknY>" fullWidth="false" %}

The Billing section of your account settings gives you the ability to view your subscription details, manage payment methods, and view information regarding any additional subscriptions associated with your account.

* On the left-hand side of the screen, locate and click on the **Settings** menu.
* In the Settings menu, click on **Billing**.

***

## Subscription Information

Once you're in the Billing section, you'll see several pieces of information:

* **Plan Type:** This shows the plan you're currently subscribed to (e.g., Agency Plan).
* **Status**: This indicates whether your plan is active or not.
* **Customer ID and Subscription ID:** These unique identifiers for your account are also displayed here.

Below your account details, you'll find information about your next invoice:

* **Next Invoice Date:** This shows when your next invoice will be sent out.
* **Invoice Amount**: This indicates how much the next invoice will be for.

### Additional Subscriptions

Scroll down to see any additional subscriptions that are active on your account.

### Subscription Details

To see more detailed information, click on the **Details** option. This will open up a separate ChatHQ payment portal where you can view:

* Payment information
* Billing information
* Invoice history
* Upgrade your ChatHQ Portal subscription

***

## Cancel Subscription

In order to cancel your ChatHQ subscription, you will need to navigate to **"SETTINGS -> BILLING"** and click the **"CANCEL"** button.

{% hint style="info" %}
You will be required to fill out a quick survey before cancelling
{% endhint %}

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FN8Tem4Lw0r3nB774msta%2FXnip2023-12-19_12-59-33.jpg?alt=media&amp;token=cb94fa52-daca-4a2d-ae38-255a000747b1" alt=""><figcaption></figcaption></figure>

***

## Manage Payment Methods

If you're looking to update or add new payment methods, change your billing information, or update your subscription plan in ChatHQ, follow the steps below.

1. Locate '**Payment Methods**' on the top right-hand corner of the billing section.
2. Click on '**Manage**' to open the ChatHQ payment portal.

Here, you'll have the option to update your subscription plan as well as your payment and billing information.

### Add/Update Payment Method

1. Click on '**Add Payment Method'**.
2. You'll be redirected to a new page where you'll need to enter your card details.
3. After entering the details, click on '**Add**' to save the new payment method.

### Update Billing Information

1. Click on '**Update Information**'.
2. Enter your updated details
3. Click on '**Save**' to update your billing information.


# Overview

{% @arcade/embed flowId="F4oToYSrZAGVn2A9k4Up" url="<https://app.arcade.software/share/F4oToYSrZAGVn2A9k4Up>" %}

## Widgets Per Subscription

But, when you purchase paid widget plans, you will have the option to add more widgets to your account. Currently, we offer four different plans:

* **Free Plan:**
  * One Engagement Widget™
* **Startup Plan:**
  * 3 Engagement Widgets™
* **Growth Plan:**
  * 10 Engagement Widgets™
* **Agency Plan:**
  * Unlimited Engagement Widgets™

{% hint style="info" %}
[To learn more about ChatHQ pricing options click here](https://docs.chathq.io/engagement-widgets/www.chathq.io/pricing)
{% endhint %}

***

## Adding New Widgets

{% embed url="<https://www.loom.com/share/7cefa71843c74cf89093a372fec5f38d?sid=992c94db-a14e-4896-b04a-bbf0c187b28f>" fullWidth="false" %}

* Click on the “+” icon next to the widget drop-down selector. When you hover over the button you will see a tooltip that reads "Add new widget"
* A new widget will be added with a default name with a 13-digit random number
  * **Example:** <mark style="color:blue;">Widget 1671661186558</mark>

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FXZlVQOabfNepeigJtVPh%2FXnip2023-01-16_15-18-46.png?alt=media&amp;token=16126dbf-0646-473e-a094-21e9df70a014" alt=""><figcaption></figcaption></figure>

### Selecting Widgets

When you are ready to start editing your widgets, you will need to select your widget from the list of purchased widgets. If you are on the free plan, you will only have 1 widget to choose from.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FTCGgYX5IvyfZAh8A8s5M%2FWidget%20List.gif?alt=media&amp;token=90902385-3283-4cd4-8204-40b971ffa04f" alt=""><figcaption></figcaption></figure>

### Renaming Widgets

* By default, the new widget will have a unique identifier (a mix of letters and numbers).&#x20;
* You can easily click on this identifier to rename the widget as per your preference.

### **Duplicating Widgets**

* If you've perfected a widget and wish to use it as a template for another page, use the "duplicate" feature.

***

## Deleting Widgets

{% hint style="danger" %}

#### **Deleting Widgets is Permanent**

Before proceeding with the widget deletion, it's crucial to note that deleting a widget is a permanent action. Once a widget is deleted, it cannot be restored. Ensure you want to remove the widget entirely from your account before proceeding with deletion.
{% endhint %}

{% embed url="<https://www.loom.com/share/788c8c2242134019b48241978a4a5621>" fullWidth="false" %}

#### How To Delete a Widget

* **Locate the Red 'Delete Widget' Button:** Scroll down your chatHQ portal account interface until you see a red button labeled '**Delete Widget'**.
* Click on '**Delete Widget**': After clicking this button, a new prompt will appear.
* **Confirm Widget Removal**: The prompt will display a 'Confirm Widget Removal' button, along with options for confirming or canceling the action. You will have the choice to select 'Yes, I want to delete it' or 'No, I do not want to delete this.'
  * **If you choose 'Yes'**: The widget will be permanently deleted.
  * **If you choose 'No':** The widget will remain in your account.

#### When Should I Delete a Widget?

While customization options are available through updating your conversion tools and targeted prompts, there might be specific scenarios where you should delete a widget. One such case is if someone unauthorized gains access to your installation code. Under such circumstances, deleting the widget is highly recommended.

***

## Widget Preview Window

As you edit and change your widgets, you will have a preview window showing all of your changes LIVE right when you change them! You will also have the capability to use the widget as you edit it to test out the features and functionality!

{% embed url="<https://youtu.be/hMIi2gGTVLM>" fullWidth="false" %}

#### Accessing the Preview Window

To begin, navigate to the "**Engagement**" section within your ChatHQ portal. From there, click on "**Conversion Tools™**" You'll be presented with a list of all the Conversion Tools™ you've created. On the right side of the screen, you'll find the Preview Window.

#### Previewing Conversion Tools™

The Preview Window provides a quick glimpse of all your different Conversion Tools™. To get a closer look at a specific tool, simply click on it to open the editing section. Here you will see what your Conversion Tools™ will look like once your tool is live. Importantly, any customizations you make on the left side of the screen will instantly appear in the Preview Window on the right.

### Main View and Tool View

Two primary views for your Conversion Tools™ are available: "**Main View**" and "**Tool View**".&#x20;

* #### Main View

  Clicking on "**Main View**" lets you see the list of all your Conversion Tools™. This is the view that visitors on your website will see when they open your Engagement Widget™.

* **Tool View**

  Switching to "**Tool View**” displays the specific tool you've selected for customization. This is the view that visitors to your website will see when they open the Conversion Tool™ in your Engagement Widget™.


# Installing Widgets

## HighLevel Agency Install

{% hint style="warning" %}
Once installed, your engagement widget will show up inside of every sub account (location) and the agency area.
{% endhint %}

{% embed url="<https://www.loom.com/share/1fcc4e77b24a49b1b328e3eda2e4f54a>" %}

***

## HighLevel Funnels & Websites Install

Adding an Engagement Widget™ can enhance your user experience by offering real-time chat support or interactive features.&#x20;

{% embed url="<https://youtu.be/OcblcafwCXk>" fullWidth="false" %}

#### 1. What You Need

* Access to your ChatHQ portal
* Access to your HighLevel funnel or website settings

#### 2. Select Widget in ChatHQ

* Log in to your ChatHQ portal.
* Navigate to the **Engagement** Section.
* Choose the widget you'd like to install on your funnel or website.
* Click on **Widget Settings**.
* Scroll down to the bottom of the settings page to locate the **Install** Section.

#### 3. Copy Installation Code

* Within the **Install** Section, you will find the **Installation** **Code**.
* Click the **Copy** button to copy this code.
* You'll see a pop-up that confirms the code has been copied to your clipboard.

#### 4. Go To HighLevel Funnel/Website Settings

* Open your high-level funnel or website where you wish to install the widget.
* Navigate to the **Settings** Section.

#### 5. Paste Installation Code

* Locate the **Body Tracking Code** section within **Settings**.
* Paste the copied installation code from ChatHQ into this section.

#### 6. Test Widget

* To confirm the widget has been installed, click on **Preview Page**. You should now see the ChatHQ Engagement Widget™ on your page.
* Click on the newly installed widget to ensure it's functioning as expected.

***

## Wordpress Install

{% hint style="warning" %}
CSS from Wordpress themes and plugins may negatively affect your ChatHQ Engagement Widget™. This is unpredictable and may need to be addressed on an individual basis.

If you are experiencing issues with the way the Engagement Widget™ looks or performs, and you are using Wordpress, **PLEASE** [submit a support ticket](broken://pages/WMUKprcZjtTespb0zXIG) so we can look into the issue for you!
{% endhint %}

{% embed url="<https://www.loom.com/share/24540e61debb4d3891b95c6e570cdf8e>" %}

***

## Google Tag Manager (GTM) Install

{% hint style="danger" %}
**VERY IMPORTANT:** In order to get your Engagement Widget™ to work when installed with Google Tag Manager, you must use the installation script template below. You will need to replace the **WIDGET ID** in the Javascript.
{% endhint %}

{% embed url="<https://www.loom.com/share/c7039924f7ce4bbc9cc782b2d59d8f84>" %}

<pre class="language-javascript" data-title="Engagement Widget Installation Script for GTM" data-overflow="wrap" data-line-numbers><code class="lang-javascript">&#x3C;script>
    (function () {
        var script = document.createElement('script');
        script.async = true;
        script.crossOrigin = 'anonymous';
        script.type = 'module';
        script.id = 'engagementWidget';
        script.src = 'https://cdn.chatwidgets.net/widget/livechat/bundle.js';
        script.setAttribute('data-env', 'portal-api');
        script.setAttribute('data-instance', '<a data-footnote-ref href="#user-content-fn-1">WIDGET_ID_GOES_HERE</a>');
        script.setAttribute('data-container', '#engagement-widget-container');
        document.body.appendChild(script);
    }());
&#x3C;/script>
</code></pre>

[^1]: **Make sure you add your widget ID here or your widget will not show**


# Widget Settings

Whether you're looking to rename your widget, adjust its visibility, or change its appearance, you can find everything here in Widget Settings.

{% embed url="<https://www.loom.com/share/5e94a9178f404cf5a0016a9d6c1b51b9?sid=1b735f81-a494-4445-a89e-082d016af13f>" fullWidth="false" %}

<table data-card-size="large" data-column-title-hidden data-view="cards"><thead><tr><th data-card-target data-type="content-ref"></th><th></th><th data-hidden></th><th data-hidden></th><th data-hidden></th></tr></thead><tbody><tr><td></td><td><a href="/engagement-widgets/widget-settings/main-settings">Main Settings</a></td><td></td><td></td><td></td></tr><tr><td></td><td><a href="/engagement-widgets/widget-settings/widget-window">Widget Window</a></td><td></td><td></td><td></td></tr><tr><td></td><td><a href="/engagement-widgets/widget-settings/office-hours">Office Hours</a></td><td></td><td></td><td></td></tr><tr><td></td><td><a href="/engagement-widgets/widget-settings/widget-branding">Widget Branding</a></td><td></td><td></td><td></td></tr></tbody></table>

<figure><img src="https://lh6.googleusercontent.com/GnXHzbWpRIFTTXhg6QM-UnnXpogfiQHW68TpI90YeM5w5JZ5pPru2QW1LG9lCvcgCKTet4SUCxDjpT-OWNBAabBng0OrSwkkLnhToS1N_EkcfOtOKPbJtlYW_hkcXKD_Er2V5KlHizE5vI2bxYklLm8" alt=""><figcaption></figcaption></figure>


# 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.&#x20;

{% embed url="<https://www.loom.com/share/5e94a9178f404cf5a0016a9d6c1b51b9?sid=1b735f81-a494-4445-a89e-082d016af13f>" fullWidth="false" %}

***

## 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.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FsHmbczffOAlX7f0kTnmi%2FXnip2023-01-16_17-24-29.png?alt=media&amp;token=8b5b3ada-92b6-4f68-983d-1729b54bbfc5" alt=""><figcaption></figcaption></figure>

***

## 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.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Fdn7iOHk986lNlKljUl86%2FEnable_Disable%20Widget.gif?alt=media&amp;token=4a403e62-0b01-4359-8ea7-b50479ea17c7" alt=""><figcaption></figcaption></figure>

***

## Widget Visibility

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

* **Everywhere**  - Shows the widget on both desktop and mobile.&#x20;
* **Desktop** - Shows the widget ONLY on desktop.
* **Mobile** - Shows the widget ONLY on mobile.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Fgri0AHATquPXd07ryJzI%2FXnip2023-01-16_17-24-55.png?alt=media&amp;token=f7655e32-3849-4a5c-ac22-0c8752a357f4" alt=""><figcaption></figcaption></figure>

***

## Widget Position Behavior

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

* **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.&#x20;

***

## Use Custom Trigger

{% embed url="<https://youtu.be/zaZCGaFIUpc>" fullWidth="false" %}

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.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F7aA1SWY55XsdB1nJ4xlK%2Fimage.png?alt=media&amp;token=e779b848-9692-4d4f-b961-2bfa8ec99789" alt=""><figcaption></figcaption></figure>

***

## 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)

{% hint style="warning" %}
Documentation Coming Soon
{% endhint %}


# Widget Window

{% embed url="<https://www.loom.com/share/5e0b3cf2c2b74c869e5d4ad5cad0239f>" %}

The Widget Window settings is where you can customize the look of your widget when it is opened. You will have the ability to add a title and subtitle to welcome visitors, select your primary and secondary colors to match your branding, and upload a logo image.

## Widget Title

Here you can update the title of your widget that will show to users when they open the widget.&#x20;

## Widget Subtitle

Here you can update the subtitle of your widget. This is shown under the title of your widget and gives users more intel about the widget.&#x20;

## Widget Colors

Choose a primary color for your widget by clicking on the color block and pasting in your color code or selecting a color from the color picker. This color will show at the top of your widget, in the background of each widget tool icon, and in the close widget button.&#x20;

## Widget Logo (Top Image)

Upload your business logo to show on your widget, or upload an image you’d like to use for your widget icon. This will show at the top of the widget when it is opened.&#x20;

## Floating Action Button Icon

You have two options when it comes to the action button icon. This icon is what users will see on your website based on your widget configuration.&#x20;

* **Use a default image** - Here you can select from a variety of icon options we have built in for your convenience.&#x20;
* **Use the widget logo** - This option will use the logo that you have previously uploaded.


# Office Hours

{% embed url="<https://www.loom.com/share/713daf803c51410997e192feff6dece6>" fullWidth="false" %}

{% hint style="warning" %}

* *Office hours **ONLY** set visibility for Conversion Tools™ and Targeted Prompts™.*
* *Office hours **DO NOT** control whether the widget is shown or hidden on your website.*
* *When office hours are set, you can adjust the "visibility settings" in Conversion Tools™ and Targeted Prompts™ while configuring each tool or prompt.*
  {% endhint %}

## Timezone

Choose a **timezone** from the dropdown menu based on your business time zone.&#x20;

## 12 or 24 Hour Time

Choose whether you’d like to use **12-Hour or 24-Hour** time by clicking on the corresponding option.&#x20;

## Configure Office Hours

To set your office hours, start by **selecting the days** you are available. Next, you will select the hours you are available each day. If you have the same availability every day, click on the **Apply All** button to apply your office hours to each day you have selected.&#x20;

## Add Break Times

If you would like to set a time you are not available on select days, click on the **Add Break Time** button. Here you can set select times that you would like to set as unavailable each day.&#x20;


# Widget Branding

{% hint style="warning" %} <mark style="color:red;">This is a</mark> <mark style="color:red;"></mark><mark style="color:red;">**PAID ACCOUNT**</mark> <mark style="color:red;"></mark><mark style="color:red;">feature</mark>

If you want to upgrade your ChatHQ Portal account, go to **Settings -> Billing** to upgrade your account.
{% endhint %}

{% embed url="<https://www.loom.com/share/a0b0a6cd0f854355bd7c52df36d62ad8>" fullWidth="false" %}

The Widget Branding settings allow you to hide ChatHQ branding and/or display your own business’ brand on the Engagement Widget. Here you can select to display your branding and upload your business logo.&#x20;

## Display Branding&#x20;

Here you can toggle on or off to display the branding section in the widget footer.&#x20;

## Use Custom Branding&#x20;

Use Custom Branding controls whether to use the default or custom brand section by toggling the bar on or off. When toggled on, you will then have the option to add a Full Brand Name and Brand URL.&#x20;

### Full Brand Name

Here you can add an optional short message that will be displayed as a tooltip when hovering the brand logo.

### Brand URL&#x20;

Here you can add an optional URL linking your brand to a website.

### Brand Logo Format

The Brand Logo Format determines the format of the brand logo to be used

* **Text Only** - Shows logo as text. You will be able to add the logo text in the field given when this option is selected.&#x20;
* **Use an Image** - Shows logo as an image. You will be able upload the logo image in the field given (as shown in the image below).
* **Use an Image URL** - Shows the logo as an image. You will be able to add the image using an image URL.&#x20;

<figure><img src="https://lh6.googleusercontent.com/8sjblb1nwI0p9O2lZSQpb8IdNi9jW62VTo7NuqY1j3WXNW_7hrq_OIahYYNpVi2bZkQ7l6EtqXiNzVM3HlOUoR8Qu60vmvTV0hboWcqj2L7-kIC-oocK7gRAq7pAKY22Rf4tjyi8VczzObe3BXJOylE" alt=""><figcaption></figcaption></figure>


# Conversion Tools™

## Exploring Conversion Tools™

First, head to the "**Engagement**" section of your dashboard. Once there, click on "**Conversion Tools**™." If you've already added some tools, you'll see them listed here.

{% embed url="<https://www.loom.com/share/de43ba048af844c1a2ea8d4de937da45?sid=087a30c7-4027-4e8b-9b1e-983e8c794fe7>" fullWidth="false" %}

## Add a New Conversion Tool™

To add a new tool, simply click on the "**Add Tool**" button.

## Basic Conversion Tool Settings

<table data-card-size="large" data-column-title-hidden data-view="cards"><thead><tr><th data-card-target data-type="content-ref"></th><th></th><th data-hidden></th><th data-hidden></th><th data-hidden></th></tr></thead><tbody><tr><td></td><td><a href="/engagement-widgets/conversion-tools-tm/add-reorder-and-delete-tools">Add, Reorder, and Delete Tools</a></td><td></td><td></td><td></td></tr><tr><td></td><td><a href="/engagement-widgets/conversion-tools-tm/single-vs-multi-tool-display">Single vs Multi-Tool Display</a></td><td></td><td></td><td></td></tr><tr><td></td><td><a href="/engagement-widgets/conversion-tools-tm/title-and-panel-title">Title &#x26; Panel Title</a></td><td></td><td></td><td></td></tr><tr><td></td><td><a href="/engagement-widgets/conversion-tools-tm/tool-visibility">Tool Visibility</a></td><td></td><td></td><td></td></tr><tr><td></td><td><a href="/engagement-widgets/conversion-tools-tm/tool-icons">Tool Icons</a></td><td></td><td></td><td></td></tr><tr><td></td><td><a href="/engagement-widgets/conversion-tools-tm/conversion-tools-library">Tool Library</a></td><td></td><td></td><td></td></tr></tbody></table>


# Add, Reorder, and Delete Tools

{% embed url="<https://youtu.be/RpxNPJ_oawU>" fullWidth="false" %}

Managing your Conversion Tools™ is now easier than ever, offering you complete flexibility in personalizing your toolkit. Whether you're looking to add new capabilities, reorder existing tools for optimal workflow, or remove tools you no longer need, this article provides a comprehensive guide to help you through the process.

## Adding New Tools

You can add new Conversion Tools™ by selecting the Add Tool button in the top right corner and selecting the conversion tool you would like to add. When you click on the button, a popup window will appear for you to select from a wide variety of Conversion Tools™ that you can add to your Engagement Widget™.&#x20;

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F4amS1PfbkPUnfUSGa6ri%2Fimage.png?alt=media&amp;token=b588cd2c-2ea6-4a09-819b-f1a0b728a715" alt=""><figcaption></figcaption></figure>

## Reordering Tools

To reorder your Conversion Tools™, simply click on the six dot icon on the left hand side of the conversion tool you would like to move, and slide it up or down. When reordering your Conversion Tools™, you will see them update in the preview window on the right side of the page.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FM2AtNHIMMPOPp5mJ0FLq%2Fimage.png?alt=media&amp;token=c02a5fbe-55fd-421d-8457-280620072beb" alt=""><figcaption></figcaption></figure>

## Deleting Tools

If you would like to delete a Conversion Tool, click on the trash can icon on the far right of the tool you would like to delete.

{% hint style="danger" %}
Note that once you delete a conversion tool, it cannot be recovered.
{% endhint %}

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Fmty9wiimOKo2BY8oRzhV%2Fimage.png?alt=media&amp;token=58f6c953-07bb-420e-8be9-7a6a605d8ce2" alt=""><figcaption></figcaption></figure>

### Confirm Tool Removal

When selecting a Conversion Tool to remove, you will see a confirmation message to delete your Conversion Tool.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FhHSTSWzYVKXE9OHxYjp6%2Fimage.png?alt=media&amp;token=bf818894-4980-4e26-b15a-503fd30869d2" alt=""><figcaption></figcaption></figure>


# Single vs Multi-Tool Display

{% embed url="<https://youtu.be/TK8-kWTNFA0>" fullWidth="false" %}

The appearance of your Conversion Tools™ within your Engagement Widget™ can vary between two formats, depending on the number of Widget Tools you've added: Single Tool Display or Multi-Tool Display. Depending on your specific setup and preferred configuration, your Conversion Tools™ will be presented in one of these two display options.

## Single Tool Display&#x20;

If you choose to include only one Conversion Tools™ in your Engagement Widget™, it will automatically be presented in a single tool display. Consequently, when a customer initiates the widget, the sole widget tool will open up automatically, as illustrated below.

## Multi-Tool Display&#x20;

When you incorporate several Conversion Tools™ (two or more), your Conversion Tools™ will automatically appear in a multi-tool layout. This arrangement provides users with the flexibility to select the specific Conversion Tools™ they wish to utilize, as depicted below.


# Title & Panel Title

{% embed url="<https://youtu.be/WDSd9p5_ijA?si=IbNXVgL_IrfDQGYW>" fullWidth="false" %}

Updating the Title and Panel Title within your Conversion Tools™ gives you the ability to customize your Engagement Widget™ with more personalized titles to grab your customers attention. Rename your Conversion Tools™ to match your business and give it a more personalized touch.&#x20;

## Title

This is the title that will be displayed when the widget is opened and the widget tool has not yet been selected, as shown below.  To change the title of any Conversion Tool™, simply click on the Title field, and type in your preferred text.&#x20;

## Panel Title

This is the title that will be displayed when the widget tool is opened inside the widget, as shown below. To change the panel title of any Widget Tool, simply click on the Panel Title field, and type in your preferred text.


# Tool Visibility

{% embed url="<https://youtu.be/fCr6odcqwh0>" fullWidth="false" %}

The Tool Visibility option allows you to select when you would like your Engagement Widget™ to show on your website. You can select to have the widget show at all times of the day, during working hours only, or after working hours only. With these options you have the flexibility to show your Engagement Widget™ to your customers as you see fit.

{% hint style="info" %}
[Click here to learn more about setting up Office Hours for your Engagement Widget](/engagement-widgets/widget-settings/office-hours)
{% endhint %}

## Always

With the “**Always**” option your Engagement Widget will show at all hours of the day.

## Working Hours Only

With the “**Working** **Hours** **Only**” option, your Engagement Widget™ will only be visible during your set office hours. [To learn more about setting up your office hours click here.](/engagement-widgets/widget-settings/office-hours)

## After Hours Only&#x20;

With the “**After** **Hours** **Only**” option, your Engagement Widget™ will only be visible after your set office hours.  [To learn more about setting up your office hours click here.](/engagement-widgets/widget-settings/office-hours)


# Tool Icons

{% embed url="<https://www.loom.com/share/057eea5af04d4992a5b7805fcec352c7>" fullWidth="false" %}

Your Engagement Widget™ offers the flexibility to personalize your ConversionTool™ icons. This feature allows you to tailor the aesthetic of your Engagement Widget™ to align with your company's visual identity and branding.

{% hint style="info" %}
Our icons come from a library of icons called Font Awesome. [To learn more about Font Awesome click here. ](https://fontawesome.com/)

\
If you find an icon that is not in our default icon library, let us know and we’ll work on getting it integrated into the system.
{% endhint %}

## Use Default Icons

To change the icon for your Conversion Tool™, navigate to the Main Navigation Icons section and you will see the default icon given to your Conversion Tool™. Click on the dropdown menu and select the icon you would like to use for your Conversion Tool™.

Once you have selected your icon, click on the blue Apply Changes button at the top of the page to save your changes.&#x20;

## Use Custom Icons&#x20;

{% hint style="info" %}
This feature is coming soon!
{% endhint %}


# Tool Library

## Booking Calendars

The Booking Calendars tool allows your website visitors to schedule meetings with you or your team members. This feature can be directly integrated with your high-level calendars for quick and easy scheduling. If you have multiple team members, it can accommodate multiple booking calendars within the same widget.[ To learn more about Booking Calendars, click here. ](/engagement-widgets/conversion-tools-tm/conversion-tools-library/booking-calenders)

## Custom HTML

The Custom HTML feature gives you the freedom to insert your own HTML code into the widget. This can be particularly useful if you're looking to display specific types of content or create unique styles that align with your brand.[ To learn more about Custom HTML, click here.](/engagement-widgets/conversion-tools-tm/conversion-tools-library/custom-html)

## Dedicated iFrame

With the Dedicated iFrame feature, you can embed an entire web page within the Engagement Widget™. This could be anything from a product page to personal profiles or even service descriptions. [To learn more about Dedicated iFrame, click here.](/engagement-widgets/conversion-tools-tm/conversion-tools-library/dedicated-iframe)

## Extendly for HighLevel

Extendly for HighLevel offers a white label live chat service that allows you and your white label customers to connect instantly with tech support agents to help with HighLevel issues in a white label fashion. The average response time is under 5 minutes, providing quick solutions to any issues you or your clients may encounter. [To learn more about Extendly for HighLevel, click here.](/engagement-widgets/conversion-tools-tm/conversion-tools-library/extendly-for-highlevel)

## Forms and Surveys

Forms and Surveys can be connected directly into the Engagement Widget™. This is great for capturing leads or gathering other important information, such as newsletter or promotional sign-ups. [To learn more about Forms and Surveys, click here.](/engagement-widgets/conversion-tools-tm/conversion-tools-library/forms-surveys)

## Knowledge Library

The Knowledge Library lets you integrate either an internal or external knowledge base right into the Engagement Widget™. This can be a helpful feature for providing quick answers to commonly asked questions. You also have the option to build out a FAQ section. [To learn more about the Knowledge Library, click here.](/engagement-widgets/conversion-tools-tm/conversion-tools-library/knowledge-library)

## Link Launcher

The Link Launcher allows you to add clickable hyperlinks into the widget. These links can direct visitors to important pages, thus driving engagement and providing quick access to valuable resources. T[o learn more about Link Launcher, click here.](/engagement-widgets/conversion-tools-tm/conversion-tools-library/link-launcher)

## Reviews

The Reviews feature enables the display of Google and Facebook reviews directly in the Engagement Widget. You have the option to connect your social media accounts and customize which reviews you'd like to show, thereby building trust among potential customers. [To learn more about Reviews, click here.](/engagement-widgets/conversion-tools-tm/conversion-tools-library/reviews)

## Rich Content

Rich Content is similar to the Custom HTML tool but requires no coding knowledge. It offers a rich context editor that allows you to customize the look and feel of the content you wish to display. To learn more about Custom HTML, click here.

## Tawk.to Livechat

If you have a Tawk.To account, this tool can integrate into your Engagement Widget™ to enable real-time chats with your website visitors. [To learn more about Tawk.To Livechat, click here](#talk.to-livechat).

## Video Showcase

The Video Showcase feature allows you to upload videos from platforms like Loom, Vimeo, and YouTube. You can create playlists or groups of videos, providing an interactive and informative experience for your visitors. [To learn more about the Video Showcase, click here.](/engagement-widgets/conversion-tools-tm/conversion-tools-library/video-showcase)

## Webchat

The Webchat tool allows you to replace HighLevel’s chat widget to collect new lead information, continue the conversation over SMS in HighLevel, as well as connect to multiple HighLevel sub-accounts in a single widget. [To learn more about Webchat, click here.](/engagement-widgets/conversion-tools-tm/conversion-tools-library/webchat)

<table data-card-size="large" data-column-title-hidden data-view="cards"><thead><tr><th data-card-target data-type="content-ref"></th><th></th><th data-hidden></th><th data-hidden></th><th data-hidden></th></tr></thead><tbody><tr><td></td><td><a href="broken://pages/BS7y2dBikQKE1tDcQAVv">Account</a></td><td></td><td></td><td></td></tr><tr><td></td><td><a href="/learning-the-portal/billing-management">Billing</a></td><td></td><td></td><td></td></tr><tr><td></td><td><a href="broken://pages/GvQ96jGvWMSwaQmu34tp">Plans</a></td><td></td><td></td><td></td></tr><tr><td></td><td><a href="broken://pages/QccMsg8nAufAE4UyBri9">Team</a></td><td></td><td></td><td></td></tr><tr><td></td><td><a href="/integrations/overview">Integrations</a></td><td></td><td></td><td></td></tr></tbody></table>


# Advanced Livechat

{% hint style="info" %}
The advanced live chat tool is only available for paid users. [**Click here to learn more about ChatHQ's paid subscriptions.**](https://www.chathq.io/pricing)
{% endhint %}

{% embed url="<https://www.loom.com/share/3029079ff2bb4ccb9ee070df6c720116?sid=78b75b32-f6a5-4856-8eab-e084988e0ae6>" %}

## Overview

The **Advanced Livechat Conversion Tool** from ChatHQ enhances your ability to engage with prospects and customers directly on your website, facilitated by the ChatHQ Engagement Widget. This powerful tool offers the ability to seamlessly communicate with users in real-time on your websites, sales funnels, and/or inside of your HighLevel account.

This tool is designed to take your customer interaction and engagement to the next level, ensuring you never miss an opportunity to connect with your audience.

{% hint style="info" %}
Currently, only HighLevel Live Chat is available for connection, but in the future, ChatHQ's native live chat will also be an option.
{% endhint %}

***

## Use Cases

* **Real-time Engagement**: Instantly connect with visitors on your website to boost interactions.
* **Lead Generation & Sales**: Enhance your website's conversion rate by engaging visitors with live chat.
* **Customer Support**: Provide immediate support to your customers directly on your website or through your HighLevel account.

***

## Setting Up Advanced Live Chat Tool

{% hint style="warning" %}
**IMPORTANT:** Make sure your HighLevel account is connected to your ChatHQ account to configure the tool properly. Without this connection, you won't be able to select the location and save the settings.

[**Click here to learn how to integrate HighLevel with your ChatHQ account**](/integrations/highlevel)
{% endhint %}

1. **Access the Conversion Tools section:** Go to the Engagement section and navigate to the Conversion Tools sub-navigation section.
2. **Add the Advanced Livechat tool:** Click on "Add Tool" and select "Advanced Live Chat" from the options.
3. **Customize the tool:** Modify the tool settings as needed, such as changing the tool title and view, updating the message prompt, showing/hiding fields (phone and email), and changing the chat button text and style.
4. **Configure assigned message:** Set the message that will be automatically sent to the user after they send a message. This message should inform the user that an agent will connect with them shortly.
5. **Adjust inactivity fallback settings:** These settings are messages that are sent in the chat if either the agent is absent from the chat for a period of time, or the end user is absent from the chat for a period of time.
6. **Customize feedback section:** Modify the text for the feedback section, including the question and the response message.
7. **Add agent avatar images:** Choose from the default agent avatar images or upload custom images for a personalized touch.
8. **Save and test:** Save all the settings and test the live chat tool to ensure it is functioning correctly.

{% hint style="warning" %}

### **Important Info About Livechat**

* Inactivity fallback settings need to be adjusted in HighLevel settings, not in ChatHQ.
* Test the live chat tool after saving the settings to ensure it is working as intended.
* Additional features and options may be available in the future, such as multiple agents and more customization options.
  {% endhint %}


# Booking Calenders

## Overview

This tool allows you to show appointment scheduling calendars inside your widget. You can connect to calendar groups and individual calendars from inside your CRM software.

{% embed url="<https://www.youtube.com/embed/JMi_crPbevo>" fullWidth="false" %}

***

## Use Cases

* Book discovery calls with new leads directly from the widget on any page of your website.
* Offer your customers the ability to book support calls.
* Schedule 1-on-1 meetings with new customers after they purchase your products or services.
* Offer website visitors a “free demo” calendar based on website interactions and time-on-site metrics.

***

## **Configure Booking Calendars Tool**

### Step 1: Open Tool

Navigate to your widget management area in your CRM software. Look for the Booking Calendars tool or a similar section where you can manage appointment scheduling features.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FPXvbQMaq3Hg1fszQl93D%2FXnip2024-02-05_21-17-03.jpg?alt=media&amp;token=ef5fc46d-f1b9-4e27-a958-d428f972eabb" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you have not added this tool to your widget yet, add the tool first, then you can configure the tool settings. [Click here to learn how to add new Conversion Tools™](/engagement-widgets/conversion-tools-tm/add-reorder-and-delete-tools)
{% endhint %}

***

### **Step 2: Set Tool Titles**

* **Title:** Set the name of the Booking Calendars tool that will be displayed on the initial widget view.
* **Panel Title:** Define the text that appears at the top of the Booking Calendars tool once it's activated by a visitor.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F3WDP9iHF7B8DlLnSfanF%2FXnip2024-02-05_21-22-21.jpg?alt=media&amp;token=0da5faae-ab63-4f89-b008-f57c7be6c17b" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
[For more information on Title and Panel Title, please view the help article here.](/engagement-widgets/conversion-tools-tm/title-and-panel-title)
{% endhint %}

***

### Step 3: Configure Tool Visibility

In the **Tool Visibility** section, specify when the Booking Calendars should be visible. Base this on your office hours or other conditions found in the widget settings.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FD1M5p5ARZtWUfxZAz5on%2FXnip2024-02-05_21-22-41.jpg?alt=media&amp;token=938fab46-267c-4640-a74b-ee473b229509" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
[For more information on Tool Visibility, please view the help article here.](/engagement-widgets/conversion-tools-tm/tool-visibility)
{% endhint %}

***

### Step 4: Select Calendar Groups

Find the drop-down menu for **Calendar Groups** and choose the appropriate group that includes the calendar you wish to display in your widget.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FnnrSi6grIRrGZf2SbWrl%2FXnip2024-02-05_21-35-57.jpg?alt=media&amp;token=6f018c1b-87ef-4c7b-86f9-d0b4033a01fb" alt=""><figcaption></figcaption></figure>

***

### Step 5: Choose Calendars To Display

#### **Use All Active Calendars:**

Use all active calendars in a calendar group by selecting **Use All Calendars in Group**, which will list all available calendars within the chosen group.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FFZIA5IwnWMhK5J8iiXz3%2FXnip2024-02-05_21-37-12.jpg?alt=media&amp;token=d2ebe7fb-0010-4201-92c4-23ff9ed55be5" alt=""><figcaption></figcaption></figure>

#### **Use a Single Calendar:**

Use a single calendar from within a calendar group by selecting the **specific calendar** you want to display from the list of calendars in the group.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FBjbCYoWygyt3ACKDuA2i%2FXnip2024-02-05_21-38-10.jpg?alt=media&amp;token=3b0e5107-7865-4cd8-9b50-030ae335e544" alt=""><figcaption></figcaption></figure>

***

### Step 6: Save Changes

Save your settings to apply the changes, and test the widget to ensure the Booking Calendars appear correctly for your website visitors.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FdY6sAeYElfYiIzDofNex%2FXnip2024-02-05_21-38-26.jpg?alt=media&amp;token=419324bb-a2d8-4cd5-b38c-19ebb9faeae9" alt=""><figcaption></figcaption></figure>


# Custom HTML

## Overview <a href="#overview" id="overview"></a>

This tool gives you the ability to build a unique experience inside your widgets using custom HTML. You can add any type of content into this widget tool if it can be built with HTML

The HTML Conversion Tool™ **DOES NOT** render custom CSS or custom JavaScript from embedded elements.

* Any custom CSS you would like to add needs to be added directly in the HTML.
* Custom Javascript is **NOT** supported at this time.

***

## Use Cases <a href="#use-cases" id="use-cases"></a>

* Add interactive experiences to your widgets using HTML, CSS, and JavaScript
* Bring HTML email templates into your widgets as Call To Actions
* Show HTML websites or funnel pages inside of your widgets

***

## Configure Custom HTML Tool <a href="#configure-custom-html-tool" id="configure-custom-html-tool"></a>

### Step 1: Open Tool <a href="#step-1-open-tool" id="step-1-open-tool"></a>

Navigate to your widget management area in your CRM software and open the Custom HTML tool.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Fs4tLqxtXUmW7Yu6vDgKL%2FConversion%20Tools_Custom%20HTML_Configure.jpg?alt=media&amp;token=cbb77844-5666-427d-ae73-29e3819b8915" alt=""><figcaption></figcaption></figure>

If you have not added this tool to your widget yet, add the tool first, then you can configure the tool settings. [Click here to learn how to add new Conversion Tools™](https://widgets.yourhelpcenter.net/conversion-tools/add-reorder-and-delete-tools)

***

### **Step 2: Set Tool Titles** <a href="#step-2-set-tool-titles" id="step-2-set-tool-titles"></a>

* **Title:** Set the name of the Custom HTML tool that will be displayed on the initial widget view.
* **Panel Title:** Define the text that appears at the top of the Custom HTML tool once it's activated by a visitor.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FURFRFHa2WiRJobcbxE4V%2FConversion%20Tools_Custom%20HTML_Titles.jpg?alt=media&amp;token=0fc2c30c-aa37-460a-b873-186d0dd63a3a" alt=""><figcaption></figcaption></figure>

[For more information on Title and Panel Title, please view the help article here.](https://widgets.yourhelpcenter.net/conversion-tools/title-and-panel-title)

***

### Step 3: Configure Tool Visibility <a href="#step-3-configure-tool-visibility" id="step-3-configure-tool-visibility"></a>

In the **Tool Visibility** section, specify when the Custom HTML tool should be visible based on your office hours found in the widget settings.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FeZ0UsMLSZBVbmypxmLIT%2FConversion%20Tools_Custom%20HTML_Visibility.jpg?alt=media&amp;token=ad969168-69aa-45df-bb5b-16f59f924c46" alt=""><figcaption></figcaption></figure>

[For more information on Tool Visibility, please view the help article here.](https://widgets.yourhelpcenter.net/conversion-tools/tool-visibility)

***

### **Step 4: Add HTML** <a href="#step-4-add-html" id="step-4-add-html"></a>

Paste your HTML code directly into the provided field in the tool configuration area.

* If you want to upload the code, click the **UPLOAD** button.
* To save your existing HTML code, use the **EXPORT** button to download your code.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Feajhb828uW7I0EeBgSaI%2FConversion%20Tools_Custom%20HTML_Input%20HTML.jpg?alt=media&amp;token=74440971-2476-48c6-8cc3-00381f7b6559" alt=""><figcaption></figcaption></figure>

<div><figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FoLA4OwDgN6dVbEXsEIdz%2FConversion%20Tools_Custom%20HTML_Import%20HTML.jpg?alt=media&amp;token=b6f39d35-2518-4f0e-af07-d44a9adcebbf" alt=""><figcaption></figcaption></figure> <figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F8ZP8yvdtHEZR1qbsTD6A%2FConversion%20Tools_Custom%20HTML_Export%20HTML.jpg?alt=media&amp;token=eed1050a-f5e9-4bcc-94ae-45ff5c7b25e6" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
**Remember:** Custom JavaScript is not supported, and any CSS must be included within the HTML code block itself.
{% endhint %}


# Dedicated iFrame

## Overview

Gives you the ability to embed websites, applications, and other things directly inside of your widget inside of an iframe.

{% hint style="info" %}
[Click here to learn more about iframes, what they are, and how to use them.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
{% endhint %}

***

## Use Cases

* Add website funnels directly inside your widget
* Host your courses and memberships in your widget for all your customers to access easily
* Embed AI tools into your widgets and bring Ai directly into your website and membership dashboards for all of your customers to use

***

## Configure Dedicated iFrame Tool

### Step 1: Open Tool

Navigate to your widget management area in your CRM software and open the Dedicated iFrame tool.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FDzKtARPjBReQv6yHZqWw%2FXnip2024-02-19_13-56-23.jpg?alt=media&amp;token=7a85d835-3813-40ce-b704-a37e72860230" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you have not added this tool to your widget yet, add the tool first, then you can configure the tool settings. [Click here to learn how to add new Conversion Tools™](/engagement-widgets/conversion-tools-tm/add-reorder-and-delete-tools)
{% endhint %}

***

### **Step 2: Set Tool Titles**

* **Title:** Set the name of the Dedicated iFrame tool that will be displayed on the initial widget view.
* **Panel Title:** Define the text that appears at the top of the Dedicated iFrame tool once it's activated by a visitor.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FBGKqWXKb9Gee8iUsGdMF%2FXnip2024-02-19_13-56-40.jpg?alt=media&amp;token=a84639e4-40cb-4397-a121-b23c133ee409" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
[For more information on Title and Panel Title, please view the help article here.](/engagement-widgets/conversion-tools-tm/title-and-panel-title)
{% endhint %}

***

### Step 3: Configure Tool Visibility

In the **Tool Visibility** section, specify when the Dedicated iFrame tool should be visible based on your office hours found in the widget settings.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FTSYMxfd9VZ3TSsj0W6QZ%2FXnip2024-02-19_13-57-21.jpg?alt=media&amp;token=5f7cd2e4-bde7-464e-b56b-cc0d3024f333" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
[For more information on Tool Visibility, please view the help article here.](/engagement-widgets/conversion-tools-tm/tool-visibility)
{% endhint %}

***

### Step 4: Add iFrame URL

Paste or type in the URL you would like to use for the Dedicated iFrame. Once you add the URL, you will see the widget preview update showing the iFrame in the widget.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F83inURDWogwbvOPK6d1R%2FXnip2024-02-19_13-59-59.jpg?alt=media&amp;token=5c3770d9-bcbe-48b0-9514-82798df5418b" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**IMPORTANT:** The URL must allow itself to be iFramed, otherwise you will see a broken link image in the widget.
{% endhint %}

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FEFxoAG0tPvVmEAf9OzEU%2FXnip2024-02-19_14-02-33.jpg?alt=media&amp;token=4aa9e253-b116-4baa-9c88-7962fe364704" alt=""><figcaption></figcaption></figure>


# Extendly for HighLevel

{% embed url="<https://www.loom.com/share/a87452be2175427c81d7b67ba2965c28?sid=4bafb761-e936-4983-92b6-8867b4a86f9b>" %}

## What Is The Extendly for HighLevel Tool?

* Bring Extendly Livechat Support directly into your ChatHQ Engagement Widget so you can take advantage of everything ChatHQ widgets have to offer and STILL get the world-class support provided by the Extendly team!<br>

{% hint style="info" %}
Extendly offers livechat customer support for HighLevel agencies directly inside of your HighLevel account. [Click here to learn more about Extendly](https://go.getextendly.com/chathq?deal=chathq-portal)
{% endhint %}

## Extendly Support Tool Use Cases

* Provide Livechat support inside of your HighLevel account so you and your team can focus on other things like growing the business

## Extendly Support Tool Setup

**1. Title**

This changes the name of the Reviews tool in the initial widget view. [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/title-and-panel-title)

**2. Panel Title**

This changes the text shown at the top of the Reviews tool after the tool was already clicked by your website visitor or customer. [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/title-and-panel-title)

**3. Tool Visibility**

Choose when to show this engagement tool based on your current office hour configuration found in "widget settings". [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/tool-visibility)


# Facebook Messenger

{% embed url="<https://youtu.be/ZJupVAVs0vk>" fullWidth="false" %}

Adding Facebook Messenger to your ChatHQ Engagement Widget™ easily allows potential clients to connect with your business from your website using Facebook Messenger. To set up Facebook Messenger in your ChatHQ Engagement Widget™, you will need to use the [Link Launcher Conversion Tool™](/engagement-widgets/conversion-tools-tm/conversion-tools-library/link-launcher). We will show you how to do this below.

## Setup Link Launcher Tool

Start by adding a Link Launcher tool to your Engagement Widget™

### **Change Title:**

This changes the name of the Link Launcher tool in the initial widget window. We suggest using something like “Facebook Messenger” or “Message us on Facebook”.

***

### Step 4: **Add M.Me URL:**

Type in the URL for Facebook messenger using the m.me URL as shown below, and use your Facebook page name as the end of your URL.

* <https://m.me/**\\[FacebookPageUsername>]\*\*
* **For Example:** *<mark style="color:blue;"><https://m.me/></mark><mark style="color:blue;">**google**</mark>*

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FAal38tdQ8gq2p4UZzsN2%2FXnip2024-02-19_14-18-50.jpg?alt=media&amp;token=9f54a29b-8b43-42b1-9f49-80e56375dd91" alt=""><figcaption></figcaption></figure>

#### Finding Your Facebook Page Name

Your Facebook business page has a name that serves as its identification. That name is what needs to be added to the URL for this tool to work properly.

To find the exact name of your Facebook business page, simply open your business page and look in the URL bar. The page name will immediately follow Facebook's domain - *<mark style="color:blue;">[www.facebook.com/](http://www.facebook.com/)</mark><mark style="color:blue;">**\[YourBusinessPageName]**</mark>*

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FSBrunvB8egT4O6QKoQno%2FXnip2024-02-19_14-13-32.jpg?alt=media&amp;token=46ab49b3-5989-422a-9999-0479d5e9328a" alt=""><figcaption></figcaption></figure>

#### Add Business Page Name to M.Me Link

Copy and paste your Facebook Business Page name into the M.Me URL we provided to you above, and whenever a prospect or customer clicks on that Conversion Tool, they will be immediately redirected to Facebook Messenger, and your business will be displayed on the page so they can directly message your business!

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Fu9sVDdOWIyKn4BUdZVnp%2FXnip2024-02-19_14-18-31.jpg?alt=media&amp;token=31dae91b-b3ae-4e73-be9a-a122a810bbb4" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FeNZOBvnbHoVAPjBqbvxM%2FXnip2024-02-19_14-15-31.jpg?alt=media&amp;token=cfec2285-c291-4b12-9d44-401a02bb3d14" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
[Click here to learn more about using Facebook's m.me links and how to use them](https://developers.facebook.com/docs/messenger-platform/discovery/m-me-links/)
{% endhint %}

{% embed url="<https://developers.facebook.com/docs/messenger-platform/discovery/m-me-links/>" %}

***

## Add Facebook Icon

You can change the default icon to reflect the link will be Facebook Messenger by selecting the messenger icon or Facebook icon.&#x20;

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FNOgPCNQdari6sGtxhmiL%2FXnip2024-02-19_14-26-58.jpg?alt=media&amp;token=d3f4dda4-bffd-4a85-bc6d-5652951bcdbe" alt=""><figcaption></figcaption></figure>


# Forms/Surveys

{% embed url="<https://www.youtube.com/embed/YQ6KAov4WmY>" fullWidth="false" %}

## What Is The Forms/Surveys Tool?

* This tool gives you and your customers the ability to add forms and/or surveys to your Engagement Widget
* Build the forms and surveys in your HighLevel accounts and bring them directly into your Engagement Widget to be used anywhere the widget is installed

{% hint style="info" %}
Soon to connect to more form and survey software like Jotform, Gravity forms, ect.
{% endhint %}

## Forms/Surveys Tool Use Cases:

* Lead capture with various signup forms like a newsletter
* Promote new products and offerings and collect customer opt-ins
* Provide “support ticket” submissions for current customers inside your application
* Offer holiday discounts and promotions if customers opt-in

## Forms/Surveys Tool Setup:

Add the “Forms & Surveys” tool to your engagement widget from the "+ Add Tools" panel

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FjEURgC3gUTAwXMQeEmj8%2FEngagement%20%E2%80%A2%20ChatHQ%20Portal%20-%204%20April%202023%20copy.gif?alt=media&amp;token=2a13c2e0-6aa5-4d64-9d0f-849fdab0e04f" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### HighLevel Agency API Key

In order to use this tool, and many others, you will need to add your HighLevel agency API key. This key gives ChatHQ the ability to pull in data from your HighLevel including the sub-accounts (locations), teams, calendars, forms, surveys, and more!
{% endhint %}

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FGt9pHX867BcB8c5hiDND%2FXnip2023-04-04_17-59-30.png?alt=media&amp;token=8f4e727d-61b2-4228-8803-8ef64b32682a" alt=""><figcaption></figcaption></figure>

**1. Title**

This changes the name of the Forms/Surveys tool in the initial widget view. [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/title-and-panel-title)

**2. Panel Title**

This changes the text shown at the top of the Forms/Surveys tool after the tool was already clicked by your website visitor or customer. [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/title-and-panel-title)

**3. Tool Visibility**

Choose when to show this engagement tool based on your current office hour configuration found in "widget settings". [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/tool-visibility)

### Select HighLevel Location

After you connect your HighLevel agency API key, you will see new options appear on the screen. One of the options is a HighLevel location selector. When you click this drop down, you will be able to select any of your HighLevel sub-accounts from the list. <mark style="color:red;">Select the sub-account that has the form or survey you will to show inside the widget.</mark>

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F2WjRcJ0Egji0XSntUHx0%2FXnip2023-04-04_19-06-33.png?alt=media&amp;token=f4dde0e1-a19f-4c3f-8626-8b274785f6e7" alt=""><figcaption></figcaption></figure>

### Choose Either Form or Survey

Next you will be given the option to choose between adding a HighLevel Form or a HighLevel Survey. Each has different benefits and use cases, and you should always take those benefits and use cases into consideration before adding them to your widget.Aft

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FwKq8dOLuLZnp4e28tQGu%2FXnip2023-04-04_19-04-30.png?alt=media&amp;token=1ced5f8a-1f37-443d-9ae8-cf36728e8362" alt=""><figcaption></figcaption></figure>

### Add Specific Form or Survey

After you choose between Forms and Surveys, you will need to select the specific Form or Survey to add into your widget. In the example below I chose to add a survey into my widget. You can see in the screenshot that the drop down selector now reads "survey" and will show me a list of all surveys in the HighLevel location I have selected.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FlgSGm1aCEf7O6KCVh5EM%2FXnip2023-04-04_19-04-58.png?alt=media&amp;token=acc53194-35ec-4cbf-b999-231bf01a4d06" alt=""><figcaption></figcaption></figure>

### Selecting and Previewing

Once I selected the survey I wanted to add to my Engagement Widget™, in this case it was t**he Bug Report Survey**, you can see it has become visible in the Widget preview window on the right side of the screen.

{% hint style="info" %}
The preview window is fully functional and allows you to see exactly how the form or survey will look in real-time inside of your widget, as well as allow you to test it before deploying it to your website or your customer's website!
{% endhint %}

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Fglz2HYRQVLKyhZkHbybO%2FXnip2023-04-04_19-05-21.png?alt=media&amp;token=34f1e6bb-3bc8-44c9-a35e-721a0adf05e9" alt=""><figcaption></figcaption></figure>


# Knowledge Library

{% embed url="<https://www.loom.com/share/7fa935569f1041359f6c8e896b41f71a?sid=8da139ac-7eda-4823-95dd-307d5a2c1d8b>" fullWidth="false" %}

## What Is The Knowledge Library Tool?

* Gives you and your customers the ability to build libraries of information to be readily accessible through the Engagement Widget.
* Embed an external Knowledge Library or build your own<br>

## Knowledge Library Tool Use Cases

* Give website visitors a robust Frequently Asked Questions library to help close a sale
* Provide information about your products or services to current customers directly inside your application
* Teach and train people by building a structured educational course using categories and rich media content

## Knowledge Library Tool Setup

* Go to the Conversion Tools™ section.
* Click on the add tool button.
* From the list, choose the Knowledge Library.

### Naming Your Knowledge Library

* A new tool, titled "Knowledge Library", will be generated.
* Assign the Title for your FAQ section, such as “ChatHQ FAQ ". This title will be reflected in the main interface of the Engagement Widget™.
* There's also a Panel Title that you should name as well for consistency. This title will show when the Knowledge Library tool is opened in the widget.

### Choose Knowledge Library Type

You have two options for your Knowledge Library:&#x20;

* **Built-in:** Craft the FAQ section from scratch.
* **External:** Link an external knowledge base via URL.

### Built-In Knowledge Library

* This is where you can build a custom knowledge base using categories and sections
* You are able to build articles using rich text and media embeds from YouTube, Vimeo, and Loom

<details>

<summary>How to build a robust FAQ library using the Built-In Knowledge Library</summary>

### Crafting FAQ Sections:

* Click on Add FAQ Section.
* A prompt will appear; input your FAQ section's name (such as "General Questions").
* Confirm by clicking Save.
* You can rinse and repeat for additional sections as desired.

### Populating Sections with Questions & Answers:

* Select Add FAQ Item.
* A new window will emerge.
  * From the dropdown, choose the section where you want to insert the Q\&A.
  * Fill in your question.
  * Provide the accompanying answer.
* Take advantage of various formatting tools at your disposal: headers, bullet lists, embed video options, text styles, and more.
* Conclude by hitting Save.

### Adjusting the FAQ Layout:

* If you misplace an item, simply click and drag the entry to the correct section by selecting the 6 dots icon.
* The entire FAQ sections themselves can also be reordered based on preference by dragging and dropping.

</details>

### External Knowledge Library

* The ability to iframe an external knowledge library from another platform such as Gitbook, Tawk to, and other URL-based knowledge libraries.

{% hint style="warning" %}
External Knowledge Library will not work if the platform you're trying to embed does not allow iframing.
{% endhint %}

<details>

<summary>How to add an external knowledge base to your Engagement Widget™</summary>

</details>

### Tool Visibility:

* Navigate down to the Tool Visibility section. Here you can decide when your FAQ is visible:
  * **Always:** The FAQs are always available via your Engagement Widget™&#x20;
  * **Working hours only:** FAQs are visible only during the business hours you set.
  * **After hours only:** FAQs are shown outside of business hours.

### Conversion Tool™ Icons:

In the Main Navigation Icons section, you can select the icon for your FAQ section.&#x20;

* **Default Icons:** Here you can choose from a variety of different icons available. Simply click on the drop down menu and scroll through the given icons to choose the one you would like to use.  For relevance, a question mark might be apt for FAQs.
* **Custom Icons:** Although not currently available, custom icons will be coming soon and you will be able to upload a custom icon for your FAQ section.&#x20;

<br>


# Link Launcher

{% embed url="<https://www.youtube.com/embed/lNUSLFIwEtc>" fullWidth="false" %}

## What Is The Link Launcher Tool?

* Provides a way for you and your customers to add buttons to your Engagement Widget that link to external sources

## Link Launcher Tool Use Cases

* Link to social media accounts
* Link to payment portals
* Link to educational hubs
* Create “Click to Call” buttons
* Create affiliate link trees

<figure><img src="https://lh5.googleusercontent.com/KxsNn0bfC3-CzQjp8w39wIW1_ezY_ClZLSw73v0RQ5jSfmxvgm87MPBbM4JiWd8tFXevoJec4ePo-h51SUlOyS2VYdQQtZXthRlk6vMqgmf3708RHpwTjh77hILdDatazwegICASYSZpzynHzolrvPE" alt=""><figcaption></figcaption></figure>

## Link Launcher Tool Setup

There are some basic settings that you can change when setting up your knowledge library tool that can change how your customers interact with the knowledge library.&#x20;

<figure><img src="https://lh5.googleusercontent.com/J0Oywjp3D0iVFxuP_OrxHfldGwDtxe0VYLkduk13NbDCM4xo5PHG5p0PIGE1TCMIFAF4x5p_3aMdU-5K2kuGlF9fIQpBfpyiIsXtF5ceEboqOjPxlJ5MWBQYj1e9DC1oB3_78C96TuLloH5z8dHvvv4" alt=""><figcaption></figcaption></figure>

1. **Title:** This changes the name of the link launcher tool in the initial widget window.&#x20;
2. **URL:** Paste the link of the URL you would like the tool to link to. You can toggle on or off to open the link in a new page.
3. **Tool Visibility:** Choose when to show this engagement tool based on your current business hour configuration found in “widget settings”.&#x20;

{% hint style="warning" %}
Link **MUST** include one of the following protocols:

* http\://
* https\://
* tel:
* mailto:
  {% endhint %}

### Custom Tool Icons

You can change the navigation icon by clicking on the dropdown and selecting an icon for your Link Launcher tool. Uploading custom icons is coming soon!

{% hint style="info" %}
[Click here to learn more about Custom Tool Icons](/engagement-widgets/conversion-tools-tm/tool-icons)
{% endhint %}

<figure><img src="https://lh4.googleusercontent.com/CJzlBGZao-3hXKE1yaKfLt4avhP0y12NScYeGwPWsiOOUljZ5ByQy9HK77thCA6mwFjrVXXfR_bgr8xrRiO9LwM2ywO5gjhjc2c-o_t8Jc1Z-axLfcn7mvhNQx4JaLyfhzD6wzzCnWq3r23gT_F5NPA" alt=""><figcaption></figcaption></figure>


# Reviews

{% hint style="warning" %}
We pull reviews directly from inside your CRM. If you do not have any reviews in your CRM account, no reviews will show in your widget. To get reviews into your CRM, integrate your Google and Facebook accounts into your CRM. If you have reviews, they will show in your CRM.
{% endhint %}

{% embed url="<https://www.youtube.com/embed/TGMEEKRvhS4>" fullWidth="false" %}

## Overview <a href="#overview" id="overview"></a>

The Reviews tool allows you to showcase your customer reviews from Google and Facebook on every page of your website from inside your widget. You can control which reviews to show or hide based on a “minimum star rating”, and even collect reviews directly from inside your widget.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FNoq8h7nh6zkiGcgQt2gd%2FConversion%20Tools_Reviews_Review%20Source_Has%20Reviews.jpg?alt=media&amp;token=8fb7a505-00c4-4f94-a08e-e3b67ba74c3f" alt=""><figcaption></figcaption></figure>

***

## Use Cases <a href="#use-cases" id="use-cases"></a>

* Use social proof to convert a website visitor into a customer
* Collect new reviews from your customer base

***

## Configure Reviews Tool <a href="#configure-reviews-tool" id="configure-reviews-tool"></a>

### Step 1: Open Tool <a href="#step-1-open-tool" id="step-1-open-tool"></a>

Navigate to your widget management area in your CRM software and open the Reviews tool.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FuAqzCWv7bZNpHunCg4xV%2FConversion%20Tools_Reviews_Configure.jpg?alt=media&amp;token=68caae7a-b204-495f-b54b-49c699ebda59" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you have not added this tool to your widget yet, add the tool first, then you can configure the tool settings. [Click here to learn how to add new Conversion Tools™](/engagement-widgets/conversion-tools-tm/add-reorder-and-delete-tools)
{% endhint %}

***

### **Step 2: Set Tool Titles** <a href="#step-2-set-tool-titles" id="step-2-set-tool-titles"></a>

* **Title:** Set the name of the Reviews tool that will be displayed on the initial widget view.
* **Panel Title:** Define the text that appears at the top of the Reviews tool once it's activated by a visitor.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FHAQDPSuFBceoLSmdpU6X%2FConversion%20Tools_Reviews_Titles.jpg?alt=media&amp;token=e333390f-1f40-4366-a4f4-84c4744b1e2a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
[For more information on Title and Panel Title, please view the help article here.](/engagement-widgets/conversion-tools-tm/title-and-panel-title)
{% endhint %}

***

### Step 3: Configure Tool Visibility <a href="#step-3-configure-tool-visibility" id="step-3-configure-tool-visibility"></a>

In the **Tool Visibility** section, specify when the Reviews tool should be visible based on your office hours found in the widget settings.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Fza9J3rtgDUyI1EMGYoeg%2FConversion%20Tools_Reviews_Visbility.jpg?alt=media&amp;token=389e248f-82a3-4de9-8c8d-44467afef1bf" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
[For more information on Tool Visibility, please view the help article here.](/engagement-widgets/conversion-tools-tm/tool-visibility)
{% endhint %}

***

### Step 4: Set Minimum Rating <a href="#step-4-set-minimum-rating" id="step-4-set-minimum-rating"></a>

You can choose the minimum rating to show in your Reviews tool by clicking on the stars. You can select starts in half increments from 0.5 starts up to 5 stars. Your selection will reflect in your widget.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FLKipga0s1anqlCzIhtRQ%2FConversion%20Tools_Reviews_Minimum%20Rating_2.jpg?alt=media&amp;token=9b67ec52-80e1-4a16-a7e4-5a247d440e0e" alt=""><figcaption></figcaption></figure>

***

### Step 5: Set Rating Color <a href="#step-5-set-rating-color" id="step-5-set-rating-color"></a>

You can select the color for your ratings by clicking on the color bar and selecting one of the given color options, or entering a custom color code. This color will show in the star ratings as seen below.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FOVNPqHKTLQKMQGjfPDSM%2FConversion%20Tools_Reviews_Rating%20Color%20Example.jpg?alt=media&amp;token=4cbedb50-64ec-461f-9a3d-f1b2ce8d62ff" alt=""><figcaption></figcaption></figure>

***

### Step 6: Set Avatar Backgrounds <a href="#step-6-set-avatar-backgrounds" id="step-6-set-avatar-backgrounds"></a>

You can change the color of the Avatar Backgrounds in your widget by selecting to use the widget secondary color you set up in Widget Settings or use random colors.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FH2toz2nm3QjycBLreRYZ%2FConversion%20Tools_Reviews_Avatar%20Color%201.jpg?alt=media&amp;token=ff19c4ba-990c-47f4-a4c2-b03ee02bea61" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FSBdZGDLYVRo3NtB3wBlw%2FConversion%20Tools_Reviews_Avatar%20Color%202.jpg?alt=media&amp;token=cfdb8245-8db3-450e-868e-1a075f70cbc3" alt=""><figcaption></figcaption></figure>

***

### Step 7: Setup Review Request <a href="#step-7-setup-review-request" id="step-7-setup-review-request"></a>

You can request reviews by toggling on Request Reviews. You will see the Google and Facebook review bars show when you toggle this on. Select if you would like to collect reviews from Google and/or Facebook, and enter the Place ID of your Google My Business and/or the username of your Facebook Page.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FtC5sBG4DhvDv5vAmhcsj%2FConversion%20Tools_Reviews_Request%20Reviews.jpg?alt=media&amp;token=6bc59d76-1b6f-4121-afe0-d4d275169683" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FIDLReamOdiwx8pisbHI9%2FConversion%20Tools_Reviews_Request%20Reviews_IDs.jpg?alt=media&amp;token=07e3ff79-c31e-4d24-956f-858888fe2897" alt=""><figcaption></figcaption></figure>

### Step 8: Add Google & Facebook ID <a href="#add-google-and-facebook-id" id="add-google-and-facebook-id"></a>

To find your Google Places ID, log into your CRM, go to **Settings**, and click on **Reputation Management.** If you have not yet generated a review link, click on the **Generate Link** button. Once you have generated a review link, you will see your Google Places ID at the end of the link, as shown below.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Fi3nMyHogdPTi0hwr7Zst%2FConversion%20Tools_Reviews_Google%20ID.jpg?alt=media&amp;token=a99d2aba-cc8e-4172-b81e-06ddb5619a86" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FfGncqaWkdTgN3ltvCiIc%2FConversion%20Tools_Reviews_Facebook%20ID.jpg?alt=media&amp;token=10fdf3d3-b686-4b8c-8dde-69451a04903e" alt=""><figcaption></figcaption></figure>


# Rich Content

## What Is The Rich Content Tool?

* This tool allows you to build stand-alone pages inside of your Engagement Widget™ using our Rich Content editor
* You can do things like:
  1. Add H1, H2, H3, ect&#x20;
  2. Change text size and color
  3. Add images and videos
  4. Add hyperlinks
  5. And so much more!

## Rich Content Tool Use Cases:

* Build individual content pages (like blog pages) directly inside of your widget for your audience to read and consume
* Educate your customers or audience on critical features or processes within your application or business
* Create media-rich experiences inside your widgets that draw attention and help sell your products and services

<figure><img src="https://lh3.googleusercontent.com/T9wgpXtDQNOxMLKbkMnUrSMcXYYgJb7BYx5oMgGdrb9jQesc-hnk1nHMYG-9n-8lFnspmuNfSKSubH-2NikgSy56ypQccRURmC0BuK3naG9vD-DuV22bpNE_XyFMuLK3OOmOjx-wOOdQpNErJ4nRqoU" alt=""><figcaption></figcaption></figure>

## Rich Content Tool Setup

There are some basic settings that you can change when setting up your Rich Content tool that can change how your customers and prospects interact with your widget.&#x20;

<figure><img src="https://lh3.googleusercontent.com/y3T9YB3N5krfM55mFF8m5g2DQcIbN2Qbgfm5yf9XcJOtXLHwV1nEcxNhjmd7100l2M6pJ_k8C2UKV0iT9HA6SGn38qQCXialm4vgF8QzKztbUwimEwh111j-kH8KM1xalqFN6blb9XDe9Svf2Uh2MzQ" alt=""><figcaption></figcaption></figure>

**1. Title**

This changes the name of the Rich Content tool in the initial widget view. [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/title-and-panel-title)

**2. Panel Title**

This changes the text shown at the top of the Rich Content tool after the tool was already clicked by your website visitor or customer. [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/title-and-panel-title)

**3. Tool Visibility**

Choose when to show this Conversion Tool™ based on your current office hour configuration found in "widget settings". [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/tool-visibility)

### Rich Content

Type your content into the given field. You can change the text format by adding headings, bulleted lists, number lists, quotes and text boxes. You can also change the font size, color, and highlight as well as bold, italicize, underline, or strike-through text. You have the ability to insert code, links, and videos.&#x20;

<figure><img src="https://lh6.googleusercontent.com/TdCKrLR8uHykat-HWutNgkwychd_zmf4KisV1LK9qeyKtIasRbm3wZ-nPn7zmxWubhJVKypIDJ77C1lSWxWrGrB3uaxpjotxqbW8qLmDv0lvjxQ7YKLjS5dKswQFTYG9nzM_y5RaDa3CQqE1cL-w8FY" alt=""><figcaption></figcaption></figure>

### Main Navigation Icons

You can change the navigation icon by clicking on the dropdown and selecting an icon for your Rich Content tool. Uploading custom icons is coming soon!&#x20;

<figure><img src="https://lh4.googleusercontent.com/7U9k1m5TKunUK-UC75cUrpRKE_Ovjh58pcVmcU8P1aKyRgBoJY8XXPW0QtUBjEw_zdlI4Ft0a0jMw8fVkdRm9NfilKy0oJyh-iZ0rH_zHKFkfiicKu9BI-dANH_ciCLz2Fe1dg7YvnDXoDZWzUeQ4uM" alt=""><figcaption></figcaption></figure>


# Tawk.To Livechat

{% embed url="<https://www.youtube.com/embed/ouwG6HwFq_w>" fullWidth="false" %}

## What Is The Tawk.To Livechat Tool?

* Bring Tawk.To livechat directly into the ChatHQ Engagement Widget™ so you don’t need to choose between the 2 platforms!
* You will be able to maximize the benefits of Tawk.To and all the benefits of a ChatHQ Engagement Widget™ at the same time

## Tawk.To Livechat Tool Use Cases

* Add livechat to your website for sales and support
* Bring livechat into your HighLevel account to support your customers
* If you are already integrated into Tawk.To, but want to use ChatHQ’s widgets, you can now use both at the same time
* If your customers are already integrated into Tawk.To, but you want to sell them ChatHQ’s widgets, you can now give them an easy path to adoption

<figure><img src="https://lh3.googleusercontent.com/G_HFGLa9ImDZkFaaqoN0si7y7fusGHCqjxu2hxvm_ai3Xi8aihAKqnuWFtqgTD1vKKYyx5_3_kAh6-rC1LwJf6-dCb3eT_FXeYuh09yg5cQJRGUt7HZd26ZDoZ-mG0xR1nfvKVIdphGwHAyPI_3WiX4" alt=""><figcaption></figcaption></figure>

## Tawk.To Livechat Tool Setup

There are some basic settings that you can change when setting up your Tawk.to Livechat tool that can change how your customers and prospects interact with your widget.&#x20;

<figure><img src="https://lh6.googleusercontent.com/jA9eQoX-V61XIBWJPElzbTEVnAwWzHHbX4nBo9UobaCeMpxNj1kuUoX7I4EDi5HuFdFVuaIrL0fN8Xn2J5ye2amfsiGYi31O0rGu_WyBbsPykZWRhtUq-RBQ1LIsKQEhQXpPBo35BRYo9S5kyqaCwKk" alt=""><figcaption></figcaption></figure>

**1. Title**

This changes the name of the Tawk.to Livechat tool in the initial widget view. [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/title-and-panel-title)

**2. Panel Title**

This changes the text shown at the top of the Tawk.to Livechat tool after the tool was already clicked by your website visitor or customer. [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/title-and-panel-title)

**3. Tool Visibility**

Choose when to show this Conversion Tool™ based on your current office hour configuration found in "widget settings". [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/tool-visibility)

### Tawk.To Livechat Configuration

To connect your Tawk.To Livechat account, paste in the propertyid and the widgetid. To find these id’s, log into your Tawk.To account and go to Administration > Channels > Chat Widget. Once you have pasted in your propertyid and widgetid, you will see your Tawk.To account connected inside the widget.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FthWYSsodYyj5pNt3swbe%2Fimage.png?alt=media&amp;token=5eca81e3-f0cd-47d6-97fd-6dadb5fec4a0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FGcW9II34dUzkgKWb5dTU%2Fimage.png?alt=media&amp;token=613cae77-d11d-4257-aa41-958dc7baf8e8" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh3.googleusercontent.com/a0tZ1_sn5ZwhnaU-7Pc6VMihEqq7gSl1JJDggb_1DjSnRtdIKGP7yZJWMGDQkTonmTY3Wb0WF4B4slUOOZ6WYjNnyzxRiPWVpZGYhi7OxWT6fjuKtx1rXHJrorOSv6aIEHzsCxv9EZjzhw6PSugA1ns" alt=""><figcaption></figcaption></figure>

## Custom Tool Icons

You can change the navigation icon by clicking on the dropdown and selecting an icon for your Tawk.To Livechat tool. Uploading custom icons is coming soon!&#x20;

<figure><img src="https://lh4.googleusercontent.com/XbME06J4F-RXETrAQzbzietZ83joEgK7Yqyw6Hu3eFH-mjazqvssrhYy674xbtaijS3Irp7spoN7eVRYCtfu02LQjhBARMvnpz59fzdEK1CcQbvPI_mHSp3KY1pZOvf3ykml3zF2kbccsAaVqCwD9y0" alt=""><figcaption></figcaption></figure>


# Video Showcase

{% embed url="<https://www.loom.com/share/7fa935569f1041359f6c8e896b41f71a?sid=8f759bbe-dc0c-4850-85cc-57edba4a4720>" fullWidth="false" %}

This help article will walk you through the process of embedding and categorizing your videos within the Video Showcase Conversion Tool™, in your ChatHQ Engagement Widget™, utilizing platforms such as YouTube, Vimeo, and Loom. With the Video Showcase Conversion Tool™, you’ll be able to easily create and manage video playlists for your website visitors.

## What Is The Video Showcase Tool?

* Gives users the ability to add YouTube, Vimeo, and Loom videos into their Engagement Widgets for sales, marketing, and educational purposes
* You can create video groups and allow your visitors or customers to consume videos in a specific order and within particular categories

## Video Showcase Tool Use Cases

* Add marketing videos to your website or in your application teaching your visitors or customers about your products and services
* Create video groups showcasing different areas of your business
* Build onboarding video sequences to onboard new customers into your products
* Add customer testimonial videos to your Engagement Widgets to help convert website visitors using social proof

## Video Showcase Tool Setup

#### **1. Title**

This title appears in the main widget view. Update the default to your preferred title (e.g., YouTube Videos). [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/title-and-panel-title)

#### **2. Panel Title**

This changes the text shown at the top of the Reviews tool after the tool was already clicked by your website visitor or customer. [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/title-and-panel-title)

#### **3. Tool Visibility**

Choose when to show this engagement tool based on your current office hour configuration found in "widget settings". [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/tool-visibility)

* **Always**: The videos are always available via your Engagement Widget™&#x20;
* **Working hours only**: Videos are visible only during the business hours you set.
* **After hours only:** Videos are shown outside of business hours.

### Showcase Description

Insert a description that offers viewers an overview of the videos you're showcasing.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FZNYNasYrViTwUGgaDM6Y%2FVideo%20Showcase%20-%20Showcase%20Description%20copy.gif?alt=media&amp;token=a1e4e9af-3569-468b-ab92-4396d76de32d" alt=""><figcaption></figcaption></figure>

### Playback Mode

Choose how the playback of videos in your playlist should be handled. You have two options to choose from:&#x20;

* **Inside the widget**: Videos play directly within the widget.
* **External pop up**: Videos open in an external screen for playback.

### Adding Video Groups

In order to showcase videos in your Engagement Widget™ you will need to first create a VIDEO GROUP. This group helps visitors and customers better understand the category or videos they are watching.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FS4sobn3480cIvQ6p2nKM%2FXnip2023-04-07_18-10-23.png?alt=media&amp;token=08185a4b-d198-46fa-84aa-9e1c9b0e140e" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You can create an unlimited amount of video groups
{% endhint %}

1. **Add Video Group** - To add a Video Group, click on the green “Add Video Group” button. You will see a popup appear where you can type in the name for your video group, then click on “Save”.
2. **Reorder Video Groups -** When you have multiple video groups, you can choose the order in which they display in your widget by dragging the groups either up or down using this handle and reordering them.
3. **Video Group Name -** This is the name your video group will display to your viewers when you have more than one video group. If you only have one video group, your viewers will not see the name of the group.
4. **Add Videos to Group -** To add videos to your video group, click on the green + button. You can add the following video types:
   * [Individual YouTube Videos](#individual-youtube-videos)
   * [YouTube Video Playlists](#youtube-playlists)
   * [Individual Vimeo Videos](#adding-vimeo-videos)
   * [Individual Loom Videos](#adding-loom-videos)
5. **Rename Video Group -** If you want to rename your video group simply click the pencil icon shown here and rename it.
   * This **WILL NOT** affect the functionality of your video showcase tool or the visibility of the videos you have already added to this group!
6. **Delete Video Group -** If you want to delete your video group, click the trash can icon.
   * <mark style="background-color:red;">Any videos added to the deleted video group WILL be removed from your widget and will need to be re-added later if needed.</mark>
7. **Expand Video Group -** To see all the videos added to your video group, and to manage the videos inside of a video group, click the icon shown below to expand the video group.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FBKRS5PuhS8JG3p0eQrMM%2FXnip2023-04-07_18-11-19.png?alt=media&amp;token=7eb7c86a-ffd9-42c5-95f4-add0b5a4ef74" alt=""><figcaption></figcaption></figure>

#### Adding Multiple Video Groups

You have the option to add multiple video groups to separate your content into different groups. To add more video groups, click on the green “Add Video Group” button. You will see a popup appear to type in the name of your video group, then click on “Save”.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FPYhOINANMx6sv3FZFegD%2FXnip2023-04-07_18-12-24.png?alt=media&amp;token=861c91ed-3cb2-482b-a8e7-6ca4946cbc9f" alt=""><figcaption></figcaption></figure>

## Adding YouTube Videos

When adding YouTube videos to your Video Showcase tool, you can either add individual videos or add entire YouTube playlists just by adding a single URL.

### YouTube Playlists

You have the ability to add entire video playlists from YouTube all at once. To do this, click into a YouTube playlist and grab the "Share" link.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F45guUZPJcO46GijFH7fM%2FXnip2023-04-07_17-50-36.png?alt=media&amp;token=8f3f5e46-8e6e-4a87-a471-5ed278658b7d" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When adding a video playlist URL from YouTube, you should see <mark style="color:red;">**/playlist?**</mark> in the URL
{% endhint %}

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FLRSzqQoyAbjg0Rzcl9ez%2FXnip2023-04-07_17-51-18.png?alt=media&amp;token=62fd3550-5702-4153-bb28-6872c909f5a2" alt=""><figcaption></figcaption></figure>

To add your playlist to your Video Showcase tool, click on the green + button, and you will see a popup appear. Paste the URL of your YouTube playlist and click on “Save”.

After pasting the playlist URL into your video showcase tool, you will see the entire YouTube playlist populate inside of your ChatHQ widget in the preview window! Adding playlists is an easy way to add many videos at once, and keep them organized by a specific category!

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FQb6sy22rvcxFDFcatBkM%2FXnip2023-04-07_18-08-48.png?alt=media&amp;token=59b5ac2f-5d1b-4cc1-9328-adac31474bf9" alt=""><figcaption></figcaption></figure>

### **Individual YouTube Videos**

You can add individual YouTube videos by copying and pasting the individual YouTube video link. Click on the green + icon to add your YouTube video, and paste the URL into the popup and click on “Save”.&#x20;

After pasting the YouTube video URL into your video showcase tool, you will see your video appear in the preview window to the right.

## Adding Vimeo Videos

You also have the ability to add Vimeo videos to your Video Showcase tool. Start by going to Vimeo, choosing the video you want to use, and click on the “Copy Link” icon.&#x20;

To add your Vimeo video to your Video Showcase tool, click on the green + icon next to the Video Group you would like to add it to. You will see a popup appear where you can paste the Vimeo URL, then click on “Save”.

Once you’ve added your video, you will see it populate in the preview window to the right.

## Adding Loom Videos

You can add Loom videos to your Video Showcase tool as well. Start by going to Loom, and selecting the video you want to use. Click on the “Copy Link” icon on the top right of the video.&#x20;

To add your Loom video to your Video Showcase tool, click on the green + icon next to the Video Group you want to add the video to. You will see a popup appear where you can paste the Loom URL, then click on “Save”.

Once you’ve added your Loom video, you will see if populate in the preview window on the right.

## Main Navigation Icons

* By default, the Video Showcase tool will display the YouTube icon.
* You can select different icons from the available list in the **icon** **selector**.
* Note: A future update will allow you to upload and use custom icons.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FirW9L5jkyLSl56GLHST2%2FXnip2023-04-07_16-48-12.png?alt=media&amp;token=20b9dcda-30d4-42fc-b8af-ba0ce6ec2462" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
[Click here to learn more about custom tool icons!](/engagement-widgets/conversion-tools-tm/tool-icons)

If you need an icon that is missing, please request it by sending an email to <support@chathq.io>
{% endhint %}


# Webchat

{% embed url="<https://www.youtube.com/embed/7tzocTDq5EI>" fullWidth="false" %}

{% hint style="info" %}
This engagement tool is a full replacement of HighLevel's chat widget 🎉🎉🎉
{% endhint %}

## What Is The Webchat Tools?

* Provides a way for customers and website visitors to fill out a webchat form, which sends a message into a specific HighLevel location account, and creates an sms conversation.
* All functionality of the HighLevel web chat tool is found within ChatHQ’s webchat, including:
  * Triggering workflows from new “webchat replies”
  * Robust activity logs in the contact details sections of HighLevel.
* ChatHQ’s webchat is also multi-location, so you can connect multiple different HighLevel sub-accounts to a single Engagement Widget! This works great for franchise businesses that have multiple sub-accounts in your HighLevel!<br>

## Webchat Tool Use Cases

* Lead capture on websites and funnels
* Customer support via SMS communication
* Direct contact between a website visitor and your HighLevel account
* Trigger SMS communication automation using workflows to nurture leads

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F57hNyhv8RKHI4Rvf5PQU%2FXnip2023-01-07_12-58-43.png?alt=media&amp;token=f9f07fa4-16b0-4271-b1f0-fc5a6f74ffc0" alt=""><figcaption></figcaption></figure>

## Setting Up Webchat

There are some basic settings that you can change when setting up your webchat tool that can completely change how your customers and prospects interact with you.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FjnfTrUmfRISFuLeEnTEH%2FXnip2023-01-07_13-00-01.png?alt=media&amp;token=91f3132b-ee93-49cc-94c8-831380bff30f" alt=""><figcaption></figcaption></figure>

**1. Title**

This changes the name of the webchat tool in the initial widget view. [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/title-and-panel-title)

**2. Panel Title**

This changes the text shown at the top of the webchat tool after the tool was already clicked by your website visitor or customer. [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/title-and-panel-title)

**3. Tool Visibility**

Choose when to show this engagement tool based on your current business hour configuration found in "widget settings". [For more information on this please click here to view the help article.](/engagement-widgets/conversion-tools-tm/tool-visibility)

### HighLevel Agency API Key

In order to use this tool, and many others, you will need to add your HighLevel agency API key. This key gives ChatHQ the ability to pull in data from your HighLevel including the sub-accounts (locations), teams, calendars, forms, surveys, and more!

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FTHE7fSZCgUHLz6od44vn%2FXnip2023-01-07_13-00-24.png?alt=media&amp;token=2a6c8142-5ce7-4ad2-b2b7-379fb56dee4d" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
[Click here to learn how to add your HighLevel Agency API Key to your ChatHQ Portal account!](broken://pages/-MiDsmZNssvTOsCGturl)
{% endhint %}

### Select HighLevel Location(s)

Using the location selector, you choose the HighLevel location you would like to use for your Webchat tool. *<mark style="color:red;">There are 2 different ways to configure the Webchat tool:</mark>*

#### **Single location Webchat**

Only connected to one location in your HighLevel account

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FKAZBeZmoVca1thGr1bzb%2FXnip2023-01-07_12-49-31.png?alt=media&amp;token=0abd1ac9-cfeb-440c-b1f4-159c676cfad7" alt=""><figcaption></figcaption></figure>

#### **Multi Location Webchat**

Connected to 2 or more locations in your HighLevel account

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FE7kO4I175JSRKZJwp2EF%2FXnip2023-01-07_12-51-13.png?alt=media&amp;token=a3e8ebb8-421f-4c16-ade8-55091d654d42" alt=""><figcaption></figcaption></figure>

### Hide Address

If you do not want to show your company's address, or if you use a PO Box and feel like showing that is unprofessional, you can always hide the address from view by toggling the "Hide Address" into the "ON" position.

{% hint style="warning" %}
You can **ONLY** hide the address when using "Single Location" Webchat configuration
{% endhint %}

### Customizing Your Webchat Experience

1. **Initial Message**\
   When someone opens the Webchat tool, you want to greet them and make sure they fill out and submit the form. Here you have the opportunity to say whatever you want to help get this individual to convert and become a new lead.<br>
2. **Legal Message**\
   This message informs whoever is filling out the form about legal implications after submitting, such as SMS fees or privacy notifications. This is completely customizable.<br>
3. **Display Email Field**\
   If you want to collect the prospects email, you can add and email fields

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FVKEmzPUDmkZQ9qDARdn7%2FXnip2023-01-10_18-30-41.png?alt=media&amp;token=36f1f333-d481-4b39-b490-c4e6e8d959d7" alt=""><figcaption></figcaption></figure>

**Acknowledgment Greeting**

This greeting is the small line of text that represents the header of the "success" message.

**Acknowledgment Message**

This is the body message of the "success" message where you can enter more information for your website visitor or customer after they submit the Webchat form.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FYy1w18gPuPj2ARCzzSv5%2FXnip2023-01-10_18-27-26.png?alt=media&amp;token=72b386b8-db55-411e-9710-e7557272e6a7" alt=""><figcaption></figcaption></figure>

### Testing Webchat Tool

At any point in time, you can "submit" a web chat form to test what the submission messaging looks like to your website visitor or customer. You don't even need any data in the form itself to test this, you simply hit the submit button and you will see the next view of the web chat tool.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FTgeSh0RXbxhNStGI5KaS%2FEngagement%20%E2%80%A2%20ChatHQ%20Portal%20-%2010%20January%202023%20copy.gif?alt=media&amp;token=ae45b193-0df8-43ca-9dc5-51bd7ec43f8c" alt=""><figcaption></figcaption></figure>


# Smart Popups™

{% embed url="<https://youtu.be/1CbGCpZTHfE>" fullWidth="false" %}

This guide walks you through the process of managing Smart Popups™ within your Engagement Widget™ in your ChatHQ Portal. Follow these steps to create, edit, duplicate, or delete Smart Popups™.

## Accessing Smart Popups™

1\. Navigate to the **Engagement** tab.

2\. Select your widget.

3\. Click on **Smart Popups™.**

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Fm4wTHK3NEEHxwRsFdHwO%2FSmart%20Popups_1.jpg?alt=media&amp;token=e91a1bda-4941-41e8-8f0c-0e9d1481ba0c" alt=""><figcaption></figcaption></figure>

***

## Smart Popups™ List

The list displays the following columns:

1. **Name**: The name of the Smart Popup.
2. **Status**: A green symbol for enabled popups and a red symbol for disabled ones.
3. **Folder**: The folder where the popup is stored.
4. **Details**: A quick view of the popup's configurations.
5. **Actions**: Edit, duplicate, or delete your popup.

{% hint style="info" %}
**Hint:** If you don't see any popups listed, it means you haven't created any yet.
{% endhint %}

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Fn5BF9At2aHg4IfFRH12I%2FSmart_Popups_List.jpg?alt=media&amp;token=93fcd927-4460-4367-8361-a8f47928099e" alt=""><figcaption></figcaption></figure>

***

## Smart Popups™ List Actions

### 1. Edit Smart Popups™

* Click on **Edit Popup** in the Actions column.
* Make your changes and configurations.
* Click **Save Changes.**

### 2. Duplicate Smart Popups™

* Click on **Duplicate Popup** in the Actions column.
* A clone of the popup will be created.

### 3. Delete Smart Popups™

* Click on **Delete** **Popup** in the **Actions** column.
* A pop-up will appear asking for confirmation.
* Click **Yes** to delete the prompt permanently, or **No** to cancel.

{% @arcade/embed flowId="kLPwpFv2xz739i9riFPg" url="<https://app.arcade.software/share/kLPwpFv2xz739i9riFPg>" %}

{% hint style="danger" %}
**Warning:** Deleted popups cannot be recovered.
{% endhint %}

***

### Create New Smart Popups™

1\. Click on the **Create New Popup** button located at the top-right corner.

2\. Configure your new Smart Popup™, including its name and other settings.

3\. Click **Save Changes** or **Cancel** if you change your mind.

{% hint style="info" %}
[**Click here to learn how to create Smart Popups™**](/engagement-widgets/smart-popups-tm/creating-smart-popups-tm)
{% endhint %}

{% @arcade/embed flowId="IP1rKpHwHjSSo4sK3b6R" url="<https://app.arcade.software/share/IP1rKpHwHjSSo4sK3b6R>" %}

***

## More List Options

**Search**: Use the search bar to find a Smart Popup™ by name.

**Filters**: Filter the list by name, status, folder, or details.

**Column Visibility:** Toggle on or off specific columns.

**Full-Screen Mode:** Click the full-screen toggle to view the list in full-screen. Click again to exit.

{% @arcade/embed flowId="CSJClPHAmHSMmYBwOlZD" url="<https://app.arcade.software/share/CSJClPHAmHSMmYBwOlZD>" %}

<table data-card-size="large" data-column-title-hidden data-view="cards"><thead><tr><th data-card-target data-type="content-ref"></th><th data-hidden></th><th data-hidden></th><th data-hidden></th></tr></thead><tbody><tr><td><a href="/engagement-widgets/widget-settings">Widget Settings</a></td><td></td><td></td><td></td></tr><tr><td><a href="broken://pages/RLckn8JSjBt9JFhg17as">Broken link</a></td><td></td><td></td><td></td></tr><tr><td><a href="broken://pages/mU5lauxfMVqnjTRNBbV0">Broken link</a></td><td></td><td></td><td></td></tr><tr><td><a href="broken://pages/fb9i05jZ0KW364lz0I95">Broken link</a></td><td></td><td></td><td></td></tr></tbody></table>


# Creating Smart Popups™

Creating Smart Popups™ allows you to target website visitors and current customers in many different areas of your website, sales funnel, and/or software application.

## Naming Popups

{% @arcade/embed flowId="UtxeuSIHXLwvV9E5s8pL" url="<https://app.arcade.software/share/UtxeuSIHXLwvV9E5s8pL>" %}

***

## Enable/Disable Popups

You can enable or disable your Smart Popups at any time. Once enabled, your popup will show on every page where your widget is installed unless you have configured [Display Settings](#display-settings-for-smart-popups-tm) filters. Once disabled, your popup will no longer show anywhere.

{% @arcade/embed flowId="RXB8UgyjvoLBkXPj77p4" url="<https://app.arcade.software/share/RXB8UgyjvoLBkXPj77p4>" %}

### Quick Enable/Disable Option

You can also Enable/Disable Smart Popups™ from the popup list by clicking the "status" icon.

{% @arcade/embed flowId="nQ4lUBl1g1MEtHkPfktY" url="<https://app.arcade.software/share/nQ4lUBl1g1MEtHkPfktY>" %}

***

## Display Settings

In display settings, you can configure WHERE to show your new Smart Popup™ by creating URL conditions such as **"URL Contains: /home"**. These segments and conditions can be grouped together to create powerful targeting and give you complete control over where your popups are shown.

{% @arcade/embed flowId="EhRInKQmx2rEL7uYxY43" url="<https://app.arcade.software/share/EhRInKQmx2rEL7uYxY43>" %}

### Creating Segments

Segments are the top layer for display setting conditions. Without segments, there are no conditions.

Multiple segments can be created for a single popup, and have multiple conditions in each segment. If you create multiple segments, you will need to assign the **AND/OR** function to all of the segments created.

**Meaning, the popup will only show if:**

* **ALL** of the segments are true **(AND)**
* Or **ANY** of the segments are true **(OR)**

<div><figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F7wZb1kiX4anrWAbwvhY6%2FSmart%20Popups%20-%20AND%20Segment.jpg?alt=media&amp;token=66205213-3341-4f53-b143-3e304b98310f" alt=""><figcaption></figcaption></figure> <figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FFpxLgOng5cfqbGIjB2o0%2FSmart%20Popups%20-%20OR%20Segment.jpg?alt=media&amp;token=5f097269-cb8c-4292-8512-81634bfe5e01" alt=""><figcaption></figcaption></figure></div>

### Adding Conditions to Segments

When creating segments, you are required to add 1 or more conditions to that segment.&#x20;

When adding conditions, you can add as many conditions to a single segment as you need. When you choose the function of the conditions **(AND/OR)**, all of the conditions in that segment will be assigned that function.

**Meaning, the popup will only show if:**

* **ALL** of the conditions in that segment are true **(AND)**
* Or **ANY** of the conditions in that segment are true **(OR)**

<div><figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FBxj4LIE2UzQYxTaU1HmY%2FSmart%20Popups%20-%20AND%20Conditions.jpg?alt=media&amp;token=3e490126-3439-4cc4-a11a-5cdbb0cb35ba" alt=""><figcaption></figcaption></figure> <figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FnaMEMZPfIRWcIOjUJqAs%2FSmart%20Popups%20-%20OR%20Conditions.jpg?alt=media&amp;token=d619d01c-8eed-4f99-b637-389706e7e39d" alt=""><figcaption></figcaption></figure></div>

### Important Note About Segments and Conditions:

{% hint style="info" %}
You cannot mix and match the **AND/OR** function in between or inside of segments.

* If you choose the **AND** function, that means **ALL** of the segments or conditions must will have the **AND** function.
* If you choose the **OR** function, that means **ANY** of the segments or conditions can individually control whether the popup shows or not.

**Example 1:** *(must ALL be true to show popup)*

Segment 1 <mark style="color:red;">"AND"</mark> Segment 2 <mark style="color:red;">"AND"</mark> Segment 3

**Example 2:** *(ANY can be true to show popup)*

URL Contains - support <mark style="color:red;">"OR"</mark> URL Ends With - .com <mark style="color:red;">"OR"</mark> URL Contains - /blog
{% endhint %}

***

## Cover Media

You can spice up your Smart Popups™ by adding images and videos to them, capturing more attention from your intended audience and even educating them all with the same popup!

To add images and videos to your Smart Popups™, first toggle the "Cover Media" switch to the ON position. Once you do this, you will see some new settings appear on your screen.

{% @arcade/embed flowId="376cT7dbHRQmgJIUTReM" url="<https://app.arcade.software/share/376cT7dbHRQmgJIUTReM/>" %}

{% hint style="warning" %}
**Reminder:** You cannot add images or videos to Banner Popups
{% endhint %}

### Add Images/GIFs

{% @arcade/embed flowId="pfXI6d4IUX34rfLsw818" url="<https://app.arcade.software/share/pfXI6d4IUX34rfLsw818>" %}

### Using HighLevel Media

{% @arcade/embed flowId="Pk9JZLMlJMlVwgidyVVu" url="<https://app.arcade.software/share/Pk9JZLMlJMlVwgidyVVu>" %}

### Add YouTube Videos

### Add Vimeo Videos

### Add Loom Videos

***

## Adding Text in Smart Popups™

### Introduction Text

### Body Text

***

## Linking Conversion Tools™ to Smart Popups™

### Link All Active Conversion Tools™

### Select Specific Conversion Tools™

***

## Trigger Settings

***

## Visibility Settings


# Widget Analytics


# Overview

{% hint style="warning" %}
Coming Soon!
{% endhint %}


# Building Knowledge Bases


# Admin Settings


# Knowledge Base AI


# Finished Knowledge Base


# Overview

{% hint style="warning" %}
Coming Soon!
{% endhint %}


# Overview


# HighLevel

## Connect To Highlevel

For many different ChatHQ tools and integrations we require that you integrate your HighLevel account using your agency API Key. If you are not familiar with how to access this API key, or how to use it, below you will find instructions on how to set it all up!

{% hint style="success" %}
Once you add your HighLevel agency API key to **ANY** place in your ChatHQ Portal account, it will activate across the **ENTIRE** Portal account, giving you access to all the tools and integrations that require the API key.
{% endhint %}

### HighLevel Agency API Key

* First, you need access to your HighLevel agency settings. If you do not have access, reach out to your HighLevel agency admin. If you have access, navigate to the agency settings.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FDYmTdiwOzAQxCBTkQxT3%2FXnip2022-08-26_15-15-47.png?alt=media&amp;token=deaff5a1-82ee-43f9-a7ba-e2be8e48295d" alt=""><figcaption></figcaption></figure>

* Next you want to view your agency settings, and navigate to the "API Keys" tab.

![](https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FXuScMsPpJewpJK670qz0%2FXnip2022-08-26_15-16-31.png?alt=media\&token=25a82b45-c81a-4c53-9acc-0a3735eb34e2)![](https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FaUBhJdALoFWfvWyKfMta%2FXnip2022-08-26_15-17-23.png?alt=media\&token=775aa6fc-2131-478e-bcb4-6399c5eac001)

* Here you will find a list of API keys. These keys will be separated by **"Agency API Keys"** and **"Location API Keys"**. You want to look at the **"Agency API Key"** list.
* Copy the API Key from your agency API Keys list.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FvZmwxjoZIAc4sT31SOp1%2FXnip2022-08-26_15-19-28.png?alt=media&amp;token=4db075d0-729d-4f06-989c-01f5184f1940" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Make sure you DO NOT copy any API keys that say "Old" next to it.**
{% endhint %}

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FS5rEVIJ2DvJKbesqPKmU%2FXnip2022-08-26_15-20-02.png?alt=media&amp;token=e1fffc13-0e4b-460a-8bfd-2328d2a8e045" alt=""><figcaption></figcaption></figure>

* Paste you HighLevel agency API Key in the designated area in the ChatHQ Portal and click "Save"
* You're all set! You will now have access to all tools and integrations that require the HighLevel agency API key! Your ChatHQ Portal areas should now show a green circle next to some text that reads **"Agency API Connected"** like the image below!

***

## White Label Widget Builder™ for HighLevel:

{% embed url="<https://www.loom.com/share/58fbf801da6f4ffa807b4eef31d731a4?sid=a7ba0f17-e844-4ea3-bbe0-81d88de596fb>" fullWidth="false" %}

### 1. API Key Retrieval

* For users on the $497 HighLevel Pro plan, they should get the agency level API key.
* Users on the $99 or $297 HighLevel plans need to get the location API key.
* The agency level API key can be found by going to **"Agency" ->** **"Settings" -> "API Keys"**.
* For the location level API key, the user should go to the desired location to connect to the ChatHQ account, then to **"Settings"**. In the **"Business Profile"**, the API key will be visible.

### 2. API Key Connection in ChatHQ Portal Account

* Navigate to **"Account" -> "Settings" -> "Integrations" -> "HighLevel"** and click on **"Configure"**. The agency level API key can then be connected. Once connected, a unique agency ID will be provided.

### 3. Multiple Locations Connection

* The agency ID is still provided if one location is connected. Once a location is connected, the agency ID can be retrieved.
* The JavaScript, associated with the agency ID, will only work for that specific HighLevel agency or ChatHQ portal account.

### 4. White Label Widget Builder Setup

* <mark style="color:red;">**Your ChatHQ Portal account needs to be on the top-tier subscription (Agency Plan) to utilize the White Label Widget Builder™.**</mark>
* Once on the Agency Plan, the user can go to **"Integrations" -> "Configure"** in the ChatHQ account to find the JavaScript for the account which is assigned to their agency.
* To get the White Label Widget Builder™, the user needs to copy the JavaScript and navigate back to **"Agency Settings"** in the HighLevel account.
* After pasting the JavaScript in the **"Custom JavaScript"** section <mark style="color:blue;">**(found in "Settings" -> "Company tab")**</mark>, save and refresh the screen for the JavaScript to take effect.

### 5. Adding Custom Menu Links

* The user should go to **"Custom Menu Links"** and add the URL provided in the video description or the knowledge base article.
* The user then needs to add the **"Account ID"** from the ChatHQ account to the URL.
* The user must then assign preferences for the custom menu link (can choose to show in all accounts or select specific ones, allow microphone and camera, etc).

### Custom Menu Link URL

In order to display your White Label Widget Builder™ you will need to create a custom menu link inside of you HighLevel account. You can show this custom menu link to all sub-accounts, or to specific sub-accounts using the settings when creating the custom menu link in HighLevel.

{% hint style="info" %}
Paste this URL in when creating the custom menu link:

\
**<https://editor.chatwidgets.net/>**<mark style="color:red;">\[ChatHQ Portal Account ID]</mark>
{% endhint %}

### Where to find your ChatHQ Portal account ID

Your ChatHQ Portal account ID is found by navigating to your ChatHQ Portal account, then go to **SETTINGS -> ACCOUNT**

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FBmvGCf40ohxiKnvDfWmY%2FXnip2023-07-15_21-17-41.jpg?alt=media&amp;token=69b2d021-880e-4554-b6bf-928922178355" alt=""><figcaption></figcaption></figure>

### 6. Viewing Widgets in the White Label Widget Builder™

* After setup, widgets created in specific locations can be seen in the ChatHQ account.
* These widgets will only be visible in the specific locations where they were created.


# Extendly

{% embed url="<https://www.loom.com/share/a87452be2175427c81d7b67ba2965c28?sid=156b9aee-bef9-472e-8fa2-2a18da431cf1>" fullWidth="false" %}


# Capri AI

{% hint style="warning" %}
Coming Soon!
{% endhint %}


# Overview

<table data-card-size="large" data-view="cards" data-full-width="false"><thead><tr><th></th><th></th><th></th><th data-type="content-ref"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><a href="/api-and-developer-docs/javascript-api"><mark style="color:purple;"><strong>JavaScript API</strong></mark></a></td><td>The Engagement Widget JavaScript API allows JavaScript code running on your site or app to interact with the Engagement Widget.</td><td></td><td></td><td></td><td></td></tr><tr><td><strong>Custom Tracking &#x26; Analytics</strong></td><td>Connecting widget analytics to 3rd party data tracking software like Google Analytics and Facebook Ad Events.</td><td><ul><li><a href="/api-and-developer-docs/custom-tracking-and-analytics/widget-events-in-google-analytics">Widget Events in Google Analytics</a></li><li><a href="/api-and-developer-docs/custom-tracking-and-analytics/tracking-events-from-facebook-ads">Tracking Events from Facebook Ads</a></li></ul></td><td></td><td></td><td></td></tr></tbody></table>


# JavaScript API

The **Engagement Widget JavaScript API** allows JavaScript code running on your site or app to interact with the **Engagement Widget.** The table below lists the API methods that are available on it. These JavaScript API is accessible through the `window.EngagementWidget.api` object:

<table><thead><tr><th width="237">Method</th><th width="224">Description</th><th width="225">Parameters</th><th>Return Type</th></tr></thead><tbody><tr><td>getTools</td><td>Gets the list of active tools in the Widget</td><td><em>None</em></td><td><code>Array&#x3C;ToolEntry></code></td></tr><tr><td>hideWidget</td><td>Hides the widget container</td><td><em>None</em></td><td></td></tr><tr><td>showWidget</td><td>Unhides the widget container</td><td><em>None</em></td><td></td></tr><tr><td>openWidget</td><td>Opens the widget panel</td><td><em>None</em></td><td></td></tr><tr><td>closeWidget</td><td>Closes the widget panel</td><td><em>None</em></td><td></td></tr><tr><td>toggleWidget</td><td>Opens or closes the widget panel depending on whether it is closed or open</td><td><em>None</em></td><td></td></tr><tr><td>showWelcomeMessages</td><td>Displays triggered welcome messages</td><td><em>None</em></td><td></td></tr><tr><td>hideWelcomeMessages</td><td>Hide triggered welcome messages</td><td><em>None</em></td><td></td></tr><tr><td>openWelcomeMessage</td><td>Triggers a specific welcome message</td><td><code>messageId: string</code></td><td></td></tr><tr><td>openTool</td><td>Displays a specific tool in the panel</td><td><code>toolId: string</code></td><td></td></tr></tbody></table>

***

### Type Definitions

```typescript
type ToolEntry = {
    /**
     * Tool id
     *
     * @readonly
     * @type {string}
     */
    readonly id: string;

    /**
     * Tool type
     *
     * @readonly
     * @type {ToolType}
     */
    readonly type: ToolType;

    /**
     * Tool display name
     *
     * @readonly
     * @type {string}
     */
    readonly title: string;

    /**
     * Indicates if this is the only tool of this type that may exist
     *
     * @readonly
     * @type {boolean}
     */
    readonly isSingleton: boolean;
};

/**
 * Types of engagement tools:
 * - Live Chat ('tool-livechat')
 * - Knowledge Library ('tool-knowledge-library')
 * - Booking Calendar ('tool-booking-calendars')
 * - Link Launcher ('tool-link-launcher')
 * - Form/Survey ('tool-form-survey')
 * - Webchat ('tool-webchat')
 * - Reviews ('tool-reviews')
 * - Extendly for HighLevel ('tool-support-chat')
 * - TawkTo Livechat ('tool-tawkto')
 * - Video Showcase ('tool-video-showcase')
 * - Dedicated iFrame ('tool-dedicated-iframe')
 * - Custom HTML ('tool-html')
 * - Rich Content ('tool-rich-content')
 *
 * @export
 * @typedef {ToolType}
 */
type ToolType =
    | 'tool-livechat'
    | 'tool-knowledge-library'
    | 'tool-booking-calendars'
    | 'tool-link-launcher'
    | 'tool-form-survey'
    | 'tool-webchat'
    | 'tool-reviews'
    | 'tool-support-chat'
    | 'tool-tawkto'
    | 'tool-video-showcase'
    | 'tool-dedicated-iframe'
    | 'tool-html'
    | 'tool-rich-content';
```

***

## JavaScript API Examples

This section will show you a few ways you can use the Engagement Widget's JavaScript API to go beyond what's possible with the Widget Builder in ChatHQ Portal.

{% hint style="info" %}
While these cover common scenarios, this page is far from an exhaustive list. If you feel like we're missing something feel free to add a Feature Request in our Ideas Board at <https://ideas.chathq.io>&#x20;
{% endhint %}

### Completely hide the Engagement Widget

This call will hide the main Widget panel containing the list of Enagement Tools, the Floating Action Button, and all Welcome Messages

```javascript
window.EngagementWidget.api.hideWidget()
```

### Show the Engagement Widget again after it's been hidden

This call will restore the visibility of the main Widget panel containing the list of Enagement Tools, the Floating Action Button, and Welcome Messages to the state they would be if `hideWidget()` had not been called.

```javascript
window.EngagementWidget.api.showWidget()
```

### Open the main Engagement Widget panel

This call will make the main widget panel, containing the list of Engagement Tools, visible. It will also hide the active Welcome Message, if one is visible.

```javascript
window.EngagementWidget.api.openWidget()
```

### Close the main Engagement Widget panel

This call will make the main widget panel, containing the list of Engagement Tools, invisible. If there is a an Welcome Message it will be made visible. Reasons a Welcome Message may be active include:

* The  Welcome Message is configured to show on page load and it hasn't been dismissed by the visitor
* The Welcome Message is configured to show on scroll, the visitor scrolled the configured percentage down the page and has not dimissed the Welcome Message
* The Welcome Message is configured to show after a specified number of seconds on the page that have elapsed and the visitor has not dimissed the Welcome Message
* The Welcome Message is configured to show when an element enters the viewport of the browser, the element is currently in view, and the visitor has not dimissed the Welcome Message

```javascript
window.EngagementWidget.api.closeWidget()
```

### Toggle visibility of the main Engagement Widget panel

This call will close the main Engagement Widget panel if it is currently open (equivalent to calling `closeWidget()`), and will open it if it is closed (equivalent to calling `openWidget()).`

```javascript
window.EngagementWidget.api.toggleWidget()
```

### Hide all Welcome Messages

This call will make Welcome Messages invisible, regardless of their configured triggering behaviors.

```javascript
window.EngagementWidget.api.hideWelcomeMessages()
```

### Show Welcome Messages visible again

This call will make Welcome Messages visible again after a previous call to `hideWelcomeMessages()`. Note that Welcome Messages triggering (e.g: scrolling, or time on page) configuration will still determine which Welcome Message is actually diaplayed

```javascript
window.EngagementWidget.api.showWelcomeMessages()
```


# Custom Tracking & Analytics


# Widget Events in Google Analytics

## How To Setup Widget Analytics Using GA4 & GTM

In order to setup widget analytics using Google Analytics and Google Tag Manager you will need to follow the instructions in the following help articles:

{% content-ref url="/pages/8N5Jbinkk05ON8InC1ix" %}
[1. Google Analytics & Google Tag Manager](/api-and-developer-docs/custom-tracking-and-analytics/widget-events-in-google-analytics/1.-google-analytics-and-google-tag-manager)
{% endcontent-ref %}

{% content-ref url="/pages/iTOAACOfKkmXO54AmyuF" %}
[2. GA4 Custom Events & Definitions](/api-and-developer-docs/custom-tracking-and-analytics/widget-events-in-google-analytics/2.-ga4-custom-events-and-definitions)
{% endcontent-ref %}

{% content-ref url="/pages/mTWdzQkQYjuczF8mUrYa" %}
[3. Tags & Triggers in Google Tag Manager](/api-and-developer-docs/custom-tracking-and-analytics/widget-events-in-google-analytics/3.-tags-and-triggers-in-google-tag-manager)
{% endcontent-ref %}

{% content-ref url="/pages/XNcayDa3bFJ2ovmsHwpG" %}
[4. Using the Data Layer to Define Custom Variables](/api-and-developer-docs/custom-tracking-and-analytics/widget-events-in-google-analytics/4.-using-the-data-layer-to-define-custom-variables)
{% endcontent-ref %}

{% content-ref url="/pages/3hrz03fpvHzimLZEJIYF" %}
[6. Testing Widget Analytics](/api-and-developer-docs/custom-tracking-and-analytics/widget-events-in-google-analytics/6.-testing-widget-analytics)
{% endcontent-ref %}


# 1. Google Analytics & Google Tag Manager

## Configure GA4 and GTM

You will need to set up GA4 and GTM for the specific website hosting the ChatHQ Engagement Widget you're looking to track with analytics

* **Setting Up GA4 -** <https://support.google.com/analytics/answer/9744165>
* **Setting Up GTM -** <https://support.google.com/tagmanager/answer/6103696>

## Setup GA4 Inside GTM

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FOGTfSdGxAptAlPI8FyDn%2FXnip2023-04-21_12-38-40.jpg?alt=media&amp;token=2ce33173-2692-4ccc-bdd0-830f741350f1" alt=""><figcaption></figcaption></figure>

Use GTM to host your GA4 data stream code so that all GA4 data runs through GTM into your GA4 analytics dashboard - <https://support.google.com/tagmanager/answer/9442095>


# 2. GA4 Custom Events & Definitions

## Custom Events in GA4 Admin Dashboard

Navigate to your Admin panel in Google Analytics, select the account and property you want to use when collecting widget events and data, then click the **"EVENTS"** tab.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F4kktIBhpIzoc6JDPimFF%2FXnip2023-04-24_14-47-38.jpg?alt=media&amp;token=4f616c3b-c667-4f6d-aa05-55bead862dc0" alt=""><figcaption></figcaption></figure>

In the **"EVENTS"** tab you will see all current custom events that are being recorded in your GA4 property. You will also be able to create new custom events, which is what we are going to do to collect data from the Engagement Widgets. Click the **"Create Event"** button as shown in the screenshot below to start creating new GA4 events.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FCRGZcwLu8EKlGPzFGiaK%2FXnip2023-04-24_14-48-21.jpg?alt=media&amp;token=0c8cd7c5-fcc2-4b0f-8703-6ec754fa117e" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Follow the configuration instructions below to setup your custom Engagement Widget GA4 events:**
{% endhint %}

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FiYJ70RrTJ9NDHJ6xz0Ge%2FXnip2023-04-21_12-28-53.jpg?alt=media&amp;token=490cf0a7-10f4-43a8-ac9c-accb10487fd2" alt=""><figcaption></figcaption></figure>

**Custom Event Name -** We name the events the same as the Event Values, but you can name the events however you want.

**Matching conditions -** Create a custom event when another event matches ALL of the following conditions:

1. **Parameter:** event\_name
2. **Operator:** equals
3. **Event Values: (copy exactly as seen below)**
   * widget\_opened
   * widget\_closed
   * tool\_opened
   * tool\_closed
   * welcome\_message\_clicked
   * welcome\_message\_closed
   * all\_welcome\_messages\_closed

**Parameter configuration -** Copy parameters from the source event (make sure this is checked)

## GA4 Custom Definitions for Custom Events

Next you will need to create **"Custom Definitions"** for your newly created GA4 custom events. In your Admin panel in Google Analytics, make sure you're in the same account and property you just created your custom events in, and then select the **"Custom Definitions"** tab.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FILsc9YCdk8N7C9gegQZP%2FXnip2023-04-24_14-53-53.jpg?alt=media&amp;token=68888afe-227f-4cfc-b01e-8393b3d404d0" alt=""><figcaption></figcaption></figure>

In this tab, you will see all current custom definitions for custom events that are being recorded in your GA4 property. You will also be able to create new custom definitions, which help GA4 identify and categorize your custom events by adding additional data to each event. Click the **"Create Custom Definition"** button as shown in the screenshot below to start creating new custom definitions for GA4 events.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F4NF2bOTKbeYZjZ3nEA01%2FXnip2023-04-24_14-54-31.jpg?alt=media&amp;token=5ed76cba-941b-4f3c-94bd-7b27a6649927" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Follow the configuration instructions below to setup your custom definitions for your GA4 events:**
{% endhint %}

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FFDECiy9PwWdrM9E2A1b0%2FXnip2023-04-21_12-29-18.jpg?alt=media&amp;token=23582e77-3926-4dc6-a01d-7114338ee01e" alt=""><figcaption></figcaption></figure>

#### Custom Definitions for Each Widget Event: **(copy exactly as seen below)**

* **Dimension Name -** *Widget Opened*\
  **Description -** *Engagement Widget Opened*\
  **Scope -** *Event*\
  **User Property/Parameter -** *widget\_opened*<br>
* **Dimension Name -** *Widget Closed*\
  **Description -** *Engagement Widget Closed*\
  **Scope -** *Event*\
  **User Property/Parameter -** *widget\_closed*<br>
* **Dimension Name -** *Tool Opened*\
  **Description -** *Engagement tool was opened*\
  **Scope -** *Event*\
  **User Property/Parameter -** *tool\_opened*<br>
* **Dimension Name -** *Tool Closed*\
  **Description -** *Engagement Widget Tool Closed*\
  **Scope -** *Event*\
  **User Property/Parameter -** *tool\_closed*<br>
* **Dimension Name -** *Welcome Message Clicked*\
  **Description -** *Visitor clicked a video or engagement tool inside a welcome message*\
  **Scope -** *Event*\
  **User Property/Parameter -** *welcome\_message\_clicked*<br>
* **Dimension Name -** *Welcome Message Closed*\
  **Description -** *Single welcome message was closed during a session*\
  **Scope -** *Event*\
  **User Property/Parameter -** *welcome\_message\_closed*<br>
* **Dimension Name -** *All Welcome Messages Closed*\
  **Description -** *All active welcome messages were closed during a single session*\
  **Scope -** *Event*\
  **User Property/Parameter -** *all\_welcome\_messages\_closed*


# 3. Tags & Triggers in Google Tag Manager

## GTM Tags for Custom GA4 Events

**Name your tag according to the widget event you are setting up**

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FPXnZb95fUHcAZCgoURlO%2FXnip2023-04-24_15-02-54.jpg?alt=media&amp;token=4e19d5aa-3c52-4b30-982b-b6b2a5cbadc1" alt=""><figcaption></figcaption></figure>

**Select the “Google Analytics GA4 Event” tag**

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FgHCkuHEEA33EEQobKgeS%2FXnip2023-04-24_15-00-53.jpg?alt=media&amp;token=f68848e6-c9e8-4045-ad0c-bc97a7cc0acb" alt=""><figcaption></figcaption></figure>

**Configuration tag set to “GA4”**

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FhjaiFm3plnsKiI7oBmPG%2FXnip2023-04-24_15-03-37.jpg?alt=media&amp;token=b5a52e5a-7300-4a1d-afe3-2a850e0e7616" alt=""><figcaption></figcaption></figure>

**Add "Event Name":** This should match your Event Name from above when you created the GA4 event (Example - widget\_opened)

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F5uZMw2ZSsr4oMW65eJie%2FXnip2023-04-24_15-03-49.jpg?alt=media&amp;token=4ac30ca5-a23c-41ad-8d90-cbfd73bf3956" alt=""><figcaption></figcaption></figure>

## **GTM Custom Event Triggers**

These custom event triggers will fire whenever ChatHQ sends event data into your GTM, which will then send the data from your GTM to your GA4.

**Follow the instructions and screenshots below to setup "Custom Event" triggers and apply them to your newly created tags:**

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FMRfANrS39ehVISgr4zHR%2FXnip2023-04-24_12-50-59.jpg?alt=media&amp;token=0b91db47-01b4-4e36-a1db-0bac470c5589" alt=""><figcaption></figcaption></figure>

When creating a trigger for your GTM tag, select "Custom Event"

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FbVN4UuQYS4QJ5qeYXeDM%2FXnip2023-04-24_12-51-51.jpg?alt=media&amp;token=6bf5b39c-0884-4b3f-a354-c6dd03014fcc" alt=""><figcaption></figcaption></figure>

You will need to configure your new trigger to match the Engagement Widget GA4 event your are connecting it to. For example, in the screenshot below you will see the "event name" perfectly matches the widget event associated with this trigger. You will repeate this process for every widget event you add to GA4 so that GTM knows to trigger the event when this data is passed into  the [Data Layer](#data-layer).

{% hint style="info" %}
Make sure you select the option **"All Custom Events"** when selecting when this trigger should fire!
{% endhint %}

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Ff8rZValg9ah5JDK6qXsq%2FXnip2023-04-24_12-52-07.jpg?alt=media&amp;token=fe8f982d-8ead-46ee-a563-13d39b1f5793" alt=""><figcaption></figcaption></figure>

When you have setup your Custom Event trigger properly, it should resemble the screenshot below.

{% hint style="warning" %}
**VERY IMPORTANT:** Remember, you will need a **NEW TRIGGER** for **EVERY** widget event you setup.
{% endhint %}

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FOc9KTTNLqUk5LX5QlsnR%2FXnip2023-04-24_12-51-13.jpg?alt=media&amp;token=107de8e2-3e63-4af5-b751-495ac209cfad" alt=""><figcaption></figcaption></figure>

When you are finished creating all your custom event triggers, you should have a trigger for all the follow widget events:

* widget\_opened
* widget\_closed
* tool\_opened
* tool\_closed
* welcome\_message\_clicked
* welcome\_message\_closed
* all\_welcome\_messages\_closed


# 4. Using the Data Layer to Define Custom Variables

## What is the Data Layer?

Learn more about the Data Layer and how to access/use the information found in the Data Layer here: <https://developers.google.com/tag-platform/tag-manager/web/datalayer>

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F6uVOtf15fpO1cxMQ5sS4%2FXnip2023-04-27_11-46-03.jpg?alt=media&amp;token=295c3b64-65ed-4e49-be3f-c50c697b0502" alt=""><figcaption></figcaption></figure>

## Accessing the Data Layer

In order to access the data layer and see what data is being sent from the widget into your GTM, you need to run your website in "Debug" mode using the Google Tag Assistant Chrome Extension.

**Download the Chrome Extension here:** <https://chrome.google.com/webstore/detail/tag-assistant-companion/jmekfmbnaedfebfnmakmokmlfpblbfdm?hl=en>

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FNnqyVVyfXJUeKY0TVdmo%2FXnip2023-04-27_11-47-04.jpg?alt=media&amp;token=f75eedc9-2768-4ffe-996f-85e58f6cca02" alt=""><figcaption></figcaption></figure>

### Debug With Tag Assistant Extension

Next, you will need to open your newly added Chrome extension and add the domain you have your Engagement Widget installed on.

{% hint style="info" %}
If you do not have your Google Tag Manager script installed on this website, the debugging process will not work.
{% endhint %}

Once you add your domain, you will see a screen that looks like the screenshot below, and you will start to see all actions on your website stream into the Tag Assistant.

{% hint style="warning" %}
Make sure you select the correct GTM account ID at the top of the screen so you see the correct events flowing into your Tag Assistant.
{% endhint %}

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F8pWlwUgca8qPLsBnxna5%2FXnip2023-04-27_11-56-11.jpg?alt=media&amp;token=4383c7c2-a904-4530-a8f0-5bee3fea2b9b" alt=""><figcaption></figcaption></figure>

You can learn more about using the Tag Assistant by reading Google's help docs here: <https://support.google.com/tagassistant/answer/10039345>

### Send Widget Events To Tag Assistant

Now that you have your Tag Assistant setup and you have selected the correct GTM account, any actions you perform on your website will start showing up in the **"Summary"** sidebar in Tag Assistant, including the widget events that ChatHQ sends when you interact with a ChatHQ Engagement Widget™.

The next step is to interact with the widget installed on the website that is being tracked by your Tag Assistant. By performing any of the following events, you will see the events and data show up in your Tag Assistant.

### **7 Widget Events Tracked:**

1. <mark style="color:blue;">widget\_opened</mark>
2. <mark style="color:blue;">widget\_closed</mark>
3. <mark style="color:blue;">tool\_opened</mark>
4. <mark style="color:blue;">tool\_closed</mark>
5. <mark style="color:blue;">welcome\_message\_clicked</mark>
6. <mark style="color:blue;">welcome\_message\_closed</mark>
7. <mark style="color:blue;">all\_welcome\_messages\_closed</mark>

## Identifying Data to Use

Now that we have widget events showing up in the Tag Assistant, you will need to inspect the data layer to see exactly what data can be used when setting up custom Tags in your Google Tag Manager.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FMoeMcDfAHzzpqDmsgqrM%2FXnip2023-04-27_12-05-43.jpg?alt=media&amp;token=62c34b9a-99c7-4b1a-9ed4-e89965d5e5bf" alt=""><figcaption></figcaption></figure>

### Example of Widget Event Data

Below you will see an actual JSON payload of the widget event data passed into the Google Tag Assistant. You will see many different data points that you can capture and use in your analytics for various use cases.

{% code lineNumbers="true" %}

```json5
{
  event: "tool_opened",
  gtm: {uniqueEventId: 11, start: 1682610911572},
  app: "engagement-widget",
  account: "CHATHQ ACCOUNT ID",
  widget: "YOUR WIDGET ID",
  token: "BROWSER SESSION TOKEN",
  location: {
    ancestorOrigins: {},
    href: "https://www.chathq.io/?gtm_debug=1682610910815",
    origin: "https://www.chathq.io",
    protocol: "https:",
    host: "www.chathq.io",
    hostname: "www.chathq.io",
    port: "",
    pathname: "/",
    search: {gtm_debug: "1682610910815"},
    hash: {},
    title: "Helping HighLevel agencies increase customer engagement a" +
           "nd conversions | ChatHQ"
  },
  ua: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/53" +
      "7.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36",
  contact: {
    customer_id: "YOUR CUSTOMER'S HIGHLEVEL ID
    (Only available if you have Sticky Contact turned on)",
    country: "US",
    location_id: "YOUR CUSTOMER'S HIGHLEVEL LOCATION ID
    (Only available if you have Sticky Contact turned on)"
  },
  ts: 1682611379110,
  el: "tool_item",
  tool: "tool-reviews",
  toolId: "UYRLaZjNJz4Qhzv6lnD9c"
}
```

{% endcode %}

{% hint style="info" %}
This specific event occurred when I **"Opened a Tool"** inside my Engagement Widget. You will notice at the bottom of this JSON payload, there is a **"tool"** and **"toolId"** field.

You can actually identify which tool was opened so you know exactly what actions your website visitors took before they converted!
{% endhint %}

For the next steps, I am going to identify the data variables I want to pass into my widget analytics by looking at the data layer above. I will be setting up analytics for the following data points:

* <mark style="color:red;">account: "CHATHQ ACCOUNT ID"</mark>
* <mark style="color:red;">widget: "YOUR WIDGET ID"</mark>
* <mark style="color:red;">token: "BROWSER SESSION TOKEN"</mark>
* <mark style="color:red;">el: "tool\_item"</mark>
* <mark style="color:red;">tool: "tool-reviews"</mark>
* <mark style="color:red;">toolId: "UYRLaZjNJz4Qhzv6lnD9c"</mark>


# 5. Creating Custom GTM Variables

## Custom GTM Variables

To actually get this data into your GTM and then into your GA4 account, you will need to create what's called "Custom Variables" in GTM. I will show you how to do this, and I will link to Google's help documentation if you need further assistance. By following my exact directions, you will be able to create custom variables for any and all widget event data you want to track.

{% hint style="info" %}
**IMPORTANT:** Every widget event sends potentially different data. For example, if the widget event is "widget opened" you will not see specific data for a "tool". So to get every single data point you will need to test all 7 widget events.
{% endhint %}

{% hint style="info" %}
**IMPORTANT:** ChatHQ may also add more widget events in the future, or add more data points to existing widget events. Please keep that in mind.

<mark style="color:red;">You can also request specific data and we will do our best to add it to the JSON payload.</mark>
{% endhint %}

### Creating Custom Variables

* First, you need to open the GTM Tag that you want to add custom variables to. For this example I am using the "Tool Opened" widget event tag in my GTM. When adding custom variables, you will need to identify if the variable falls under **"EVENT PARAMETERS"** or **"USER PROPERTIES".**

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FSX4M9AeFz0UEYvdgP5wz%2FXnip2023-04-27_12-53-38.jpg?alt=media&amp;token=3708e21b-cff4-4ec1-b3e8-7c79a536b8fb" alt=""><figcaption></figcaption></figure>

**Event Parameters** consist of data that refers to the widget such as:

* <mark style="color:blue;">Widget ID</mark>
* <mark style="color:blue;">Tool Name</mark>
* <mark style="color:blue;">Tool ID</mark>
* <mark style="color:blue;">Welcome Message ID</mark>
* <mark style="color:blue;">Ect</mark>

**User Properties** consist of data that refers to users and accounts such as:

* <mark style="color:blue;">User ID</mark>

* <mark style="color:blue;">Account ID</mark>

* <mark style="color:blue;">Location ID</mark>

* <mark style="color:blue;">Contact</mark>

* <mark style="color:blue;">Token</mark>

* <mark style="color:blue;">Ect</mark>

* Depending on the type of variable you're adding, you want to **"add a new row"** to that specific section as shown in the screenshot below. In this example, I am adding a custom variable in **"EVENT PARAMETERS"** for the data set **"toolId"**.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FwZ0DpE8o21lgsLeiOBHd%2FXnip2023-04-27_12-55-17.jpg?alt=media&amp;token=4371dce3-05b9-48bd-a70d-ec0428cc39f4" alt=""><figcaption></figcaption></figure>

* Next, you will need to click the small icon on the far right of the input field that looks like a Leggo with a + sign in the middle of it.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F99sSo2Yl2AtbOGW80AVw%2FXnip2023-04-27_12-55-44.jpg?alt=media&amp;token=49656778-0d77-4005-9192-b3e3d5dac7c5" alt=""><figcaption></figcaption></figure>

* Once you click that button, you will see a new screen. On this new screen, you will see a list of GTM variables. This is where you will see all the custom variables you've created moving forward. **To create a new custom variable, click the "+" sign in the top right corner of the screen.**

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FIfOHUmbQSJEQo6nwLQPT%2FXnip2023-04-27_12-56-03.jpg?alt=media&amp;token=1aead8bd-274f-4da7-8c1d-539097e97568" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Fh5xj34CAxzgVavOjdZBz%2FXnip2023-04-27_12-56-29.jpg?alt=media&amp;token=20331507-0557-4c3e-8009-228d4bc88630" alt=""><figcaption></figcaption></figure>

* Next, you need to select the category of variable you are adding to your GTM. You will need to select the **"DATA LAYER VARIABLE"** as shown in the screenshot below:

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F4ETegNDwujjE4EiG29t2%2FXnip2023-04-27_12-56-48.jpg?alt=media&amp;token=9f818cf6-13fe-42a9-bd32-472983e21cda" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FoeFa6LR3zKegC7mwMsxr%2FXnip2023-04-27_12-57-06.jpg?alt=media&amp;token=96815cd6-d670-4869-8cae-8410c07a8dd1" alt=""><figcaption></figcaption></figure>

* After selecting the **"DATA LAYER VARIABLE"** category, you will only need to configure 2 fields to finish setting up your custom variable:
  * <mark style="color:blue;">**Variable Name**</mark>
  * <mark style="color:blue;">**Data Layer Variable Name**</mark>

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F0eJBQQ37ku1N2xVswfGG%2FXnip2023-04-27_12-58-01.jpg?alt=media&amp;token=4d119e25-f33c-4f46-99ee-a148a108bb6b" alt=""><figcaption></figcaption></figure>

* After you save your new customer variable, you will now see it show up in the previously empty row you created earlier in this process. The last step is to simply add a **"PARAMETER NAME"** that will show up in your GA4 analytic dashboards and reports. You will notice in the image below that the **"PARAMETER NAME"** on the left looks clean and has no special characters like {}, and the **"VALUE NAME**" on the right is enclosed in curly brackets {} because that is the custom variable you just created in the previous steps.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FZKHdsPYQp0f2Zliots2d%2FXnip2023-04-27_12-58-38.jpg?alt=media&amp;token=a7b45ab4-844c-4a01-a6b9-a01fd1529f63" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F8CajoQXHBvOtNIjFbHKB%2FXnip2023-04-27_12-59-39.jpg?alt=media&amp;token=a1f54b0c-32a4-460b-8849-5ab2b9295205" alt=""><figcaption></figcaption></figure>

## Submit Changes

Lastly, you need to submit the changes made to your GTM and you're all done!

{% hint style="warning" %}
If you try to test before you submit your changes, you **WILL NOT** see the correct data
{% endhint %}

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FSbIy2YuKqrzvZ6RD74qG%2FXnip2023-04-27_13-01-00.jpg?alt=media&amp;token=cf018910-41c4-4208-8c4b-29942881827f" alt=""><figcaption></figcaption></figure>

## **Adding More Event Parameters**

<mark style="color:blue;">Event Parameters</mark> consist of the widget data that is collected when events are triggered in the widget. ChatHQ surfaces many different widget data points that are available to you to track and quantify. This information is found in the [<mark style="color:blue;">Data Layer</mark>](#data-layer).

* **Parameter Name -** <mark style="color:red;">widget</mark> | **Value -** <mark style="color:red;">{{Widget ID}}</mark>
  * This parameter will show up in your Google Analytics so you can identify which events came from which widget using the Widget ID, and set up filters and reports around it.
* **Parameter Name -** <mark style="color:red;">element</mark> | **Value -** <mark style="color:red;">{{UI Element}}</mark>
  * This parameter will show up in your Google Analytics so you can identify the name of the UI Element that triggered the widget event, and set up filters and reports around it.

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FdnVfzu5lvPSWAgFZUqMQ%2FXnip2023-04-24_12-50-05.jpg?alt=media&amp;token=715466f1-f8ad-47f3-affa-9780645b837c" alt=""><figcaption></figcaption></figure>

## **Adding More User Properties**

<mark style="color:blue;">User Properties</mark> consist of the user data that is collected when events are triggered in the widget. ChatHQ surfaces many different user data points that are available to you to track and quantify. This information is found in the [<mark style="color:blue;">Data Layer</mark>](#data-layer).

* **Property Name -** <mark style="color:red;">contactId</mark> | **Value -** <mark style="color:red;">{{Contact ID}}</mark>
  * This user property will show up in your Google Analytics so you can identify the Contact ID of the individual using your widget, and set up filters and reports around it. This works GREAT when using your widget in your HighLevel for support!
* **Parameter Name -** <mark style="color:red;">locationId</mark> | **Value -** <mark style="color:red;">{{Location ID}}</mark>
  * This user property will show up in your Google Analytics so you can identify the Location ID of the individual using your widget, and set up filters and reports around it. This works GREAT when using your widget in your HighLevel for support!

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FIhjvrvr4QMegvA0KA8Kk%2FXnip2023-04-24_12-50-35.jpg?alt=media&amp;token=2941f331-a124-48b4-ae4b-720a908d5509" alt=""><figcaption></figcaption></figure>


# 6. Testing Widget Analytics

## Test & Confirm

<figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FTvCg7RBOvgbCnZnKKmIp%2FXnip2023-04-21_13-32-13.jpg?alt=media&amp;token=409abe29-83a0-4269-b687-caa80ce8efec" alt=""><figcaption></figcaption></figure>

Test widget events by going to the website where the widget is installed, and test different events while watching Google Analytics in “Realtime” mode. You should see events show up in the "events" section of your realtime analytics dashboard, just like in the screenshot.


# Tracking Events from Facebook Ads

{% embed url="<https://www.youtube.com/embed/dVeEdDEZpB8>" fullWidth="true" %}


# CSS and JavaScript


# Floating Action Button (FAB)

Change the behavior of the "pulse" animation on the Engagement Widget trigger button

{% hint style="success" %}
When adding the widget inside HighLevel, copy the CSS code only (*everything except the \<style> and \</style> tags*) and paste it inside your agency's *Custom CSS* section instead of the *Custom Javascript* section.
{% endhint %}

### Disable FAB Animation

Add the following style tag right after the widget installation script to completely disable the "pulse" animation on the Engagement Widget's trigger button:

```html
<style>
#engagement-widget-fab-wrapper::before {
    animation: unset;
}
</style>
```

### Set Number of FAB "Pulses"

Add the following style tag right after the widget installation script to keep the animation but limit it to only a number of "pulses" (replace the number 3 below with your desired number of "pulses"):

```html
<style>
#engagement-widget-fab-wrapper::before {
    animation-iteration-count: 3;
}
</style>
```


# Support Options

## Need Customer Support?

If you are in need of customer support, we recommend watching the videos here to learn how to get in touch with the ChatHQ team about your support inquiry.

{% hint style="danger" %}
**IMPORTANT:** ChatHQ is a small software startup. We work as hard as we can to help resolve your customer support issues, and bring you the best customer experience possible!
{% endhint %}

***

## 24/7 Livechat Support

{% hint style="info" %}
**Livechat support coming very soon!**

How will livechat support work?

* ChatHQ customers can speak to live agents to get support for their ChatHQ Portal accounts, products, features, and billing.
* **AND** we will be offering **white label livechat support** to all ChatHQ customers <mark style="color:red;">**(on the $297/mo AGENCY plan)**</mark> you can rest assured that your customers will be able to build their own ChatHQ assets, white labeled under your brand, and get the support they need while doing it!
  {% endhint %}

***

## Support Ticketing

{% embed url="<https://www.loom.com/share/202aa2ba159f4d5b883486a306c6b80e?sid=284ba7e5-7ac4-4523-9d4b-f4e5b3092443>" fullWidth="false" %}

***

## Bug Reports

{% embed url="<https://www.loom.com/share/a5b483c547b44e5285e4c6732664ac53?sid=7a231ad9-06bc-406e-aad9-7791980f39c9>" fullWidth="false" %}

***

## Related Help Articles

<table data-card-size="large" data-view="cards" data-full-width="false"><thead><tr><th></th><th></th><th></th><th data-type="content-ref"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><a href="/learning-the-portal/billing-management"><mark style="color:purple;"><strong>Billing Management</strong></mark></a></td><td>How to upgrade, downgrade, add payment methods, and more!</td><td></td><td></td><td></td><td></td></tr><tr><td><a href="/getting-started/ideas-roadmap-and-announcements"><mark style="color:purple;"><strong>Submit Product Ideas</strong></mark></a></td><td>How to help shape ChatHQ by sending us your product ideas and voting on ideas submitted by others.</td><td></td><td></td><td></td><td></td></tr><tr><td><a href="broken://pages/yEYLgeju9RBS26r3bp8t"><mark style="color:purple;"><strong>View Product Roadmap</strong></mark></a></td><td>How to view ChatHQ's product roadmap so you can see what's coming up next!</td><td></td><td></td><td></td><td></td></tr><tr><td><a href="broken://pages/MvH9HTTLNVzpeZl0ljmM"><mark style="color:purple;"><strong>Follow Recent Product Announcements</strong></mark></a></td><td>How to stay up to date with all of ChatHQ's recent announcements regarding products, features, and the company!</td><td></td><td></td><td></td><td></td></tr></tbody></table>