ChatBox SDK - Basic Example

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

ℹ️ About This Example: This demonstrates the minimal setup required to integrate ChatBox SDK. The widget appears as a floating chat button in the bottom-right corner. Use the configuration panel below to test different settings, user contexts, and scenarios without writing any code.

🎯 What You'll Learn

How to add ChatBox SDK with minimal configuration
Basic widget controls (open, close, toggle)
Event listeners for widget interactions
Testing different user contexts and scenarios
Customizing theme colors and UI text

📝 Integration Steps

Follow these simple steps to integrate ChatBox SDK into any website:

Step 1: Add the SDK Script

<!-- Auto-detect environment -->
<script>
  const isLocalhost = window.location.hostname === 'localhost';
  const sdkUrl = isLocalhost
    ? 'http://localhost:3003/chatbox-sdk.js'
    : 'https://cdn.dialogkit.io/chatbox-sdk.min.js';
  document.write('<script src="' + sdkUrl + '"><\/script>');
</script>

Step 2: Initialize with Configuration

<script>
  window.ChatBoxConfig = {
    apiKey: 'your-api-key-here',
    theme: {
      primaryColor: '#007bff',
      secondaryColor: '#6c757d'
    },
    ui: {
      title: 'Customer Support',
      subtitle: 'We\'re online now'
    }
  };
</script>

Step 3: That's It! 🎉

The SDK will automatically initialize and display a chat button in your chosen position (default: bottom-right).

🎨 Try It Out

Use the configuration panel at the top to:

Edit the JSON configuration in real-time
Try different quick configuration templates (guest, e-commerce, SaaS, etc.)
Test the Testing Suite tab to send messages and run scenarios
Monitor widget status and events in the Status & Logs tab
Preview theme changes before applying them

💡 Configuration Options

Required:

apiKey - Your unique API key for the service

Optional:

userId - Unique identifier for the user (auto-generated if not provided)
userMetadata - Additional user information (name, email, custom fields)
context - Page or session context (current page, order ID, etc.)
theme - Visual customization (colors, dark mode)
ui - Text customization (title, subtitle, placeholder)
layout - Widget positioning and type
behavior - Widget behavior settings (auto-open, remember state)

🔍 What's Next?

Once you're comfortable with the basics, check out these examples:

Embedded Layout - Integrate the widget inline into your page
Custom Theme - Deep dive into theming and customization
Advanced Integration - API calls, events, and programmatic control
Context & Session Management - Learn about passing user data

📚 Full Configuration Example

const chatBox = new ChatBoxSDK({
  // Required
  apiKey: 'your-api-key',

  // User Identification (optional)
  userId: 'user-12345',
  userMetadata: {
    name: 'John Doe',
    email: 'john@example.com',
    customFields: {
      plan: 'pro',
      signupDate: '2024-01-01'
    }
  },

  // Context (optional)
  context: {
    page: 'checkout',
    cartTotal: 99.99
  },

  // Theme (optional)
  theme: {
    primaryColor: '#007bff',
    secondaryColor: '#6c757d',
    backgroundColor: '#ffffff',
    textColor: '#333333',
    darkMode: false
  },

  // UI Text (optional)
  ui: {
    title: 'Customer Support',
    subtitle: 'We\'re online now',
    placeholder: 'Type your message...'
  },

  // Layout (optional)
  layout: {
    type: 'popup',          // or 'embedded'
    position: 'bottom-right' // or 'bottom-left', 'top-right', 'top-left'
  },

  // Behavior (optional)
  behavior: {
    autoOpen: false,
    rememberState: true,
    showUnreadCount: true
  }
});

// Event Listeners
chatBox.on('ready', () => console.log('Widget ready'));
chatBox.on('open', () => console.log('Widget opened'));
chatBox.on('close', () => console.log('Widget closed'));
chatBox.on('message', (data) => console.log('Message received:', data));

ChatBox SDK - Basic Integration Beginner