# 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](https://docs.chathq.io/engagement-widgets/broken-reference) 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**