---
title: How to install the KaoJai.ai Chat Widget on your website
description: Create a Chat Widget in Integrations, copy its setup code, and add
  it to your website so messages arrive in your Unified Inbox.
date: 2026-09-04
author: KaoJai.ai Team
image: /_astro/cover-en.B2ZLiQGg.png
related_videos: []
tags:
  - webchat
  - live-chat
  - unified-inbox
  - website
  - kaojai-ai
unlisted: false
---

People may already be visiting your website, but still hesitate to ask a question because they have to open another app or find a separate contact channel. The Chat Widget lets visitors start a conversation directly from your website, while messages arrive in the same **KaoJai.ai Unified Inbox** as your other channels.

This guide covers the full path from creating a widget to testing the first message. It works with any website that lets you add custom code, including WordPress, Shopify, company websites, and landing pages.

## The short version

| Step | What to do | Result |
| --- | --- | --- |
| 1 | Open **Integrations > Webchat** in KaoJai Admin | Ready to create a widget |
| 2 | Name the widget and select **Add widget** | A snippet connected to your workspace |
| 3 | Copy the setup code | A ready-to-paste snippet |
| 4 | Paste it before the closing `</body>` tag and publish | Visitors can start a chat |

## 1. Create a Chat Widget in KaoJai Admin

1. Open KaoJai Admin and choose **Integrations**.
2. Select the **Webchat** card.
3. Give the widget a name that tells you where it will be used, such as `Main website`, `Campaign landing page`, or `Contact page`.
4. Select **Add widget**.

Every widget has its own `Widget ID`. This makes it easy to use separate widgets for different websites or campaigns, see where a conversation started, and remove one widget without affecting the others.

## 2. Copy the setup code

After the widget is created, select **Copy code** on the widget you want to install. The snippet already includes three important values:

- `data-base-url` is the KaoJai.ai message endpoint.
- `data-tenant-id` identifies the workspace that receives the conversation.
- `data-widget-id` identifies the widget you created.

The code looks like this. This example shows the format only; use the code copied from Admin so the workspace and widget IDs are correct.

```html
<script
  src="https://unpkg.com/@kaojai-ai/chat-widget@0.3.34/dist/chat-widget.global.js"
  data-base-url="https://hook.kaojai.ai"
  data-tenant-id="YOUR_TENANT_ID"
  data-widget-id="YOUR_WIDGET_ID"
  data-locale="en"
></script>
```

Do not edit the `tenant_id` or `widget_id` yourself, and do not add a password, API key, or secret to this snippet.

## 3. Add the code to your website

Paste the snippet before the closing `</body>` tag, then save or publish the page. A basic HTML page might look like this:

```html
<main>
  <h1>Our services</h1>
</main>

<!-- Paste the Chat Widget here -->
<script
  src="https://unpkg.com/@kaojai-ai/chat-widget@0.3.34/dist/chat-widget.global.js"
  data-base-url="https://hook.kaojai.ai"
  data-tenant-id="YOUR_TENANT_ID"
  data-widget-id="YOUR_WIDGET_ID"
  data-locale="en"
></script>
</body>
```

If you use a website builder or CMS, look for **Custom Code**, **Footer Code**, or **Code before `</body>`**. Menu names vary, but the principle is the same: the script must load on the page where you want the chat button to appear.

## 4. Test the first message

After publishing, open the page in an incognito window or another browser. Select the chat button and send a test message.

Return to **Chat Inbox** in KaoJai Admin and check that the conversation arrived. Your team can continue from the same inbox and use the AI and workflows configured for your other channels.

## Delete a widget you no longer use

Open **Integrations > Webchat** and select **Delete** on the widget. Deleting it stops new messages from that widget's code, while existing conversations remain available.

If the old snippet is still embedded on your website, the button may still appear but it will not accept new messages. Remove the old snippet from the website as well. If you need the widget again later, create a new one and install its new code.

## Quick troubleshooting

### The chat button does not appear

Check that the page was published, that the script is present in the actual HTML, and that your website security policy is not blocking scripts from `unpkg.com`. Browser DevTools can show errors in the Console.

### The button appears but messages do not reach the inbox

Make sure the code belongs to a widget with an **Active** status and that `data-tenant-id` and `data-widget-id` were not changed after copying. A deleted widget cannot receive new messages.

### I want to use it on several websites

Create one widget per website or campaign and use each widget's code in the matching place. Clear widget names make ongoing management and troubleshooting easier.

## Frequently asked questions

### What kind of websites support the Chat Widget?

Any website that lets you add JavaScript or custom HTML can use it, including custom-built sites, WordPress, Shopify, landing pages, and other website platforms with a footer-code area.

### Does the setup code contain a secret?

No. It contains only a public URL and identifiers for the workspace and widget. Never add a password or secret to the snippet.

### Will deleting a widget remove old conversations?

No. Deleting a widget stops new messages from that widget; existing conversations stay in KaoJai Admin.

If you already have a website, start with the page where customers ask the most questions: pricing, services, or contact. Make it easy for visitors to start a conversation, then expand to other pages when you are ready.