The chatbot widget that installs with one line
ChatBotWidget adds an AI chat to any website with one script tag. It loads async, opens the conversation in an isolated frame, matches your brand colours and works on WordPress, Shopify, Webflow, Wix and plain HTML.
- ~3 KB
- loader size
- async
- never blocks your page
- 30+
- languages
<!-- before </body> --> <script src="https://chatbotwidget.ai/w.js" data-bot="cbw_7k2m9x4q8w" async></script>
Design it in the panel, watch the preview change
Every option below is a field in the design screen of your bot. The preview on the right of the panel updates as you type, and saving publishes it to your site at once.
Brand colour
Any hex colour. Text on the header and launcher switches between dark and light for contrast.
Title and greeting
The header line and the first message a visitor sees when the chat opens.
Quick replies
Up to four buttons such as Prices or Talk to a person, for the questions you hear most.
Avatar and name
The bot name with its initial in your colour, so it reads as part of your site.
Position and launcher
Bottom right or bottom left, a round bubble or a labelled button like Ask us.
Tone and instructions
Friendly, professional or concise, plus your own notes on what to say and avoid.
Ask Lakeside Physio
Lakeside assistant, replies instantly
Built so it never gets in your page's way
A chat widget runs on every page you own, so it has to be light, contained and polite. This is how the loader behaves after you paste it.
- 01
Loads after your page
The script tag is async. Your content renders first, then the roughly 3 KB loader fetches the bot settings.
- 02
Launcher in a Shadow DOM
The button lives in its own shadow root, so your theme CSS cannot restyle it and it cannot restyle you.
- 03
Chat in its own frame
The conversation opens in an iframe from our domain on first click. Nothing is downloaded for visitors who never open it.
- 04
Full screen on phones
Under 480 px wide the chat fills the screen, so typing on a phone keyboard stays comfortable.
Only on your domains
The bot answers on your website domain and on any extra origins you list, for example a staging site. Copied elsewhere, the tag stays silent.
Open it from your own button
<a href="#" onclick="ChatBotWidget.open()">Chat with support</a>
Hotel Seeblick
Seeblick, replies instantly
Answers in the visitor's language, on any screen
Set the language to Match the visitor and the bot replies in the language of the question, in 30+ languages, even if your site is only in English.
Prefer one language for a regional site? Fix it per bot to English, Spanish, German, French or Polish. On phones the chat opens full screen, and closing it returns the visitor to the exact spot on your page.
Want the bot to do more than talk? Add chatbot actions such as order lookups and bookings, or read the full AI chatbot features overview.
Install guide for your platform
Your own tag with your bot key is on the Install page of the panel. The steps are the same everywhere: paste once, publish, open your site.
Step by step guides: AI chatbot for WordPress and AI chatbot for Shopify.
Any HTML site
Paste the tag just before </body> in your page template, so it loads on every page.
The panel shows when the widget was first seen on your site
<body>
...
<script src="https://chatbotwidget.ai/w.js" data-bot="cbw_7k2m9x4q8w" async></script>
</body>WordPress
Appearance, Theme file editor, footer.php, before </body>. Or use any header and footer code plugin and paste the tag into the footer box.
The panel shows when the widget was first seen on your site
<!-- footer.php -->
<script src="https://chatbotwidget.ai/w.js" data-bot="cbw_7k2m9x4q8w" async></script>
<?php wp_footer(); ?>
</body>Shopify
Online Store, Themes, Edit code, layout/theme.liquid, then paste the tag just before </body> and save.
The panel shows when the widget was first seen on your site
<!-- layout/theme.liquid -->
<script src="https://chatbotwidget.ai/w.js" data-bot="cbw_7k2m9x4q8w" async></script>
</body>Webflow
Site settings, Custom code, Footer code. Paste the tag, save and publish the site.
The panel shows when the widget was first seen on your site
<script src="https://chatbotwidget.ai/w.js" data-bot="cbw_7k2m9x4q8w" async></script>Wix
Settings, Custom code, Add custom code. Paste the tag, choose All pages and place it in Body end.
The panel shows when the widget was first seen on your site
<script src="https://chatbotwidget.ai/w.js" data-bot="cbw_7k2m9x4q8w" async></script>Squarespace
Settings, Advanced, Code injection, Footer. Paste the tag and save.
The panel shows when the widget was first seen on your site
<script src="https://chatbotwidget.ai/w.js" data-bot="cbw_7k2m9x4q8w" async></script>Tag Manager
New tag, Custom HTML, paste the tag, trigger All Pages, then submit the container.
The panel shows when the widget was first seen on your site
<script src="https://chatbotwidget.ai/w.js" data-bot="cbw_7k2m9x4q8w" async></script>React and Next.js
Load it once in your root layout with the Script component, strategy afterInteractive.
The panel shows when the widget was first seen on your site
import Script from "next/script";
<Script src="https://chatbotwidget.ai/w.js"
data-bot="cbw_7k2m9x4q8w" strategy="afterInteractive" />Widget questions
Speed, styling and where the widget answers.
How do I add a chatbot widget to my website?
Copy the script tag from the Install page of your bot and paste it before the closing body tag of your site, or into the footer code field of your website builder. The launcher appears on every page that loads the script, usually within a minute.
Will the chat widget slow down my site?
No. The loader is about 3 KB and loads async, after your page. The chat itself is only fetched when a visitor clicks the launcher, so the first view of your page does not wait for it.
Can the widget break my website design?
No. The launcher sits in a Shadow DOM and the conversation runs in its own frame, so your CSS does not reach the chat and the chat styles do not reach your pages.
Can someone copy my script tag onto another site?
The bot answers only on your own domain and the extra origins you allow in the design settings, such as a staging site. On any other site the widget does not respond.
Can I open the chat from my own button?
Yes. Call ChatBotWidget.open() from any link or button, for example a Contact support link in your menu, and the chat window opens as if the launcher was clicked.
Preview the widget on your own content
Enter your website and talk to a bot built from your pages before you install anything.