> ## Documentation Index
> Fetch the complete documentation index at: https://help.hoopai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Installing the chat widget

> Add the HoopAI chat widget to funnels, websites, WordPress sites, and any external platform using the embed code.

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.

<Steps>
  <Step title="Open the funnel or website in Sites">
    Navigate to **Sites > Funnels** or **Sites > Websites** and click on the funnel or website.
  </Step>

  <Step title="Go to the Settings tab">
    Click the **Settings** tab inside the funnel or website editor.
  </Step>

  <Step title="Select your chat widget">
    In the settings panel, find the **Chat Widget** dropdown. Select the widget you want to apply.
  </Step>

  <Step title="Save">
    Click **Save**. The widget is now active on every page of that funnel or website.
  </Step>
</Steps>

### Add to a specific page only

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

<Steps>
  <Step title="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.
  </Step>

  <Step title="Open the funnel step or website page">
    Navigate to the specific funnel step or website page in the builder.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="Save the page">
    Save the page. The widget will now appear only on that specific page.
  </Step>
</Steps>

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

<Steps>
  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="Paste the code and save">
    Paste the widget snippet into the footer code section. Save or publish the changes.
  </Step>

  <Step title="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.
  </Step>
</Steps>

## Installing on WordPress via the HoopAI plugin

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

<Steps>
  <Step title="Install the HoopAI plugin">
    Log in to your WordPress admin dashboard. Go to **Plugins > Add New** and search for **HoopAI**. Click **Install Now**, then **Activate**.
  </Step>

  <Step title="Sign in to your account">
    Click **HoopAI** in the WordPress left sidebar. Click **Sign In** and log in with your HoopAI account credentials.
  </Step>

  <Step title="Select the chat widget">
    After signing in, your widgets will be listed. Select the widget you want to display on your WordPress site.
  </Step>

  <Step title="Save">
    Save the plugin settings. The chat widget will now appear on all pages of your WordPress site.
  </Step>
</Steps>

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

<Note>
  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.
</Note>

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

<Tip>
  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.
</Tip>

## Multiple chat widgets on the same website

You can install more than one chat widget on the same website by placing different widget embed codes on different pages:

* Use one widget on sales pages (e.g., Live Chat for real-time conversion support)
* Use a different widget on support pages (e.g., SMS/Email Chat for async ticket capture)
* Use a third widget on blog pages (e.g., AI Chat for automated FAQ responses)

Each widget operates independently with its own settings, appearance, and routing rules. Only one widget should be active per page — placing two widget scripts on the same page may cause conflicts.

<Note>
  If you need a single page to offer multiple channels, use the All-in-One Chat widget type instead of installing multiple widgets on the same page.
</Note>

## Facebook, Instagram, and WhatsApp channel widgets

In addition to the standard chat widget, you can create channel-specific widgets that connect visitors directly to Facebook Messenger, Instagram DM, or WhatsApp:

1. In **Sites > Chat Widget**, click **+ New Widget**
2. Select the channel type: **Facebook Messenger**, **Instagram**, or **WhatsApp**
3. Configure the widget appearance and connect the corresponding social account (the integration must be active in Settings > Integrations)
4. Copy the embed code and install it on your site using the same methods described above

Channel widgets display the platform icon (Messenger, Instagram, or WhatsApp logo) as the chat bubble, signaling to visitors which channel they will be using.

<Tip>
  WhatsApp widgets are especially effective for international audiences where WhatsApp is the dominant messaging platform. The widget opens a WhatsApp conversation with your business number pre-filled.
</Tip>