Widget Setup & Customization

Add an AI-powered chat widget to your website in under 5 minutes.

Quick Setup

Getting your chatbot live is simple. You just need to copy a small snippet of code from your dashboard.

Step 1: Get Your Embed Code

1. Go to your Dashboard and select your project.
2. Navigate to the Embed tab.
3. Select the API key you want to use (or create a new one).
4. Copy the generated code snippet.

Step 2: Add to Your Website

Paste the code snippet just before the closing </body> tag on every page where you want the chat widget to appear.

<script
  src="https://chattybox.ai/widget.js?v=7"
  data-api-key="YOUR_API_KEY"
  async
></script>

Pro Tip

That's it! You don't need to configure colors or settings in the code. Everything is managed from your dashboard.

---

Visual Customization

ChattyBox comes with a fully integrated visual editor. You can tweak the look and feel of your widget to match your brand perfectly without touching any code.

Dashboard Controls

1. Accent Color - Pick your brand's primary color. This affects the launcher, key highlights, and user messages.

2. Position - Choose where the widget appears on the screen.

3. Header Title - Set the title shown at the top of the chat window.

4. Welcome Message - Customize the first message visitors see when they open the chat.

note

Changes made in the dashboard are applied instantly. You do not need to update the embed code on your site.

Local Docker setup

For local testing, you can point the widget at local script/API URLs:

<script
  src="http://127.0.0.1:3001/widget.js?v=7"
  data-api-key="YOUR_API_KEY"
  async
></script>

The local script still talks to your cloud Convex endpoint by default.

---

Advanced Options

Hiding the Widget Programmatically

If you need to hide the widget on certain pages, you can do so with CSS:

.chattybox-widget {
  display: none;
}

API Integration

Don't want to use a widget? You can also integrate ChattyBox directly into your app using our REST API. This is useful for:

• Custom chat interfaces
• In-app messaging
• Automated workflows

Contact us at [email protected] for API documentation.