Skip to content
vital_signsUptime: 99.99%
auto_awesomeIntegration Guide

Sapybase AI Chat Integration Manual

Everything you need to build and launch your custom AI chatbot — from account setup to going live on your website.

1

Account Setup & Registration

First things first — create your account and tell us about your business.

  • check_circleSign up using your email or Google account.
  • check_circleChatbot ID — we automatically provision isolated storage so your data stays secure.
Registration Screen
  • check_circleAfter registration you'll be redirected to the dashboard.
  • check_circleSubscribe — choose the plan that suits your needs.
  • check_circleBusiness profile — give your bot a company name and website URL.
Bot Creation
2

Integrating the Chatbot

Adding the chatbot is as simple as copying and pasting a single snippet.

Plain HTML / Static Websites

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to my business</h1>

    <!-- Sapybase AI Chat Widget -->
    <script src="https://www.sapybase.com/sapybase-loader@1.js"
            data-bot-id="YOUR_API_KEY"
            defer></script>
</body>
</html>
Dashboard Snippet Copy
shield

Content Security Policy (CSP)

If your site sends a Content-Security-Policy header, you need to whitelist Sapybase so the widget can load and the chat iframe can connect to our servers.

info

Most static HTML sites do not set a CSP header and can skip this section. You only need this if you already have a Content-Security-Policy header.

Minimum required directives

Add these to your existing CSP — extend it, don't replace it:

Content-Security-Policy:
  script-src   'self' https://www.sapybase.com;
  frame-src    https://www.sapybase.com;
  connect-src  'self' https://www.sapybase.com;
  img-src      'self' data: blob: https://www.sapybase.com;

Next.js — next.config.mjs

// next.config.mjs
async headers() {
  return [
    {
      source: '/:path*',
      headers: [
        {
          key: 'Content-Security-Policy',
          value: [
            "default-src 'self'",
            "script-src 'self' 'unsafe-inline' https://www.sapybase.com",
            "frame-src https://www.sapybase.com",
            "connect-src 'self' https://www.sapybase.com",
            "img-src 'self' data: blob: https://www.sapybase.com",
          ].join('; '),
        },
      ],
    },
  ];
}

Nginx

add_header Content-Security-Policy
  "default-src 'self'; script-src 'self' https://www.sapybase.com; frame-src https://www.sapybase.com; connect-src 'self' https://www.sapybase.com; img-src 'self' data: blob: https://www.sapybase.com"
  always;

Apache (.htaccess)

Header always set Content-Security-Policy \
  "default-src 'self'; script-src 'self' https://www.sapybase.com; frame-src https://www.sapybase.com; connect-src 'self' https://www.sapybase.com; img-src 'self' data: blob: https://www.sapybase.com"
lightbulb

Why connect-src needs Sapybase

The loader and the AI backend are both served through www.sapybase.com. This domain must be whitelisted for the chat to function.

3

Customizing Look & Feel

Every change you make in the dashboard updates your website instantly — no redeploy needed.

Customization Settings
4

Training the AI

  • upload_fileUpload files — drop in PDFs, Word docs, or manuals. The AI reads every page.
  • languageWebsite sync — paste your URL and the AI will crawl it to learn your latest content.
Training Interface
5

Managing Knowledge

warning

Deleting a knowledge chunk means the AI will forget that specific piece of information permanently.

videocam

Screen Recording: Managing the Knowledge Base, reviewing chunks, and deleting outdated information.

Knowledge Base Management
6

Managing Multiple Bots Pro

Our Pro plan lets you create and switch between entirely separate bots from a single dashboard.

Agency Bot Manager
Agency Bot Manager
support_agent

Need a hand getting started?

If you get stuck or just want someone to walk you through it, our team is always just a message away.

mailMessage Support

Ready to automate your customer support?

Set up your AI chatbot in minutes — no code required on most platforms.