Tutorial

How to Build an AI Chatbot for Your Website in 10 Minutes

Gabster Team 6 min read

Want to add an AI chatbot to your website that actually knows your business? In this guide, we'll walk through setting up a custom AI agent from scratch - no coding required.

By the end, you'll have a working chatbot that:

  • Answers questions about your products/services
  • Knows your FAQs, pricing, and policies
  • Works 24/7 without human intervention
  • Embeds seamlessly on your website

Let's get started.

Step 1: Create Your Account

Head to app.gabster.link and sign up. No credit card required - the free tier includes 100 messages per month.

After signing in, you'll see an empty dashboard. Click "Create Agent" to get started.

Step 2: Name Your Agent

Give your agent a name that reflects its purpose. This name appears in the chat widget header.

Examples:

  • "Acme Support" for customer support
  • "Sales Assistant" for lead qualification
  • "Product Guide" for e-commerce

You can also add a welcome message - the first thing users see when they open the chat. 

Welcome to Acme! I'm here to help with any questions about our products, pricing, or shipping. What can I help you with?

Step 3: Add Your Knowledge Base

This is where the magic happens. Your agent needs content to learn from. Gabster supports multiple data sources:

Option A: Crawl Your Website

The fastest way to train your agent. Enter your website URL and we'll crawl up to 50 pages (free tier) or 500+ pages (paid plans).

  1. Go to the Data Sources tab
  2. Click "Add Website"
  3. Enter your URL: https://yoursite.com
  4. Click "Crawl"

The crawler extracts text content from each page, converts it to clean markdown, and indexes it for search. This usually takes 1-5 minutes depending on site size.

Option B: Upload Documents

Have a PDF knowledge base, FAQ document, or product catalog? Upload it directly.

Supported formats:

  • PDF
  • Word documents (.doc, .docx)
  • Text files (.txt, .md)
  • CSV spreadsheets

Option C: Add Custom Text

For smaller content blocks, paste text directly. Great for:

  • FAQs that aren't on your website
  • Internal policies
  • Specific product details
  • Pricing information

Step 4: Customize the Personality

The System Prompt controls how your agent behaves. This is where you define its personality, tone, and rules.

Here's a template to start with:

You are a helpful customer support agent for [Company Name].

Your goal is to:
- Answer questions accurately using the knowledge base
- Be friendly and professional
- Escalate to human support when you can't help

Tone:
- Friendly but not overly casual
- Concise - keep responses under 3 sentences when possible
- Use bullet points for lists

Rules:
- Never make up information
- If you're not sure, say so and offer to connect them with a human
- Don't discuss competitors
- For billing issues, always direct to [email protected]

Step 5: Test Your Agent

Before going live, test the agent in the preview panel. Ask it questions your customers would ask:

  • "What are your business hours?"
  • "How much does [product] cost?"
  • "Do you offer refunds?"
  • "How do I contact support?"

If it doesn't know something it should, add that information to the knowledge base.

Step 6: Customize the Widget

Make the chat widget match your brand:

  • Primary color: Your brand color for the chat bubble
  • Position: Bottom-right or bottom-left
  • Theme: Light, dark, or auto (matches user preference)
  • Welcome message: What users see first
  • Input placeholder: e.g., "Ask me anything..."

The preview updates in real-time as you make changes.

Step 7: Deploy to Your Website

When you're happy with the agent, click "Get Embed Code". You'll get a snippet like this: 

<script
  src="https://gabster.link/widget/gabster-widget.iife.js"
  data-agent-id="your-agent-id"
  async
></script>

Add this to your website, just before the closing </body> tag. Works with:

  • WordPress (add to theme footer or use a plugin)
  • Shopify (add to theme.liquid)
  • Squarespace (Code Injection in settings)
  • Webflow (Custom Code in project settings)
  • Any HTML website

The widget loads asynchronously, so it won't slow down your page.

Step 8: Monitor and Improve

Once live, monitor your agent's performance in the dashboard:

  • Conversations: See what users are asking
  • Unanswered questions: Topics your agent couldn't help with
  • Response times: How fast your agent responds

Use this data to improve. If users keep asking about something the agent doesn't know, add it to the knowledge base.

Advanced: Enable Voice Mode

Want users to talk to your agent? Enable voice mode in the agent settings.

With voice enabled, users can:

  • Click a microphone button to speak
  • Hear the agent's response read aloud
  • Have hands-free conversations

Voice mode uses the same knowledge base and personality - no additional setup required.

That's It!

In about 10 minutes, you've built a custom AI chatbot that:

  • Knows your business inside and out
  • Matches your brand's look and feel
  • Works 24/7 without breaks
  • Improves over time as you add content

What's next?

  • Add a phone number for voice calls
  • Set up lead capture workflows
  • Integrate with your CRM via API
  • Create multiple agents for different purposes

Ready to get started? Create your free account at app.gabster.link.

Ready to Build Your AI Agent?

Start free. Deploy in minutes. No credit card required.

Get Started Free