Skip to content
v1.0 Documentation

Developer Documentation

Everything you need to seamlessly integrate SiteBot into your application. Browse our guides, API references, and configuration options.

Quick Start

After creating a chatbot on SiteBot, you receive a unique namespace. Simply add one script tag to your HTML and the widget loads automatically.

index.html
<script
  src="https://sitebot.online/embed.js"
  data-namespace="YOUR_NAMESPACE"
  data-title="Support Assistant"
  data-welcome="Hi! How can I help you today?"
  data-position="right"
></script>

Widget Options

All options are set as data- attributes on the script tag. You can fully customize the behavior and initial state of your chatbot without writing any complex code.

AttributeDefaultDescription
data-namespace—Your chatbot namespace (required)
data-title"Chat Assistant"Header title displayed at the top of the chat
data-welcome"Hi there! Ask me anything."Initial welcome message shown to users
data-position"right"Widget placement: left or right

Theme Colors

Fine-tune every color in the widget to perfectly match your brand's aesthetics by overriding these defaults in the script tag.

data-bot-bg
Bot message background
data-bot-color
Bot message text
data-user-bg
User message background
data-user-color
User message text
data-header-bg
Header background
data-input-bg
Input field background

React / Next.js Integration

If you are building a React or Next.js application, use the next/script component or a standard useEffect hook to load the widget asynchronously without blocking your main thread.

ChatWidget.tsx
"use client";

import Script from "next/script";

export function ChatWidget() {
  return (
    <Script
      src="https://sitebot.online/embed.js"
      strategy="lazyOnload"
      data-namespace={process.env.NEXT_PUBLIC_SITEBOT_NAMESPACE}
      data-title="Support"
      data-position="right"
    />
  );
}

JavaScript SDK

For advanced control, you can programmatically configure the widget at runtime via the globally injected window.SiteBot object. This is useful for single-page applications updating state dynamically.

app.js
window.SiteBot.configure({
  title: "Sales Assistant",
  welcome: "Interested in our enterprise plans?",
  primaryColor: "#fa5d19",
  theme: "dark",
});