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
- Open KaoJai Admin and choose Integrations.
- Select the Webchat card.
- Give the widget a name that tells you where it will be used, such as
Main website,Campaign landing page, orContact page. - 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-urlis the KaoJai.ai message endpoint.data-tenant-ididentifies the workspace that receives the conversation.data-widget-ididentifies 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.
<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:
<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.