How Do I Embed a Support Chat Widget on My Website?
Embed a support chat widget on any website with one script tag. Works with Shopify, WordPress, Webflow, React, Next.js, and static HTML.
TL;DR
Embed a chat widget by pasting one script tag before your closing </body> tag. It works on any website: Shopify, WordPress, Webflow, React, Next.js, or static HTML. The widget adds a floating chat bubble that gives customers access to AI search, chatbot, and contact form.
One script tag — works everywhere
A support chat widget is a floating button (usually bottom-right) that opens a panel with chat, search, and contact options. Modern widgets load asynchronously and don't affect page speed.
To embed Kairoo's widget, paste this before your closing </body> tag:
<script src="https://getkairoo.com/widget.js" data-help-center="your-slug"></script>
Replace "your-slug" with your help center slug from Kairoo's dashboard. The widget appears immediately.
Platform-specific placement: - Shopify: Online Store > Themes > Edit Code > theme.liquid - WordPress: Appearance > Theme Editor > footer.php (or use a plugin for custom scripts) - Webflow: Project Settings > Custom Code > Footer Code - Next.js/React: Add to your root layout component - Static HTML: Before </body> in your HTML file
What the widget does
Kairoo's widget gives customers three ways to get help without leaving your site:
AI Chat. Customers type a question and get an instant AI-powered answer from your knowledge base.
Article Search. Customers search your help center articles directly from the widget.
Contact Form. If AI can't help, customers submit a message that lands in your team inbox with full context.
The widget is under 15KB, loads asynchronously, and works on mobile. It doesn't affect your Core Web Vitals scores.
Customization
In Kairoo's dashboard (Settings > Widget), configure:
- Button position (bottom-left or bottom-right) - Button text (default: just the icon) - Button color (any hex value) - Welcome message - Pre-chat form (require name/email before chatting) - Online/offline status and messages
All customization is done in the dashboard — no code changes needed after the initial embed.
For the full setup guide, see how to add a help center to Shopify or how to add an AI chatbot. Start free.
Frequently asked questions
Does the widget slow down my website?
No. Kairoo's widget loads asynchronously, weighs under 15KB, and doesn't block page rendering. It has no impact on Core Web Vitals or page load speed.
Can I show the widget only on certain pages?
Yes — only add the script tag to pages where you want the widget. Or use JavaScript to conditionally load it based on URL, user role, or other criteria.
Does the widget work on mobile?
Yes. On screens under 480px, the widget panel expands to full-width and adjusts its height for mobile browsers.