Setting Up Your First AI Chat Widget in Under 5 Minutes
A step-by-step guide to adding an AI-powered chat widget to your website. From signup to live conversations in less than five minutes.
Adding live chat to your website shouldn't require a engineering team, a week-long integration project, or a 30-page setup guide. With modern AI chat tools, you can go from zero to a fully functional chat widget in under five minutes.
Here's exactly how to do it with FormalChat -- step by step.
Step 1: Create Your Account (1 minute)
Head to the FormalChat operator dashboard and sign up with your business name, email, and a password. That's it -- no credit card required. The free Starter plan gives you 50 AI messages per month, which is plenty to get started and see how it works with real visitors.
After signing up, you'll land on the operator dashboard. This is your command center for managing conversations, configuring your AI, and customizing your widget.
Step 2: Add Your Knowledge Base (2 minutes)
The AI is only as good as the information you give it. Navigate to the Knowledge Base section in your admin settings and add a few entries about your business:
- Business basics: What you do, your hours, your location, contact info
- Common questions: Pricing, shipping policies, return policies, product details
- Key differentiators: What makes your business unique
You don't need to write a novel. Even 3-5 well-written knowledge base entries dramatically improve the AI's ability to help your visitors. The AI uses these entries to give accurate, grounded responses instead of making things up.
Start small and add more over time as you see what customers are asking about.
Step 3: Customize Your Widget (30 seconds)
In the admin settings, configure your widget's appearance to match your brand:
- Primary color: Set it to match your brand palette
- Theme: Choose light, dark, or auto-detect (matches the visitor's site theme)
- Welcome message: Write a friendly greeting that appears when visitors open the chat
- Business hours: Set when your team is available for live handoff
The widget automatically adapts to your visitor's language and device. It looks great on desktop and mobile with zero extra configuration.
Step 4: Embed the Widget (30 seconds)
This is the part that surprises people. The entire embed process is a single line of code. Copy the script tag from your dashboard and paste it into your website's HTML, right before the closing </body> tag:
<script src="https://formalchat.ai/widget.js"
data-tenant="your-tenant-id"></script>
That's it. One line. It works with any website technology:
- WordPress: Paste into your theme's footer or use a header/footer plugin
- Shopify: Add to your theme.liquid file
- React / Next.js: Add to your root layout or index.html
- Static HTML: Paste directly into your HTML file
- Any website builder: Use the custom code/embed feature
The widget loads asynchronously, so it won't slow down your page. It's lightweight -- under 30KB -- and doesn't affect your site's performance metrics.
Step 5: Test It Out (1 minute)
Open your website and you'll see the chat bubble in the bottom corner. Click it and try asking a question. The AI will respond using the knowledge base you just set up.
Try a few scenarios:
- Ask a question that your knowledge base covers -- the AI should answer accurately
- Ask something it can't answer -- it should offer to connect you with a human operator
- Request to speak with a person -- the conversation should be handed off to your operator dashboard
Back in the operator dashboard, you'll see the conversation appear in real-time. You can claim it, respond, and see the full AI conversation history.
What Happens Next
Once the widget is live, you'll start seeing real visitor conversations flow in. The AI handles the routine questions automatically. When something needs human attention, you'll get a push notification on your phone or desktop.
Over the next few days, review the conversations in your dashboard. You'll quickly see patterns -- common questions the AI handles well, and topics where you should add more knowledge base entries.
As your volume grows, you can:
- Add more operators to your team
- Set up canned responses for common operator replies
- Expand your knowledge base for better AI coverage
- Upgrade your plan for more AI messages
Why Simplicity Matters
Many live chat tools require lengthy onboarding processes, complex JavaScript APIs, or dedicated integration work. That complexity is a barrier to adoption, and it's entirely unnecessary.
The best tools respect your time. If you can't go from signup to a working chat widget during a coffee break, the tool is overcomplicating things. Customer support should help your business, not create another project to manage.
Five minutes. One script tag. Instant AI-powered customer support. That's how it should work.