Tutorial

Add AI Customer Support to Your Website with Chatbase

Learn how to create and deploy an AI-powered customer support agent using Chatbase to automate responses, capture leads, and improve customer satisfaction.

Tool Chatbase
Difficulty Beginner
Time ⏱️ 30 minutes

Tired of answering the same customer questions over and over? Chatbase lets you build a custom AI chatbot trained on your business data—FAQs, product info, support docs—so it can handle inquiries 24/7. This tutorial shows you how to set up, train, and embed your Chatbase agent on your website in under 30 minutes.

What You’ll Learn

  • How Chatbase works and what it can automate
  • Creating your Chatbase account and first AI agent
  • Training the agent with your website, PDFs, or raw text
  • Customizing the chatbot’s appearance and behavior
  • Setting up integrations (widget, API, Zapier)
  • Testing and refining responses
  • Embedding the chatbot on your website
  • Monitoring performance and improving over time

What You’ll Need

  • A Chatbase account (free tier available)
  • Your website URL or support content (FAQs, product docs, etc.)
  • 10-15 minutes for initial setup
  • Basic knowledge of where to paste code on your website (header/footer or via plugin)

Step-by-Step Guide

Step 1: Sign Up and Create Your First Agent

  1. Go to chatbase.co and click “Get started free”
  2. Sign up with Google, GitHub, or email (no credit card required for free tier)
  3. After confirming your email, you’ll land on the dashboard
  4. Click “New Chatbot” to create your first AI agent
  5. Give your chatbot a name (e.g., “Support Assistant”) and optional description

Step 2: Train Your Agent with Your Data

Chatbase learns from the content you provide. You can train using several methods:

Option A: Website Crawler (Recommended for most sites)

  1. In the chatbot builder, select “Train on Website”
  2. Enter your website’s homepage URL
  3. Choose crawl depth (1-3 levels is usually enough)
  4. Click “Start Crawling” — Chatbase will fetch and index your public pages
  5. Wait for crawling to complete (depends on site size)

Option B: Upload Files

  1. Select “Upload Files”
  2. Drag and drop PDFs, DOCX, TXT, or MD files containing:
    • FAQs
    • Product specifications
    • Troubleshooting guides
    • Pricing sheets
    • Policies (shipping, returns, privacy)
  3. Chatbase extracts text and creates training chunks

Option C: Raw Text

  1. Select “Add Text”
  2. Paste directly copied content from:
    • Google Docs
    • Notion pages
    • Email templates
    • Conversation logs

Option D: Question & Answer Pairs

  1. Select “Add Q&A”
  2. Enter specific question-answer pairs for critical queries
  3. Useful for ensuring precise responses to high-value questions

Step 3: Configure AI Model and Behavior

  1. In the chatbot settings, navigate to “Model” tab
  2. Choose your AI model:
    • Free tier: GPT-4o Mini (economical, good for basic support)
    • Paid tiers: GPT-4o, GPT-4 Turbo, Claude 3 Sonnet, etc. (more capable, higher credit cost)
  3. Adjust temperature (0.2-0.7) for creativity vs. precision (lower for support)
  4. Set max response length if desired
  5. Enable “Show sources” if you want the bot to cite where it pulled information

Step 4: Customize Appearance and Text

  1. Go to the “Design” tab
  2. Choose chatbot widget colors to match your brand
  3. Upload your logo (optional)
  4. Set welcome message (e.g., “Hi! I’m your AI assistant. How can I help you today?”)
  5. Set default fallback message (when bot doesn’t know answer)
  6. Enable/disable chatbot branding removal (paid feature)
  7. Customize input placeholder text

Step 5: Set Up Integrations (Optional but Powerful)

Chatbase can connect to other tools to extend functionality:

Human Handoff (Live Chat)

  1. Under “Integrations”, connect to:
    • Crisp
    • Zendesk
    • Intercom
    • Freshdesk
    • Or use Webhook to notify your team

Lead Capture

  1. Enable lead collection in the widget settings
  2. Map fields to your CRM via:
    • Native integrations (HubSpot, Salesforce)
    • Zapier/Make.com
    • Webhook to custom endpoint

Actions (API Calls)

  1. On paid plans, configure AI actions to:
    • Check order status via your store’s API
    • Book appointments through Calendly
    • Create support tickets in your helpdesk
    • Perform calculations (shipping costs, taxes)

