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

# Chat widget

> Add a real-time chat widget to your website or funnel pages to capture leads and support visitors.

The Chat Widget lets you instantly capture visitor details from any webpage and route conversations to your team or automations. Every interaction creates or updates a contact record in your account, keeping lead data centralized.

<Frame caption="Chat Widget section in Sites">
  <img src="https://mintcdn.com/hoopai-84ec0cdc/WAml1mOrQ-Qs9CGD/images/sites-chat-widget-overview-1.png?fit=max&auto=format&n=WAml1mOrQ-Qs9CGD&q=85&s=c2f26f3c1f2ed5ad0e5f8ade24d60bcd" alt="Chat Widget overview" width="1134" height="439" data-path="images/sites-chat-widget-overview-1.png" />
</Frame>

## Widget types

<AccordionGroup>
  <Accordion title="All-in-One Chat">
    Combines multiple conversation channels in a single widget. Best for smaller teams that want to manage all chat types from one place.
  </Accordion>

  <Accordion title="SMS / Email Chat">
    Collects visitor contact info and creates them as a contact for you to reply to later. Best for teams that cannot respond immediately.
  </Accordion>

  <Accordion title="Live Chat">
    Enables real-time two-way conversation directly in the chat bubble. Best for larger teams with someone available to respond instantly.
  </Accordion>

  <Accordion title="Facebook">
    Routes conversations through Facebook Messenger from your website. Messages are delivered to your connected Facebook Page.
  </Accordion>

  <Accordion title="Instagram">
    Routes conversations through Instagram Direct from your website. Messages are delivered to your connected Instagram Business account.
  </Accordion>

  <Accordion title="WhatsApp">
    Routes conversations to WhatsApp. Requires a WhatsApp number connected in Settings.
  </Accordion>

  <Accordion title="Voice AI">
    Connects visitors to a Voice AI Agent for audio-based inquiries — a great option for smaller teams that receive frequent call requests.
  </Accordion>
</AccordionGroup>

## Creating a chat widget

<Steps>
  <Step title="Navigate to Sites > Chat Widget">
    Click **Sites** in the left sidebar, then select **Chat Widget**. Click **+ New**.
  </Step>

  <Step title="Select the widget type">
    Choose from SMS/Email, Live Chat, All-in-One, Facebook, Instagram, WhatsApp, or Voice AI.
  </Step>

  <Step title="Customize the Style tab">
    Configure the chat prompt, chat icon, color theme, welcome message, return visitor message, avatar image, widget position on the page, and widget dimensions.
  </Step>

  <Step title="Customize the Chat Window tab">
    Set the title, intro message, contact form fields, call-to-action redirects, prefilled message text, notification sounds, and HIPAA consent checkbox. For Live Chat, configure assigned/closed messages and business hours.
  </Step>

  <Step title="Customize the Messaging tab">
    Set the widget language and configure acknowledgment messages, feedback messages, and the chat-ended message. Customize the acknowledgment icon and placeholder color.
  </Step>

  <Step title="Save">
    Click **Save**. Changes are applied immediately to any live instances of the widget already installed on websites.
  </Step>
</Steps>

<Frame caption="Creating and customizing a chat widget">
  <img src="https://mintcdn.com/hoopai-84ec0cdc/WAml1mOrQ-Qs9CGD/images/sites-chat-widget-create-1.png?fit=max&auto=format&n=WAml1mOrQ-Qs9CGD&q=85&s=36964bebf60477d56ba712f30d70ec8c" alt="Chat Widget creation" width="1150" height="378" data-path="images/sites-chat-widget-create-1.png" />
</Frame>

## Installing the chat widget

<Frame caption="Installing the chat widget on a funnel or website">
  <img src="https://mintcdn.com/hoopai-84ec0cdc/WAml1mOrQ-Qs9CGD/images/sites-chat-widget-install-1.png?fit=max&auto=format&n=WAml1mOrQ-Qs9CGD&q=85&s=4a7d846919d58fa3658aee7c6ccd5405" alt="Chat Widget installation" width="1614" height="629" data-path="images/sites-chat-widget-install-1.png" />
</Frame>

<AccordionGroup>
  <Accordion title="Add to all pages of a funnel or website">
    Open the funnel or website in Sites, go to the **Settings** tab, select your chat widget from the **Chat Widget** dropdown, and click **Save**. This adds the widget to every page.
  </Accordion>

  <Accordion title="Add to a specific page">
    Click the three-dot icon on your widget and select **Edit**. Click **Get Code** in the top-right corner. Copy the code and paste it into the **Footer Tracking** section of the specific funnel step or website page's Tracking Code settings.
  </Accordion>

  <Accordion title="Add to an external website">
    Copy the widget code (as above) and paste it into your external site's header or footer. For Squarespace, GoDaddy, and similar platforms, use the Custom Code / HTML embed section.
  </Accordion>

  <Accordion title="Add to WordPress via plugin">
    In WordPress, go to **Plugins > Add New** and search for **HoopAI**. Install and activate the plugin. Click **HoopAI** in the left menu and sign in to your account. Your chat widgets will be available automatically.
  </Accordion>
</AccordionGroup>

<Note>
  The chat widget only loads after a visitor has accepted the cookie consent prompt on your funnel or website. Make sure cookie consent is configured if you use the widget for lead capture.
</Note>

## Widget management

Use the three-dot icon on any widget in the Chat Widget list to:

* **Edit** — modify the widget's settings, style, and messages
* **Clone** — create an identical copy of the widget including all images and settings
* **Delete** — permanently remove the widget (this cannot be undone)

<Tip>
  Use an **All-in-One Chat** widget if your audience reaches you through multiple channels. It gives visitors a single button to choose how they want to connect, reducing friction and increasing conversion.
</Tip>