ChatBox SDK - Examples

Getting Started

The ChatBox SDK is a lightweight, embeddable chat widget that can be integrated into any website or web application. Choose an example below to see different integration patterns and use cases.


<script>
  window.ChatBoxConfig = {
    apiKey: 'your-api-key',
    theme: { primaryColor: '#007bff' }
  };
</script>
<script src="http://localhost:3003/chatbox-sdk.js"></script>

Choose an Example

Basic Integration

The simplest way to get started with ChatBox SDK. Perfect for quick integration and testing.

Minimal configuration
Auto-initialization
Basic controls
Event listeners

Embedded Layout

Embed the chat widget directly into your page layout instead of a floating popup.

Inline integration
Custom container
Responsive design
Full height layout

Custom Theme Demo

Interactive demo showcasing dynamic theming, real-time customization, and all SDK features.

Real-time theme updates
Theme presets
Live configuration
Export/import config

Advanced Integration

Complete example with programmatic messaging, API integration, event handling, and statistics.

Programmatic messaging
Backend API integration
Event logging
Real-time statistics

React Integration

Complete React integration using custom hooks and proper component lifecycle management.

Custom React hooks
State management
Component lifecycle
TypeScript ready

Context & Session Management

Learn how to pass user context, metadata, and session data to personalize conversations.

User identification (userId)
Custom metadata & fields
Business context (orders, etc.)
6 real-world use cases

Development Playground

Comprehensive testing environment for SDK development with debugging tools and live monitoring.

Real-time console & logs
Message testing suite
Theme & config controls
Test scenario automation

🔜

More Examples Coming Soon

We're working on additional examples including:

Vue.js integration
Angular integration
Next.js integration
E-commerce integration

Coming Soon

Prerequisites

To run these examples locally, make sure you have:

Node.js and npm installed
Run npm install in the chatbox-sdk directory
Start the development server with npm run dev
Open any example file in your browser

Note: All examples use http://localhost:3003 as the SDK URL. Make sure the development server is running.

Documentation

For more detailed information about the ChatBox SDK API, configuration options, and advanced features, check out the documentation: