Learning Center

How to add a live chat widget to any website

By the Onsites AI team · Last updated August 28, 2026 · 8-minute read

A live chat widget is the highest-conversion support channel you can add to a website, and it is also the one most teams postpone because they assume it needs a developer. It does not. The whole installation is one script tag, and the receiving end — the part that actually matters — is a shared inbox your team can answer from. This guide covers the install on every common platform, then the two customizations that separate a widget people use from a widget people ignore.

Step 1 · Create the desk behind the widget

Register a free workspace from the start page — work email, password, verification click. The workspace includes the website channel by default, so there is nothing to enable before you get your snippet. If you are new to the desk, the fifteen-minute setup guide covers this first step in a little more depth; you will be back here in two minutes.

Step 2 · Copy the snippet from Settings → Website

In your workspace open Settings → Website. You will find a preconfigured snippet containing your website token — copy it as-is. The shape of it looks like this, with YOUR_DESK_URL and YOUR_WEBSITE_TOKEN already filled in for your workspace:

<script>
 (function(d,t){
   var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
   g.src='YOUR_DESK_URL/js/sdk.js';
   g.async=true;g.onload=function(){
     window.ChatwootLite.run({
       baseUrl: 'YOUR_DESK_URL',
       websiteToken: 'YOUR_WEBSITE_TOKEN'
     });
   };
   s.parentNode.insertBefore(g,s);
 })(document,"script");
</script>

The async attribute matters: the script downloads in parallel with the rest of the page and never blocks rendering. That is why a live chat widget built this way does not affect your page speed scores in any meaningful way.

Step 3 · Paste it into your site

The paste location is the same everywhere: just before the closing </body> tag of the pages where the bubble should appear.

• Static HTML: open your template or each page in an editor, paste before </body>, upload. If your header, nav and footer live in one shared template file (they usually do), one paste covers the whole site.
• WordPress: paste into the theme footer template, or into the footer/body section of your SEO or insert-headers plugin — both reach every page.
• Next.js and other React frameworks: put the script in your root layout so every route gets the bubble and no re-navigation re-creates it. In the App Router that is the script tag inside the root layout's body; the widget survives client-side navigation because the layout does not remount.
• Site builders (Squarespace, Wix, Webflow, Ghost): use the "custom code in body/footer" injection point they all provide. One paste, whole site.

Refresh your site. A chat bubble appears in the bottom-right corner. Open it, send yourself a test message, and watch it land in the workspace inbox.

Step 4 · The two customizations that matter

Brand it. In the same settings screen set the bubble color to your primary brand color and upload a favicon-friendly avatar. A default blue bubble on a beige site reads as abandoned software; a matched one reads as a feature. This takes one minute.

Write a real greeting. The pre-chat message is the highest-leverage sentence on your support page. Name the response expectation and the scope: "We reply within the hour, weekdays 9–18 CET — ask us anything about setup." Vague invitations ("How can we help?") get ignored; specific ones get answered and, more importantly, keep expectations honest while your team is asleep.

Step 5 · Answer from the shared inbox

Every conversation — chat, email, Telegram, WeChat, LINE, WhatsApp, Messenger — arrives in one queue. The visitor's context panel shows the page they came from, and as your CRM fills up, their account and contact record attach automatically. While answering you can leave private notes for teammates, save a draft reply to finish later, and tag conversations for reporting. If AI is enabled, Copilot can draft the first reply for you (3 credits), and you edit rather than type.

Housekeeping: storage and branding

Chats count toward storage, but text is tiny — the 100 MB free tier holds countless conversations, and only attachments add up meaningfully beyond that. The free tier shows a small Powered by Onsites AI badge in the widget; your first payment of any kind — a fourth seat or an AI credit pack — removes it permanently. And if you sell into networks where a cloud embed is a compliance problem, the same widget runs in front of a self-hosted desk on your own infrastructure.

Five mistakes worth skipping

• Declaring it broken too early. Ad blockers and privacy extensions swallow widget scripts routinely; test in a normal window before concluding the snippet "doesn't work." A visitor with a blocker simply sees no bubble — which is also why email must stay connected, not be the only door.
• Pasting into the wrong injection point. Some builders offer both head and body injection; the footer/body point is the right one for this snippet, which was built to load at the end of the page.
• Forgetting the hard refresh. Static sites cache aggressively; after pasting, force a reload (Ctrl+Shift+R) or you will debug a cached page.
• Running two chat products at once. If another chat tool is still embedded, remove its snippet when you add this one — two bubbles in one corner is one too many, and visitors answer neither.
• Never sending the test message. The loop only closes when a message you send as a visitor appears in the shared inbox. Verify that once and the widget is truly live, not merely installed.