How to Embed an AI Chatbot on Your Website in 5 Minutes
Chirps Team
2026-05-20
Adding a custom AI assistant to your website shouldn't require a engineering team. Today, no-code integrations allow you to train an AI on your existing content and embed a chat widget in less than five minutes.
Whether you want to capture new leads, resolve 80% of repeating support tickets, or give customers a 24/7 self-service channel, this guide walks you through the entire process step-by-step.
Step 1: Train Your AI Assistant
Before embedding, your AI needs to know about your business. Unlike older chatbots that require you to write endless logical trees, modern platforms learn directly from your content.
- Enter Your URL: Enter your domain, and the scraper will index your pages to extract product specifications, terms, and FAQs.
- Upload Files: Drop in PDFs, Word documents, text files, or manuals. The AI will parse them and add them to its secure database.
- Write Custom Instructions: Define your chatbot's personality, tone of voice, and boundary limits.
Step 2: Customize Your Chat Widget
Next, style the chat widget to match your brand identity. A premium design builds customer trust and increases engagement rates.
Through the Chirps dashboard, you can upload your custom brand logo, select matching primary colors, write custom welcome greetings, and configure starter questions (like “Track my order” or “Book a demo”) that users can trigger with a single click.
Step 3: Copy Your Unique Embed Code
Once styled, navigate to the **Embed** tab in your dashboard. You will see two code options:
- The Chat Widget Script: This renders a bubble icon at the bottom-right corner of your site. It is the most popular layout because it stays accessible as users browse different pages.
<!-- Paste this script inside your website's <head> tags --> <script> window.chirpsConfig = { assistantId: "YOUR_ASSISTANT_ID" }; </script> <script src="https://chirps.cc/embed.js" async></script> - The Iframe Code: If you want to embed the chat panel directly inside a dedicated page (e.g., `yoursite.com/chat-support`), copy the inline iframe option.
Step 4: Paste Code on Your Web Builder
Here is how to add the copied script code to the major site building platforms:
Shopify Integration
Go to Online Store → Themes → Click the three dots and select Edit Code. Open the `theme.liquid` file, scroll down to the bottom, and paste your script code right before the closing </body> tag. Save.
WordPress Integration
Log in to WordPress, install any lightweight code inserter plugin (e.g., “Insert Headers and Footers”), and paste the snippet into the script injection box. Alternatively, paste it directly in your child theme's `footer.php` file.
Webflow Integration
Navigate to your Webflow Project Settings → Custom Code tab. Paste the script snippet inside the Footer Code box and hit Publish.
Wix or Framer Integration
Use the **Custom Code** or **Integrations** dashboard settings in Wix or Framer to inject external scripts globally onto your domain.
Why Choose Chirps.cc?
Unlike other builders, **Chirps.cc** takes customer support a step further by combining live chat with real-time browser voice calls.
If a client wants to speak to a human, the assistant instantly triggers notifications to your team via WhatsApp, SMS, or Telegram, giving you the fastest possible response rates.
Create Your Widget in 5 Minutes
Crawl your website, upload your documents, and get your no-code embed code instantly with Chirps.cc.