ChatBox SDK

Production-ready embeddable chat widget for your conversational flows

Quick Start

Get your chat widget up and running in minutes

1. Include the SDK

Add this script tag before the closing </body> tag

2. Initialize the widget

Configure your chat widget with your API key

<script>
  const chatbox = new ChatBoxSDK({
    apiKey: 'your-api-key-here'
  });
</script>

3. Customize (optional)

Add custom theming and configuration

<script>
  const chatbox = new ChatBoxSDK({
    apiKey: 'your-api-key-here',
    theme: {
      primaryColor: '#000000',
      darkMode: false
    },
    layout: {
      position: 'bottom-right'
    }
  });
</script>

Examples

Explore different integration patterns

Basic Implementation
Simple setup with minimal configuration
Advanced Features
Custom theming and event handling
Embedded Mode
Inline widget integration
React Integration
Using the SDK in React applications

Configuration Reference

Complete API reference for all configuration options

Property Type Default Description
apiKey required - Your API key from DialogKit dashboard
theme.primaryColor optional #007bff Primary color for the chat widget
theme.darkMode optional false Enable dark mode theme
layout.position optional bottom-right Widget position on screen
layout.width optional 380px Widget width
layout.height optional 600px Widget height
behavior.autoOpen optional false Automatically open widget on page load
ui.title optional Chat Support Widget header title

Complete Example

<script>
  const chatbox = new ChatBoxSDK({
    // Required
    apiKey: 'your-api-key-here',

    // Theme customization
    theme: {
      primaryColor: '#000000',
      secondaryColor: '#666666',
      darkMode: false
    },

    // Layout options
    layout: {
      type: 'popup',
      position: 'bottom-right',
      width: '380px',
      height: '600px'
    },

    // Behavior settings
    behavior: {
      autoOpen: false,
      rememberState: true
    }
  });
</script>