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

Go to your Dashboard and select your project.
Navigate to the Embed tab.
Select the API key you want to use (or create a new one).
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" 
  data-api-key="YOUR_PUBLIC_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

Don't want to use a widget? No problem! You can also integrate ChattyBox directly into your app using our REST API.

1
Theme Color
Pick your brand's primary color. This affects the chat button, user messages, and header.
2
Icon Style
Choose between a standard message bubble, a robot icon, or sparkles. You can also select an emoji.

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