Step 6: Test Your Agent

  1. Use the built-in preview chat on the right side of the builder
  2. Ask common customer questions:
    • “What’s your return policy?”
    • “Do you ship internationally?”
    • “I need help with my order #1234”
  3. Review responses for accuracy and tone
  4. If needed, go back to training data and:
    • Add missing information
    • Edit poorly formatted chunks
    • Add specific Q&A pairs for problematic queries
  5. Test edge cases and intentionally vague questions

Step 7: Deploy on Your Website

Chatbase provides several embedding options:

Option A: JavaScript Snippet (Most Common)

  1. Go to “Install” tab
  2. Copy the provided script tag
  3. Paste it before the closing </body> tag on every page you want the chatbot to appear
  4. Example placement:
    <!-- ... your existing HTML ... -->
    <script>
      (function(...){/* Chatbase snippet */})();
    </script>
    </body>
    </html>

Option B: WordPress Plugin

  1. Search for “Chatbase” in the WordPress plugin directory
  2. Install and activate
  3. Enter your chatbot ID in plugin settings
  4. Choose display rules (all pages, specific posts, etc.)

Option C: Platform-Specific Integrations

  • Shopify: App store integration
  • Wix: Custom code embed
  • Squarespace: Code injection
  • Webflow: Custom embed element

Option D: API-Only Usage

  1. Use the Chatbase API to power custom chat interfaces
  2. Ideal for mobile apps or fully custom implementations

Step 8: Monitor and Improve

Once live, regularly check performance:

  1. Conversation History (under “Inbox” tab):
    • Review real-time chats
    • See which questions the bot handled vs. escalated
    • Identify gaps in training data
  2. Analytics (if on paid plan):
    • Message volume trends
    • User satisfaction ratings (if enabled)
    • Drop-off points in conversations
  3. Improvement Loop:
    • Add new FAQs as they arise
    • Update training when products/policies change
    • Refine Q&A pairs based on actual conversations
    • A/B test welcome messages and flow designs

Tips and Best Practices

For Training Data:

  • Start Small: Begin with your top 10-20 FAQs; you can always add more
  • Use Clear Formatting: Well-structured headings and lists help the AI parse correctly
  • Include Variants: Phrase questions in different ways customers might ask
  • Prune Obsolete Info: Remove outdated promotions or expired event details
  • Leverage Chat Logs: Export conversations monthly to identify new training needs

For Customer Experience:

  • Set Clear Expectations: Welcome message should state it’s an AI agent (optional: “I’m an AI assistant; I’ll connect you to a human if needed”)
  • Provide Easy Escalation: Make it simple to reach a human (widget button, “talk to agent” intent)
  • Keep Responses Concise: Aim for 2-3 sentences unless detail is necessary
  • Use Brand Voice: Match your company’s tone in Q&A pairs and custom responses
  • Test Regularly: Ask your team to test with common scenarios weekly

For Optimization:

  • Leverage Actions: On paid plans, use API calls to check order status or account info without human intervention
  • Multilingual Support: Chatbase can respond in the user’s language if training data includes it or if the model supports it
  • Voice Input: Some integrations allow voice-to-text for accessibility
  • GDPR Compliance: Chatbase is GDPR compliant; review data processing terms if needed

Troubleshooting Common Issues

IssueSolution
Bot gives incorrect answersCheck training data for conflicting or outdated information; add clarifying Q&A pairs
Bot seems “stuck” or repeatsIncrease temperature slightly or add more varied training examples
Widget not showing on siteVerify snippet placement; check for JavaScript errors in browser console; ensure ad blockers aren’t blocking
Slow response timesOccurs during peak usage; consider upgrading plan for priority processing
Exceeding message creditsMonitor usage in dashboard; optimize by shortening responses or limiting unnecessary conversations
Integration not firingVerify webhook URLs and authentication; test integration separately with tools like Postman

Conclusion

Chatbase empowers solopreneurs and small businesses to provide instant, accurate customer support without hiring a full team. By training an AI agent on your specific knowledge base, you create a 24/7 support representative that handles routine inquiries, captures leads, and escalates complex issues when needed.

The beauty of Chatbase lies in its simplicity: point it at your website or upload your documents, customize the look, and embed a snippet. Within minutes, you have a functional AI support agent that learns and improves over time.

Start with the free tier to test the concept, then upgrade as your traffic and support needs grow. Your customers will appreciate the immediate responses, and you’ll reclaim hours each week previously spent on repetitive support tasks.

Remember: The best AI support agents combine automation with human touch. Use Chatbase to handle the volume, freeing you to focus on the conversations that truly require your expertise.

Happy supporting!

A note on disclosure Some links in this article are affiliate links. If you sign up through them, we may earn a commission at no extra cost to you. We only recommend tools we've personally tested. See our full Affiliate Disclosure.