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

# Install Web Widget: Live Chat for Your Site

> Embed the Unecast Web Widget to let visitors contact you via Live Chat - all from a single button on your site.

The Web Widget is an embeddable chat button that sits on your website and lets visitors start a conversation at ease. Incoming messages land in your Universal Inbox, so your team handles them in one place without switching between apps.

<Note>
  The Web Widget is available on all plans. Your unique Widget ID is shown on the **Installation** tab inside **Settings → Web Widget**.
</Note>

## Configuration options

Before you paste a single line of code, configure the widget to match your brand and workflow. Everything is done visually - no coding required.

<AccordionGroup>
  <Accordion title="Customize brand colours and logo">
    Upload your company logo and pick a primary colour that matches your website. The widget button, header, and send button all reflect your chosen colour automatically.
  </Accordion>

  <Accordion title="Set widget position">
    Place the widget in the **bottom-right** or **bottom-left** corner of the screen. Choose the position that avoids overlapping with your own navigation or cookie banners.
  </Accordion>

  <Accordion title="Add a welcome greeting message">
    Write a short message that appears when a visitor opens the widget - for example, "Hi! 👋 How can we help you today?" A friendly greeting increases the chance visitors start a conversation.
  </Accordion>

  <Accordion title="Add personalised links">
    Embed up to three custom links inside the widget - such as an appointment booking page, a newsletter sign-up form, or your FAQ. This turns the widget into a mini navigation hub as well as a messaging entry point.
  </Accordion>

  <Accordion title="White-label option (Paid)">
    Remove the "Powered by Unecast" branding from the widget entirely. Available as an add-on on paid plans — see [Plans & Pricing](/plans-and-pricing) for details — the white-label option keeps visitors focused on your brand, not Unecast.
  </Accordion>
</AccordionGroup>

## Install the widget on your website

<Steps>
  <Step title="Open Widget Settings">
    In Unecast, go to **Settings → Web Widget**. If this is your first time, click **Create Widget** to begin.
  </Step>

  <Step title="Configure your widget">
    Work through each tab - **Channels**, **Design**, and **Greeting** - to select your channels, upload your logo, set your brand colour, and write your welcome message.
  </Step>

  <Step title="Preview in real time">
    Use the live preview panel on the right to see exactly how the widget will look and behave before you publish it. Test each channel button to confirm the routing is correct.
  </Step>

  <Step title="Copy the installation snippet">
    Go to the **Installation** tab and click **Copy** to copy the JavaScript snippet to your clipboard.
  </Step>

  <Step title="Paste the snippet into your website HTML">
    Open your website's HTML and paste the snippet just before the closing `</body>` tag. The widget loads asynchronously and will not slow down your page.
  </Step>

  <Step title="For CMS platforms">
    If you use a CMS (WordPress, Shopify, Wix, and similar), paste the snippet into the site-wide footer or custom code section — see the platform-specific instructions below.
  </Step>

  <Step title="Verify the widget is live">
    Refresh your website in a new browser tab. The Unecast widget button should appear in the corner you selected. Click it to confirm all channels open correctly.
  </Step>
</Steps>

## JavaScript snippet

Paste this snippet into your website just before the closing `</body>` tag, replacing `YOUR_WIDGET_ID` with the ID shown on the **Installation** tab in **Settings → Web Widget**.

```html theme={null}
<!-- AI Chat Widget -->
    <script>
      window.aiChatConfig = {
       siteId: "#####",
        channelId:"#####",
        url: "https://flow.unecast.com",
      };
    </script>
<script src="https://flow.unecast.com/widget/widget.js" async></script>
```

## Platform-specific installation

<Tabs>
  <Tab title="WordPress">
    The simplest method is to use a plugin that injects code into the site footer.

    1. In your WordPress dashboard, go to **Appearance → Theme File Editor** (or use a plugin such as **Insert Headers and Footers**).
    2. Locate `footer.php` and paste the snippet just before `</body>`.
    3. Save your changes and clear any caching plugin you use.

    Alternatively, in the WordPress block editor, add a **Custom HTML** block to a page and paste the snippet there if you only want the widget on specific pages.
  </Tab>

  <Tab title="Shopify">
    1. In your Shopify admin, go to **Online Store → Themes → Actions → Edit Code**.
    2. Open `layout/theme.liquid`.
    3. Paste the snippet just before the closing `</body>` tag.
    4. Click **Save**. The widget appears on every page of your store immediately.
  </Tab>

  <Tab title="Wix">
    1. In the Wix Editor, go to **Settings → Custom Code** (found under the **Advanced** section).
    2. Click **Add Custom Code** and paste the snippet.
    3. Set the placement to **Body - end** and apply it to **All pages**.
    4. Click **Apply** and publish your site.
  </Tab>
</Tabs>

<Tip>
  Enable the AI Agent as a fallback responder on your Live Chat channel. When your team is offline, the AI handles incoming questions instantly - so visitors always get a response, even at 2 am.
</Tip>

## Next steps

<CardGroup cols={2}>
  <Card title="Configure Live Chat" icon="comments" href="/features/live-chat">
    Set up automated greetings, away messages, and routing rules for your Live Chat channel.
  </Card>

  <Card title="Connect WhatsApp" icon="whatsapp" href="/setup/whatsapp-api-setup">
    Add a WhatsApp number so visitors can start a WhatsApp conversation directly from your widget.
  </Card>

  <Card title="Set up the AI Agent" icon="robot" href="/features/ai-agent">
    Train your AI Agent to handle common questions and qualify leads automatically.
  </Card>

  <Card title="Universal Inbox" icon="inbox" href="/features/universal-inbox">
    See how all widget conversations appear alongside your other channels in one unified inbox.
  </Card>
</CardGroup>