How to Add Live Chat to Your Website in 2026 (Step-by-Step)
A complete guide to adding live chat to your website. From choosing a platform to installing the widget, customizing it, training AI, and going live — with platform-specific instructions for Shopify, WordPress, Webflow, and custom sites.
Adding live chat to your website in 2026 is straightforward. Most platforms provide a snippet of code or a plugin you add in minutes. The real work is choosing the right tool, customizing it for your brand, and training the AI so it actually helps customers.
This step-by-step guide walks you through the entire process: from selecting a platform to going live. We use Chatsy as the primary example, but the steps apply to any live chat platform.
Disclosure: We built Chatsy, which is used as an example in this guide.
TL;DR:
- Adding live chat takes 15-30 minutes for most platforms. The process is: choose a platform, install the widget (embed code or plugin), customize branding, train the AI, test, and go live.
- Platform-specific: Shopify and WordPress have one-click app/plugin options. Webflow and Squarespace use custom code injection. Wix has an app market. For React/Next.js, load the script in a useEffect or
_document.js.- Optimize for mobile (the widget should not cover content), test performance impact (async loading is essential), and set up analytics from day one to measure resolution rate and response times.
- Start with AI handling first-line support 24/7, then route to humans for complex or sensitive conversations.
Step 1: Choose a Live Chat Platform
Before you install anything, pick a platform that fits your needs:
| Factor | What to Consider |
|---|---|
| AI vs human-only | AI-first platforms like Chatsy and Intercom resolve most conversations automatically; human-only tools require agents for every chat |
| Pricing model | Per-agent (e.g., Zendesk) vs conversation-based (e.g., Chatsy) — affects cost as you scale |
| Integrations | Does it work with your CMS, e-commerce platform, or CRM? |
| Setup time | Some platforms take 30 minutes; others require days of configuration |
For most teams, an AI-powered platform is the best choice. AI handles common questions 24/7; humans take over when needed. See our live chat software comparison for more options.
Step 2: Create Your Account and Install the Widget
General Process (Works With Any Platform)
- Sign up for your chosen platform.
- Create your first chatbot or agent — most platforms guide you through this.
- Add your website domain — platforms often restrict the widget to approved domains for security.
- Copy the embed code — usually a
<script>tag or a small snippet. - Paste the code into your site's
<head>or before</body>.
With Chatsy (Example)
- Sign up at chatsy.app.
- Create a new chatbot.
- Go to Settings > Embed.
- Copy the embed code.
- Add it to your website (see platform-specific sections below).
Step 3: Customize the Widget
Make the chat widget match your brand:
| Setting | What to Change |
|---|---|
| Position | Bottom-right (default), bottom-left, or custom |
| Colors | Primary color, accent, background |
| Header text | "Chat with us" or "Help" |
| Welcome message | First message users see |
| Avatar | Your logo or a friendly icon |
| Availability | Hours when live agents are online |
Most platforms let you preview changes in real time. Test on desktop and mobile — the widget should be usable on both.
Step 4: Train the AI (If Using an AI Chatbot)
If your platform uses AI, train it on your content:
- Add your knowledge base — Upload help articles, FAQs, or product docs. With Chatsy, you can paste URLs, upload PDFs, or crawl your site.
- Write a system prompt — Tell the AI how to behave (tone, what to avoid, when to escalate).
- Test common questions — Ask the same questions your customers ask. Refine answers.
- Set up human handoff — When AI confidence is low or the customer asks for a human, route to live chat.
The quality of your training data directly affects AI accuracy. A well-maintained knowledge base improves results.
Step 5: Test Before Going Live
Checklist
- Widget appears on all pages you want
- AI answers correctly (or routes to human)
- Human handoff works when agents are online
- Mobile layout looks good
- No console errors in the browser
- Custom branding is applied
- Availability message shows when agents are offline
Step 6: Go Live
- Enable the widget on your production site.
- Monitor the first few conversations — fix any issues quickly.
- Set up notifications — Get alerts when a human handoff is needed.
- Review analytics — Track resolution rate, response time, and customer satisfaction.
Platform-Specific Instructions
Shopify
- Go to Online Store > Themes > Edit code.
- Open
theme.liquid. - Paste the embed code just before
</body>. - Save.
Alternatively, use the platform's Shopify app if available. Chatsy and many others offer a one-click Shopify app for easier installation.
WordPress
Option A: Plugin (if available)
Many live chat platforms have WordPress plugins. Install from the Plugins directory, connect your account, and the widget appears automatically.
Option B: Custom code
- Go to Appearance > Theme File Editor (or use a child theme).
- Edit
footer.phpor use a "Insert Headers and Footers" plugin. - Paste the embed code in the footer section.
- Save.
Option C: Gutenberg block
Some platforms provide a block. Add it to your template or a specific page.
Webflow
- Go to Project Settings > Custom Code.
- Paste the embed code in the Footer Code section (preferred for performance).
- Publish your site.
Webflow also supports page-specific code injection if you only want the widget on certain pages. Edit the page settings and add the code to the page-level custom code section.
Wix
- Go to Settings > Custom Code (under Advanced).
- Click Add Custom Code.
- Paste the embed code snippet.
- Set placement to Body - end and apply to All pages.
- Publish.
Alternatively, check the Wix App Market for your platform's official app. App-based installation avoids manual code entirely.
Squarespace
- Go to Settings > Advanced > Code Injection.
- Paste the embed code in the Footer section.
- Save.
Squarespace's code injection applies site-wide. If you need page-specific control, use a Code Block within individual pages instead.
Custom Websites (HTML, React, Next.js, etc.)
Static HTML:
Add the script tag before </body> in your main layout file.
React / Next.js:
Use a useEffect to load the script and append it to document.body, or add it to _document.js (Next.js) or index.html (Create React App).
Example (Next.js _document.js):
jsx<Script src="https://widget.yourapp.com/embed.js" strategy="afterInteractive" />
Vue / Nuxt:
In Nuxt, add the script to nuxt.config.js under head.script, or use the useHead composable in Nuxt 3. For standard Vue, load the script in your App.vue onMounted hook.
Design Customization Tips
Getting the widget to feel native to your site matters more than most teams realize. A generic-looking widget signals "afterthought" to visitors.
Branding Alignment
- Match your primary color. The widget button and header should use your brand's primary color, not the platform default.
- Use your logo as the avatar. A recognizable icon builds trust faster than a generic chat bubble.
- Write a custom welcome message. "Hi! How can we help?" is generic. "Questions about [your product]? Ask away -- our AI knows the docs inside out." tells visitors exactly what to expect.
Position and Layout
The default bottom-right position works for most sites. Consider bottom-left if your site has a persistent CTA button or cookie banner in the bottom-right corner. Avoid placing the widget where it overlaps critical content like checkout buttons or navigation.
Theming for Dark Mode
If your site supports dark mode, configure the widget to match. Most platforms offer light and dark themes. Some (including Chatsy) detect the user's system preference automatically.
Mobile Optimization
Over 60% of web traffic is mobile. A live chat widget that works well on desktop but blocks content on mobile is a conversion killer.
Best Practices for Mobile
| Practice | Why It Matters |
|---|---|
| Collapsed by default | The widget should show only the launcher button, not an open chat window |
| Full-screen on open | When tapped, expand to a full-screen overlay so users can type comfortably |
| Respect the keyboard | The chat input should remain visible when the mobile keyboard appears |
| Tap targets > 44px | Buttons and links inside the widget need to be large enough for fingers |
| Test on real devices | Emulators miss scroll behavior and keyboard quirks |
Avoiding Content Overlap
On mobile, the launcher button can cover important elements like "Add to Cart" buttons or footer links. Solutions:
- Add bottom padding to your page content (e.g.,
padding-bottom: 80px) so the widget button floats over empty space. - Use the platform's API to hide the widget on specific pages (like checkout).
- Some platforms let you set a custom offset so the button sits higher or lower.
Performance Impact
A chat widget adds a third-party script to every page load. Done poorly, it can slow your site. Done right, the impact is negligible.
Keep It Lightweight
- Load asynchronously. The embed script should use
asyncordeferso it doesn't block page rendering. Most platforms do this by default, but verify. - Lazy load the widget. Some platforms load the full chat interface on page load even when collapsed. Better implementations load only the launcher button initially and fetch the chat UI when the user clicks to open.
- Check bundle size. A good chat widget script is under 50KB gzipped. If the platform's script is over 200KB, that's a red flag.
Measuring Impact
Use Lighthouse or PageSpeed Insights to test your site with and without the widget. Key metrics to compare:
- Largest Contentful Paint (LCP) -- Should not increase by more than 100ms
- Total Blocking Time (TBT) -- Should remain under 200ms
- Cumulative Layout Shift (CLS) -- The widget should not cause layout shifts (a properly positioned fixed element will not)
If you see degradation, check whether the script is loaded synchronously or if it injects heavy CSS. Contact the platform's support -- performance is their problem to solve.
Setting Up Analytics
Without analytics, you're guessing whether live chat is working. Set up tracking from day one.
Key Metrics to Track
| Metric | What It Tells You | Target |
|---|---|---|
| Resolution rate | % of conversations resolved without human help | 60-80% (with AI) |
| First response time | How fast the bot or agent responds | < 5 seconds (AI), < 60 seconds (human) |
| Customer satisfaction (CSAT) | Post-chat rating | 4.0+ out of 5 |
| Conversations per day | Volume trends | Varies by traffic |
| Escalation rate | % routed to human agents | < 30% (with AI) |
| Deflection rate | Conversations that would have been tickets | Track over time |
Connecting to Your Analytics Stack
Most live chat platforms provide built-in dashboards. For deeper analysis, forward chat events to your analytics tool:
- Google Analytics 4: Track custom events for chat opened, chat completed, and escalation. Use the platform's webhook or JavaScript callbacks.
- Segment / Mixpanel / Amplitude: Forward conversation events as user actions to tie chat behavior to your product analytics funnel.
- CRM integration: Push conversation transcripts and metadata to your CRM (HubSpot, Salesforce) so sales and support teams have full context.
Tips for Success
- Start with AI -- Let AI handle the first line. Escalate to humans only when needed.
- Keep your knowledge base updated -- AI accuracy depends on your content.
- Set clear availability -- Tell customers when live agents are online.
- Measure impact -- Use tools like our support cost calculator to track savings.
- Review conversations weekly -- Read through AI-handled conversations to find gaps in your knowledge base.
- Iterate the welcome message -- Test different welcome messages and measure which one gets more engagement.
Frequently Asked Questions
How long does it take to add live chat to a website?
With a platform like Chatsy, you can have a basic widget live in under 30 minutes. Customization and AI training may add another hour. Complex setups (e.g., custom integrations) can take longer.
Do I need a live chat plugin for WordPress?
Not always. Many platforms provide an embed code you can add via a "Insert Headers and Footers" plugin or your theme's custom code section. A dedicated plugin can simplify setup if one is available.
Can I add live chat to a Shopify store without coding?
Yes. Most live chat platforms offer a Shopify app. Install the app, connect your account, and the widget appears automatically. No code editing required.
What's the difference between live chat and a chatbot?
Live chat connects customers with human agents in real time. A chatbot is automated and responds using rules or AI. Modern platforms like Chatsy combine both: AI handles most conversations, and humans take over when needed.
How do I train an AI chatbot for my website?
Add your help content, FAQs, and product docs to the platform. The AI uses this to answer questions. Write a clear system prompt, test common questions, and refine. See our knowledge base guide for tips on writing content that AI can retrieve accurately.
Will live chat slow down my website?
Not if the widget loads asynchronously (which most platforms do by default). A well-built widget adds under 50KB gzipped and should not increase Largest Contentful Paint by more than 100ms. Test with Lighthouse before and after installation to confirm. If you see significant degradation, the issue is likely a synchronous script load -- contact the platform's support.
How do I add live chat to only certain pages?
Most platforms support page-specific targeting. You can conditionally load the embed script based on the URL path, or use the platform's targeting rules to show the widget only on specific pages (e.g., pricing, product pages, help center). Some platforms also offer a JavaScript API to programmatically show or hide the widget.
What analytics should I track for live chat?
Start with resolution rate, first response time, customer satisfaction (CSAT), and escalation rate. These four metrics tell you whether the chat is working. Over time, add deflection rate (conversations that would have been tickets) and connect chat events to your product analytics to understand the full customer journey.
Can I use live chat and a contact form together?
Yes. Many teams keep a contact form as a fallback for when live chat is unavailable or for customers who prefer async communication. Configure the widget to show an email form during offline hours so no inquiry is lost.