How to Add an AI Chatbot to Your Website
A complete step-by-step guide to embedding AI chat on any website. No coding required for basic setup — advanced options included.
Why Add an AI Chatbot?
Step 1: Choose Your Deployment Method
There are three main ways to add AI chat to your website. Pick the one that fits your technical setup:
Chat Widget (Easiest)
A floating chat bubble that appears in the corner of your website. Just add a single script tag to your HTML.
Embedded Iframe
Embed the chat interface directly in a page or section. Good for dedicated support pages or contact sections.
API Integration (Most Flexible)
Build a completely custom chat UI using our API. Full control over design and behavior.
Step 2: Create Your AI Instance
Before you can embed anything, you need an AI instance with your knowledge base:
- Sign up for OpenHelix AI (free tier includes 2,000 messages)
- Create a new AI instance and give it a name
- Upload your knowledge base (FAQs, product docs, support articles)
- Test the chat in the dashboard to make sure answers are accurate
- Generate an API key from the instance settings
Step 3: Add the Code to Your Website
Here's the simplest implementation — the widget script. Add this just before the closing </body> tag:
<!-- OpenHelix AI Chat Widget --> <script src="https://api.openhelixai.com/widget.js" data-instance-id="inst_abc123" data-api-key="syn_live_xxxxxxxx" data-position="bottom-right" data-primary-color="#8b5cf6"> </script>
Customization Options
| Attribute | Description | Default |
|---|---|---|
| data-position | Widget position | bottom-right |
| data-primary-color | Brand color (hex) | #8b5cf6 |
| data-greeting | Initial message | "Hi! How can I help?" |
| data-placeholder | Input placeholder | "Type a message..." |
Step 4: Platform-Specific Instructions
WordPress
Use a plugin like "Insert Headers and Footers" or add the script to your theme'sfooter.php file.
Webflow
Go to Project Settings → Custom Code → Footer Code. Paste the script there.
Shopify
Online Store → Themes → Edit Code → Layout → theme.liquid. Add the script before the closing </body> tag.
React / Next.js
Create a component that loads the script dynamically:
Best Practices
- Train your knowledge base well. The AI is only as good as the information you give it. Include common questions, edge cases, and up-to-date product info.
- Set clear escalation rules. Know when to hand off to humans — complex issues, angry customers, or sales inquiries.
- Monitor conversations. Review what questions the AI couldn't answer and add that info to your knowledge base.
- Be transparent. Let users know they're chatting with AI. It sets expectations and builds trust.
Ready to Add AI Chat to Your Website?
Get started free — no credit card required. 2,000 messages included.
Create Your AI Chatbot