Sitewise Chatbot Widget

Add an AI-powered support assistant to your React, Next.js, or website application in minutes.

Sitewise Chatbot Widget provides a ready-to-use chat interface, floating launcher, conversation management, and backend integration out of the box. Manage knowledge in the SiteWise dashboard, then provide your businessId and apiKey to connect your chatbot.

Dashboard Setup

Before installing the widget on a production website, create or select a business in the SiteWise dashboard:

https://chatbot-widget-platform.vercel.app

From the dashboard you can:

• Add approved business knowledge
• Test chatbot answers before going live
• Configure lead capture fields
• Review captured leads
• Review visitor conversations
• Generate widget API keys
• Manage separate chatbot setups

Installation

Install the package:

npm install sitewise-chatbot-widget

Run the interactive setup wizard:

npx sitewise-chatbot-widget

The setup wizard will guide you through:

• Business name
• Chat title
• Subtitle
• Welcome message

After setup, a sitewise-chatbot.config.json file will be generated automatically.

Business knowledge is managed from the SiteWise dashboard. Use the dashboard to add knowledge, generate the widget API key, and finish production setup.

Quick Start

"use client";

import { ChatbotWidget } from "sitewise-chatbot-widget";
import "sitewise-chatbot-widget/style.css";
// Use "../" when this component is inside your project's components folder.
import chatbotConfig from "../sitewise-chatbot.config.json";

export default function SupportChat() {
  return (
    <ChatbotWidget
      {...chatbotConfig}
      businessId="YOUR_BUSINESS_ID"
      apiKey="YOUR_WIDGET_API_KEY"
    />
  );
}

For production, copy the businessId and browser-safe widget apiKey from the SiteWise dashboard.

Props

| Prop | Type | Required | Description | | ---------------- | --------------------------------- | -------- | ------------------------------------- | | businessId | string | Yes | Dashboard business identifier | | apiKey | string | Yes | Browser-safe widget API key | | apiBaseUrl | string | No | Optional custom backend API URL | | title | string | No | Chat window title | | subtitle | string | No | Text displayed below the title | | welcomeMessage | string | No | Initial assistant message | | position | "bottom-right" \| "bottom-left" | No | Widget position | | primaryColor | string | No | Primary widget color | | themeMode | "auto" | No | Automatically detects website styling | | theme | object | No | Advanced theme customization |

Example

<ChatbotWidget
  businessId="medical001"
  apiKey="your-widget-api-key"
  title="Support Assistant"
  subtitle="Ask us anything"
  welcomeMessage="Hi! How can I help?"
  position="bottom-right"
  primaryColor="#2563eb"
/>

Styling & Theme

By default, the widget automatically adapts to your website's styling.

The widget can detect and inherit:

• Brand colors
• Typography
• Background colors
• Border radius
• General visual appearance

You can override any detected values using primaryColor or the theme prop.

Example:

<ChatbotWidget
  businessId="medical001"
  apiKey="your-widget-api-key"
  theme={{
    primaryColor: "#2563eb",
    textColor: "#111827",
    surfaceColor: "#ffffff",
    borderColor: "#e5e7eb",
    radius: "12px",
  }}
/>

Advanced Configuration

These options are typically configured during onboarding and do not need to be manually set for most installations.

| Prop | Description | | ----------------- | ------------------------------------------------- | | businessName | Business name used during provisioning | | autoProvision | Legacy automatic provisioning option | | knowledgeSource | Deprecated legacy website-sync option |

Security

The apiKey used by the widget is intended to be browser-safe and is visible to website visitors.

Do not use administrative or server-side API keys in the widget.

Recommended protections:

• Domain restrictions
• Tenant validation
• Rate limiting
• Backend authorization checks

Framework Support

Works with:

• React
• Next.js
• Vite
• WordPress (via script bundle)
• Shopify
• Webflow
• Static HTML websites

License

MIT