Home · Help · How to add chat to your website
How to add chat to your website
“Install”, “add”, “put” or “embed” a chat on your website — it’s all the same action: a single <script> tag with your key before the closing <code></body></code>. The code is the same for any website; only the place in the admin panel where you paste it differs. Below: where to get the line, where to put it on popular platforms (Tilda, WordPress, 1C-Bitrix, Wix), how to make sure messages arrive in “Conversations”, and six reasons the chat might not appear.
Step 1. Code from the “Widget” section
- In the dashboard, open the bot → “Channels” → “Connect Widget for the site” → “Connect”. The key is created automatically; you don’t need to enter anything.
- Go to the “Widget” section → the “Embed code” block. Copy the whole line:
<script src="https://app.chbt.io/w.js" data-key="…"></script>— it also carries the button color, title and position. - In the same place, under “Allowed domains”, enter your site address:
example.com(includeswww); for subdomains,*.example.com. If the list is empty, the widget works on any site that has the code.
You can change the appearance, greeting, pre-chat form and proactive messages in “Widget” at any time — the settings are loaded from the server, so you don’t need to reinstall the code. Paste the code once into the site’s shared template, before the closing </body>: that way it loads last and doesn’t delay page rendering. The widget also works from <head>.
Step 2. Where to paste it: platform → field → what to click
The line of code is the same everywhere; only its place in the admin panel differs, along with the step without which the changes won’t reach the live site.
| Platform | Where the code field is | What to click after pasting |
|---|---|---|
| Tilda | “Site Settings” → “More” → “HTML code for insertion inside BODY” (site-wide). For a single page only, use block T123 from the “Other” category | “Save”, then “Publish all pages” (for T123, republish the page) |
| WordPress | A code insertion plugin (WPCode and similar “Header & Footer” plugins) → the “Footer” / “Before </body>” field. Without a plugin: “Appearance” → “Theme File Editor” → footer.php before </body>, preferably in a child theme | “Save”; if you use a caching plugin, clear the cache |
| 1C-Bitrix | “Settings” → “Product Settings” → “Sites” → “Site Templates” → the active template → footer.php before </body> (or the same file over FTP: /bitrix/templates/<template>/footer.php) | Save, then “Settings” → “Autocaching” → “Clear” |
| Wix | “Settings” → “Custom Code” → add a code snippet, placement “Body - end”, all pages | “Apply”, then publish the site |
| uKit, Craftum, Nethouse, Flexbe, etc. | The “Code insertion” / “HTML code for the whole site” field in the site settings; if there’s no site-wide insertion, an “HTML code” block on each page you need | Save and publish |
| Custom site / SPA | The shared layout file (footer, layout) before </body>; for an SPA, the root index.html | Deploy the build; the widget tracks URL changes without a page reload on its own |
If a contractor built your site, send them the full line and this table — that usually answers all their questions. There’s one widget per site: a second copy on a page is ignored, so accidentally pasting it twice won’t break anything.
Step 3. A one-minute check
- Open the website in an incognito window — this rules out the cache and your previous test sessions. A chat button should appear in the corner.
- Click the button and type “test”. On the Free plan, the window shows a “CHBT” label — this is expected; it’s removed on Basic.
- In the dashboard, open “Conversations”: a conversation with the “web” channel type should appear in the list right away. Reply from the dashboard — the reply will appear in the chat window on the website.
- Check on your phone: the button and window open, and the keyboard doesn’t cover the input field.
If the flow has a “Widget opened” trigger, the bot writes first as soon as the visitor opens the window; otherwise, the first message is the greeting from the “Widget” settings.
Chat doesn’t appear: 6 causes
- The domain isn’t in “Allowed domains.” The button may render, but the connection to CHBT is rejected: messages aren’t sent and the greeting doesn’t arrive. Enter the domain exactly as it appears in the address bar, or clear the list.
- Cache. 1C-Bitrix, WordPress with a caching plugin, and CDNs serve an old version of the page. Clear the site cache and check in an incognito window.
- The page isn’t published. In Tilda and Wix, the code appears on the site only after publishing; in Tilda, use “Publish all pages,” not just one.
- The line is cut off or pasted as text. A visual editor turns the tag into visible text. Paste the code into a field meant for HTML/code, and paste all of it — from
<scriptto</script>. - An ad blocker or extension. Some blockers hide third-party chats. Check in another browser or with extensions turned off.
- The site’s Content-Security-Policy. If the site has a strict CSP, allow
https://app.chbt.ioinscript-srcandconnect-src(includingwss:). The symptom is CSP errors in the browser console.
Adding the code twice (for example, both in Tilda settings and in a T123 block) doesn’t break the widget — the second instance is ignored.
JS API in one line
To open the chat from any button of your own: <a href="#" onclick="chbt('open');return false">Chat with us</a>. Also available: chbt('close'), chbt('toggle'), chbt('mute', true), and chbt('identify', {name, email, phone}) — the last one passes the details of a signed-in visitor, and the pre-chat form isn't shown to them. The commands work after w.js has loaded; if you insert it before </body>, it's already loaded by the time anyone clicks.
What to do with the chat after installing it: a flow with the “Widget opened” trigger and handoff to an operator is described in the article live chat for your website in 5 minutes; choosing between a chat and a form is covered in chat or contact form; how to measure the effect is in live chat and website leads; an AI agent in the chat window is covered in AI assistant on your website. The widget is included in the Free plan (30 conversations per month); the Basic plan removes the “CHBT” label and the limit — details are on the pricing page. Create a bot, connect “Website widget”, and paste the line — it all takes less than ten minutes.
FAQ
The site has a strict Content-Security-Policy — what should I allow?
Add https://app.chbt.io to script-src and connect-src, and for the real-time connection, add wss: to connect-src. Signs of an incorrect CSP are errors in the browser console and a chat button that doesn’t open the chat window.
My site runs on React or Vue without page reloads — will the widget handle it?
Yes. Paste the line once into the root index.html; the widget tracks address changes without a page reload on its own, so proactive messages by URL work in SPAs too.
How do I test the widget on a local site before publishing?
Add localhost to “Allowed domains” next to your live domain — the widget will work on http://localhost with any port. After launch, you can remove localhost from the list.
One widget for several sites — is that possible?
Yes: enter all the domains in “Allowed domains”, one per line, or leave the list empty. Conversations from all sites will go to the same “Conversations” section of one bot; if you need to keep contacts and analytics separate for each site, create a separate bot for each.
I don’t need the chat on every page — how do I limit it?
Paste the code into an HTML block on only the pages you need, not into the site-wide template. Proactive messages can also be limited by URL in the trigger settings — the “Don’t show if URL contains…” field.
There’s already another chat on the page — can I add CHBT next to it?
Technically, yes — both will load, but two buttons in the same corner confuse visitors. Move the CHBT widget to the other side in the “Widget” section, or remove the old chat after a transition period.