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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.chathq.io/engagement-widgets/installing-widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.