Skip to main content
Once you have created a chat widget, you need to install it on the pages where you want it to appear. The widget can be added to HoopAI-hosted funnels and websites in a few clicks, or installed on any external site using a small JavaScript snippet.

​
Installing on a HoopAI funnel or website

​
Add to all pages of a funnel or website

This is the easiest installation method and applies the widget to every page in the funnel or website automatically.
1

Open the funnel or website in Sites

Navigate to Sites > Funnels or Sites > Websites and click on the funnel or website.
2

Go to the Settings tab

Click the Settings tab inside the funnel or website editor.
3

Select your chat widget

In the settings panel, find the Chat Widget dropdown. Select the widget you want to apply.
4

Save

Click Save. The widget is now active on every page of that funnel or website.

​
Add to a specific page only

To add the widget to one page without applying it across the entire funnel or website:
1

Get the widget embed code

Go to Sites > Chat Widget, find your widget, click the three-dot icon, and select Edit. Click Get Code in the top-right corner to copy the JavaScript snippet.
2

Open the funnel step or website page

Navigate to the specific funnel step or website page in the builder.
3

Open Tracking Code settings

In the page editor, look for the Tracking Code or Custom Code settings. This is typically in the page or step settings panel.
4

Paste in the Footer section

Paste the widget code into the Footer Tracking field. This ensures the widget loads after the rest of the page content, which is best for performance.
5

Save the page

Save the page. The widget will now appear only on that specific page.

​
Installing on an external website

The chat widget can be installed on any website that allows you to add custom HTML or JavaScript to the page. Use this method for sites built on Squarespace, GoDaddy, Wix, Webflow, Shopify, or any other platform.
1

Get the embed code

Go to Sites > Chat Widget, click the three-dot icon on your widget, and select Edit. Click Get Code in the top-right corner to copy the JavaScript snippet.
2

Add the code to your site's footer

Log in to your website’s admin panel and navigate to the custom code or header/footer settings:
  • Squarespace: Settings > Advanced > Code Injection > Footer
  • Wix: Settings > Custom Code > Add Custom Code (select “Body - End”)
  • GoDaddy Website Builder: Settings > Custom Code > Footer
  • Webflow: Project Settings > Custom Code > Footer Code
  • For other platforms, look for a “Custom HTML,” “Footer code,” or “Script injection” option in site settings.
3

Paste the code and save

Paste the widget snippet into the footer code section. Save or publish the changes.
4

Test the installation

Open your website in a browser (not logged into the admin) and confirm the chat widget bubble appears in the expected position on the page.

​
Installing on WordPress via the LeadConnector plugin

WordPress users can install the widget without touching any code by using the LeadConnector plugin.
1

Install the LeadConnector plugin

Log in to your WordPress admin dashboard. Go to Plugins > Add New and search for LeadConnector. Click Install Now, then Activate.
2

Sign in to your account

Click LeadConnector in the WordPress left sidebar. Click Sign In and log in with your HoopAI account credentials.
3

Select the chat widget

After signing in, your widgets will be listed. Select the widget you want to display on your WordPress site.
4

Save

Save the plugin settings. The chat widget will now appear on all pages of your WordPress site.

​
Verifying the installation

After installing the widget, verify it is working correctly:
  1. Open the page in a private or incognito browser window (to avoid any cached or admin-only views)
  2. Confirm the chat bubble appears in the correct position on the page
  3. Click the bubble to open the chat window and verify the welcome message and form fields appear correctly
  4. Submit a test message and confirm a new contact or conversation appears in your HoopAI account
If the widget does not appear, check whether your site has a cookie consent banner that must be accepted before the widget loads. The chat widget will not display until cookie consent has been granted. Also confirm the embed code is placed in the footer (before the closing </body> tag) rather than the header.

​
Managing multiple widgets across sites

You can create multiple widgets in the Chat Widget section — one for each site, page, or use case — and install different widgets on different pages. Each widget has its own settings, so you can use a Live Chat widget on a high-intent sales page and an SMS / Email Chat widget on a general blog, for example.
After installation, click the Clone option in the widget’s three-dot menu to create a copy of the widget. Use the clone as a starting point for a new variation so you do not have to rebuild widget settings from scratch each time.
Last modified on March 5, 2026