Welcome to Sapybase… 0%
descriptionManual
auto_awesome Visual GuideThe Ultimate Sapybase
The Ultimate Sapybase
AI Chat Integration Manual
This guide shows you exactly how to build and launch your custom AI chatbot into your website.
1Account Setup & Registration
First things first, you need to create your account and tell us about your business.
- Sign Up: Use your email or Google account to create account in our server.
- Sign In: Use your email or Google account to sign in to our server.
- Chatbot ID: We automatically create a "house" for your data so everything stays safe.
Registration Screen
- After successful registration, you will be redirected to the dashboard.
- Subscribe to a plan: Choose a plan that suits your needs and subscribe to it.
- Business Profile: Give your chatbot a company name (e.g., "Sapybase LLC") and provide your website URL.
Registration Screen
2Integrating the Chatbot
Adding the chatbot to your website is as simple as copying and pasting a single snippet of code.
Dashboard Snippet Copy
shieldContent Security Policy (CSP)
If your site sends a Content-Security-Policy header, you need to whitelist Sapybase so the widget script can load and the embedded chat iframe can connect to our servers. Without these additions the widget will be silently blocked by the browser.
info
Most static HTML sites do not set a CSP header and can skip this section entirely. You only need this if you already have a Content-Security-Policy header in your server config or a <meta http-equiv> tag.
Minimum required directives
Add these to your existing CSP — do not replace your current policy, only extend 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 — add to next.config
// 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.
3Customizing Look & Feel
Every change you make in the dashboard updates your website instantly.
Customization Settings
4Training the AI
- Upload Files: Drop in your PDFs, Word docs, or manuals. The AI will read every page.
- Website Sync: Paste your website URL, and the AI will crawl it to learn your latest updates.
Training Interface
5Managing Knowledge
warning
Deleting a "knowledge chunk" means the AI will forget that specific piece of information forever.
videocam
Screen Recording: Managing the Knowledge Base, reviewing chunks, and deleting outdated information.
Knowledge Base Management
6Managing Multiple Bots (Pro)
Our Pro plan lets you create and switch between entirely separate bots from a single dashboard.
Agency Bot Manager
Need a hand to get started?
If you get stuck or just want a human to talk you through it, our team is always just a message away.
Message Support