Install Web Widget: Live Chat for 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.

The Web Widget is available on all plans. Your unique Widget ID is shown on the Installation tab inside Settings → Web Widget.

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.

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.

Set widget position

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.

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.

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 for details — the white-label option keeps visitors focused on your brand, not Unecast.

Open Widget Settings

In Unecast, go to Settings → Web Widget. If this is your first time, click Create Widget to begin.

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.

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.

Copy the installation snippet

Go to the Installation tab and click Copy to copy the JavaScript snippet to your clipboard.

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.

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.

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.

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.

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

WordPress
Shopify
Wix

The simplest method is to use a plugin that injects code into the site footer.

In your WordPress dashboard, go to Appearance → Theme File Editor (or use a plugin such as Insert Headers and Footers).
Locate footer.php and paste the snippet just before </body>.
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.

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

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.

Next steps

Configure Live Chat

Set up automated greetings, away messages, and routing rules for your Live Chat channel.

Connect WhatsApp

Add a WhatsApp number so visitors can start a WhatsApp conversation directly from your widget.

Set up the AI Agent

Train your AI Agent to handle common questions and qualify leads automatically.

Universal Inbox

See how all widget conversations appear alongside your other channels in one unified inbox.

Get Started

Core Features

Integrations

Channels & Setup

Security & Compliance

Install Web Widget: Live Chat for Your Site

Configuration options

Install the widget on your website

JavaScript snippet

Platform-specific installation

Next steps

Configure Live Chat

Connect WhatsApp

Set up the AI Agent

Universal Inbox

​Configuration options

​Install the widget on your website

​JavaScript snippet

​Platform-specific installation

​Next steps

Configure Live Chat

Connect WhatsApp

Set up the AI Agent

Universal Inbox

Configuration options

Install the widget on your website

JavaScript snippet

Platform-specific installation

Next steps