Skip to main content

​
Overview

In just a few minutes, you’ll have a working AI agent answering questions about your business and engaging with your website visitors. Here’s what we’ll do:
1

Create & Train Your Agent

Set up a new AI agent and train it using your website or documents
2

Test & Optimize

Use the Playground to test responses and fine-tune performance
3

Deploy to your Website

Add your AI agent to your website with a simple embed code
Estimated time: 5 minutes from start to finish

​
Before you start

You’ll need an active Chatbase account to follow this guide. Sign up here if you haven’t already.

​
Step 1: Create & train your AI agent

After signing into your Chatbase account, go to your main dashboard. Click the New AI Agent button to get started.
The New AI Agent button on the Chatbase dashboard

​
Choose your training data

Your AI agent needs information to learn from. You can train it using various data sources:
Upload your documentsTrain your agent on your documents.Best for: Business documents, manuals, FAQs, product information, etc.
Data sources page with the Add Files dialog open

​
Review & start training

Click Create Agent to begin the training process.
Training typically takes 2-5 minutes depending on the amount of data. You can proceed to the next step while training completes.
Storage limit: Different plans have different storage limits for training data. Check your plan if you hit any limits.

​
Step 2: Test & optimize your AI agent

​
Access your instructions

After training your agent, go to Build > Instructions to refine its behavior. Use the Compare button to test your changes side by side against the current version before saving them.
Playground interface showing chat testing area

​
Fine-tune settings

Test responses with different models
1

Test with different models

Ask the same questions to different models and compare:
  • Response quality and accuracy
  • Response time and speed
  • Tone and personality
  • Handling of edge cases
2

Make your decision

Based on the comparison, select the model that best fits your specific use case and brand voice.
For detailed model comparisons and advanced testing strategies, see the Compare area and the models comparison page.

​
Step 3: Deploy to your website

Once you’re satisfied with your agent’s responses, it’s time to make it live. Navigate to the Channels tab in the sidebar, and click Setup on the Chat bubble card to access your agent’s script.
Disabled vs Enabled: Disabled agents are only accessible to workspace members. Enabled agents can be embedded on websites and accessed by anyone with the link.

​
Choose your deployment method

Chatbase offers multiple deployment methods including chat bubble, help page, and integrations with Email, Phone, WhatsApp, Facebook Messenger, Instagram, Shopify, and other platforms. In this guide we’ll use the Chat bubble option, as it’s the most common. Click Manage under the chat bubble, then select Deploy to access your embed script.
chat widget embed tab
JavaScript embed code ready to copy
Perfect for most websitesAdds a floating chat icon that users can click to start conversations. Non-intrusive and mobile-friendly.Pros:
  • Can use advanced features like identity verification
  • Doesn’t interfere with your site’s design
  • Users can minimize and maximize as needed
  • Works well on mobile devices
  • Familiar UX pattern
Best for: Business websites, blogs, e-commerce stores

​
Add code to your website

1

Locate your site's HTML

Find where you can add JavaScript code to your website. This is usually in the <head> section or before the closing </body> tag.
For fast loading: Place the script just before the closing </body> tag so your page content loads first, then the chat widget appears.For immediate availability: Place the script in the <head> section to load the chat widget as early as possible, though this may slightly delay your page’s initial render.
2

Paste the code

Copy and paste the embed script into your website’s HTML. If you’re using a CMS like WordPress, there’s usually a “Custom HTML” or “Scripts” section.
3

Save and publish

Save your changes and publish your website updates.
Using a site builder? There’s a step-by-step guide for WordPress, Webflow, Wix, Weebly, Framer, Bubble, and Vercel.

​
Verify installation

Visit your website and look for the chat bubble. Click it to test the integration.
Live AI Agent chat bubble on a website
Success! Your AI agent is now live and ready to help your website visitors.
Need more control over your widget? See the Developer Guides for the JavaScript embed, widget control options, and advanced features like client-side custom actions and event listeners.

​
Customize appearance (optional)

Want to match your brand? See the guide to chat bubble display settings.
  • Upload custom chat bubble icon
  • Change bubble colors to match your brand
  • Customize welcome messages
  • Set initial questions users can click
  • Auto-open chat after delay
  • Collect user feedback

​
Next steps

You’ve created, trained, tested, and deployed your first AI agent. From here:

Best Practices

Proven ways to improve your agent’s answers: instructions, data sources, and the right model.

Actions

Add escalations, lead capture, appointment booking, and more.

Integrations

Connect your agent to messaging channels and business tools.

Analytics

Track conversations and optimize your agent’s performance.
Need help? Visit our Help Center or check the FAQ for common questions.