LogoLogo
  • 🏠Getting Started
    • Important
    • Ideas, Roadmap, & Announcements
    • ChatHQ Affiliate Program
    • White Label Resources
  • 👋Learning The Portal
    • Overview
    • Profile Settings
    • Your Account
    • Engagement
    • Knowledge Bases
    • Conversations
    • Account Settings
    • Billing Management
  • 🚀Engagement Widgets™
    • Overview
    • Installing Widgets
    • Widget Settings
      • Main Settings
      • Widget Window
      • Office Hours
      • Widget Branding
    • Conversion Tools™
      • Add, Reorder, and Delete Tools
      • Single vs Multi-Tool Display
      • Title & Panel Title
      • Tool Visibility
      • Tool Icons
      • Tool Library
        • Advanced Livechat
        • Booking Calenders
        • Custom HTML
        • Dedicated iFrame
        • Extendly for HighLevel
        • Facebook Messenger
        • Forms/Surveys
        • Knowledge Library
        • Link Launcher
        • Reviews
        • Rich Content
        • Tawk.To Livechat
        • Video Showcase
        • Webchat
    • Smart Popups™
      • Creating Smart Popups™
    • Widget Analytics
  • 📖Knowledge Base Builder™
    • Overview
    • Building Knowledge Bases
    • Admin Settings
    • Knowledge Base AI
    • Finished Knowledge Base
  • 💬Advanced Livechat™
    • Overview
  • 🔄Integrations
    • Overview
    • HighLevel
    • Extendly
    • Capri AI
    • Tawk.To
  • 💪API & Developer Docs
    • Overview
    • JavaScript API
    • Custom Tracking & Analytics
      • Widget Events in Google Analytics
        • 1. Google Analytics & Google Tag Manager
        • 2. GA4 Custom Events & Definitions
        • 3. Tags & Triggers in Google Tag Manager
        • 4. Using the Data Layer to Define Custom Variables
        • 5. Creating Custom GTM Variables
        • 6. Testing Widget Analytics
      • Tracking Events from Facebook Ads
    • CSS and JavaScript
      • Floating Action Button (FAB)
  • 🆘Customer Support
    • Support Options
Powered by GitBook
On this page
  • HighLevel Agency Install
  • HighLevel Funnels & Websites Install
  • Wordpress Install
  • Google Tag Manager (GTM) Install

Was this helpful?

  1. Engagement Widgets™

Installing Widgets

PreviousOverviewNextWidget Settings

Last updated 1 year ago

Was this helpful?

HighLevel Agency Install

Once installed, your engagement widget will show up inside of every sub account (location) and the agency area.


HighLevel Funnels & Websites Install

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

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

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 so we can look into the issue for you!


Google Tag Manager (GTM) Install

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.

Engagement Widget Installation Script for GTM
<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', '');
        script.setAttribute('data-container', '#engagement-widget-container');
        document.body.appendChild(script);
    }());
</script>
🚀