DialogKit ChatBox SDK

CDN URL

Quick Start Guide

Step 1: Include the SDK

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

Step 2: Initialize

Initialize the chat widget with your API key:

<script>
  DialogKit.init({
    apiKey: 'your-api-key-here',
    flowId: 'your-flow-id',
    position: 'bottom-right'
  });
</script>

Step 3: Customize (Optional)

Add custom theme and configuration:

<script>
  DialogKit.init({
    apiKey: 'your-api-key-here',
    flowId: 'your-flow-id',
    position: 'bottom-right',
    theme: {
      primaryColor: '#667eea',
      botName: 'Support Assistant',
      welcomeMessage: 'Hi! How can I help you today?'
    }
  });
</script>

Live Examples

View working examples:

Basic Implementation Advanced Features Embedded Mode React Integration

⚙️ Configuration Options

Property	Type	Required	Description
`apiKey`	string	Required	Your API key from DialogKit dashboard. Used to authenticate SDK requests.
`flowId`	string	Required	The ID of the conversational flow to execute. Get this from your flow settings.
`position`	string	Optional	Position of the chat widget on screen. Options: `'bottom-right'`, `'bottom-left'`. Default: `'bottom-right'`
`theme`	object	Optional	Theme customization object. See theme properties below.
`theme.primaryColor`	string	Optional	Primary color for the chat widget (hex color). Example: `'#667eea'`
`theme.botName`	string	Optional	Display name for the bot. Example: `'Support Assistant'`
`theme.welcomeMessage`	string	Optional	First message shown to users when they open the chat.
`theme.avatarUrl`	string	Optional	URL to bot avatar image. Should be square (1:1 ratio).
`user`	object	Optional	User identification object. Pass user context to personalize conversations.
`user.id`	string	Optional	Unique identifier for the user. Example: `'user-123'`
`user.name`	string	Optional	User's display name. Example: `'John Doe'`
`user.email`	string	Optional	User's email address. Example: `'john@example.com'`
`autoOpen`	boolean	Optional	Automatically open chat widget on page load. Default: `false`
`showBranding`	boolean	Optional	Show "Powered by DialogKit" branding. Default: `true`

Complete Example

<script>
  DialogKit.init({
    // Required
    apiKey: 'ds_sdk_1234567890abcdef',
    flowId: 'flow_abc123',

    // Optional - Position
    position: 'bottom-right',

    // Optional - Theme customization
    theme: {
      primaryColor: '#667eea',
      botName: 'Support Assistant',
      welcomeMessage: 'Hi! How can I help you today?',
      avatarUrl: 'https://example.com/bot-avatar.png'
    },

    // Optional - User context
    user: {
      id: 'user-123',
      name: 'John Doe',
      email: 'john@example.com'
    },

    // Optional - Behavior
    autoOpen: false,
    showBranding: true
  });
</script>