How to Set Up Live Chat on Your Website
How to Add Live Chat
In the AI Chatbot app, create a new chatbot. Give it a name that matches its purpose (like "Website Support" or "Sales Chat"). Set the AI model, system prompt with your brand voice and instructions, and configure the basic settings like welcome message and response length. This chatbot will power the AI side of your live chat.
Upload your FAQ, product documentation, pricing details, and any other content the chatbot needs to answer customer questions. The AI retrieves answers from this knowledge base, so the more complete your training data, the better the chatbot performs. See How to Train a Support Chatbot on Your FAQ.
Customize the chat widget to match your website's design. Set the colors, position (bottom-right is standard), welcome message, and the chatbot's display name. The widget should look like a natural part of your website, not an afterthought. Choose whether it starts as a small button or an open chat window.
Copy the embed snippet from the chatbot settings and paste it into your website's HTML, just before the closing body tag. The snippet loads asynchronously, so it does not slow down your page. If you use a website builder, add it as a custom code block. If you use WordPress, paste it into your theme's footer or use a custom code plugin.
If you want human agents to handle conversations alongside the AI, connect the chatbot to a live operator in the settings. When the AI cannot resolve an issue or the customer requests a human, the conversation transfers to the operator's inbox. Your agents can monitor conversations, jump in when needed, or let the AI handle everything. See How to Set Up Chatbot to Human Agent Handoff.
Open your website in a private browser window and test the chat. Ask questions the AI should know, ask questions it should not know, and test the handoff flow if you enabled live operators. Verify the widget loads correctly, the AI responds accurately, and conversations appear in your inbox.
Live Chat Best Practices
Set Expectations for Response Time
If your live chat is AI-powered, responses are instant. If you use human agents, display estimated wait times or your team's available hours. Nothing frustrates a visitor more than starting a live chat and waiting 20 minutes for a response with no indication that anyone is there. If agents are offline, either let the AI handle conversations independently or switch to a contact form that collects the visitor's email.
Use Proactive Chat Triggers
Instead of waiting for visitors to click the chat button, trigger the chat widget proactively on high-value pages. On the pricing page, after 30 seconds: "Have questions about pricing? I can help." On the checkout page if the cart has been idle: "Need help completing your order?" Proactive triggers increase chat engagement 2-3x compared to passive widgets. Keep the message relevant to the page, not generic.
Keep the Widget Unobtrusive
The chat button should be visible but not block content. Bottom-right corner is the standard position because it avoids overlapping with most website layouts. On mobile, make sure the widget does not cover your navigation or call-to-action buttons. Test on both desktop and mobile to confirm the placement works everywhere.
Collect Contact Information
Configure the chatbot to collect the visitor's name and email early in the conversation, either through a pre-chat form or naturally within the conversation. If the chat disconnects or the visitor leaves, you still have their contact information to follow up. This turns anonymous chat sessions into identified leads. See AI-Powered Lead Generation.
AI Chat vs. Human-Only Chat
Pure human chat means every conversation needs a person. At scale, this requires a full support team during business hours and leaves customers without support after hours. Pure AI chat handles unlimited conversations 24/7 but cannot resolve everything.
The hybrid approach works best for most businesses: AI handles the initial conversation and resolves what it can (typically 70-80% of questions). Complex issues, sensitive topics, or customer requests for a human escalate to a live agent. This gives you 24/7 coverage without needing 24/7 staffing. See When to Use AI Support vs Human Support.
Add live chat to your website and start answering customer questions in real time with AI and human agents.
Get Started Free