Configuration Options

Customize your chatbot's appearance, behavior, and features

Configuration

Theming

Customization

Configuration Overview

The SDK offers extensive configuration options to customize the chatbot's appearance, behavior, and features. All options are passed to the ChatbotSDK.init() method.

Basic Configuration

ChatbotSDK.init({
  apiKey: 'your-api-key',
  botId: 'your-bot-id',
  theme: 'light',
  position: 'bottom-right'
});

Required Parameters: apiKey and botId are required for the SDK to function. All other options are optional.

Appearance Options

theme

string

Choose between light and dark theme for the chatbot interface

Default: "light"
Options: light, dark

position

string

Position of the chatbot widget on the page

Default: "bottom-right"
Options: bottom-right, bottom-left

primaryColor

string

Primary color for the chatbot interface (hex color code)

Default: "#3b82f6"

borderRadius

string

Border radius for the chatbot widget and messages

Default: "12px"

Example Configuration

ChatbotSDK.init({
  apiKey: 'your-api-key',
  botId: 'your-bot-id',
  
  // Appearance settings
  theme: 'dark',
  position: 'bottom-left',
  primaryColor: '#10b981',
  borderRadius: '8px'
});

Complete Configuration Example

Here's a complete example showing all available configuration options:

Full Configuration

ChatbotSDK.init({
  // Required
  apiKey: 'cb_86dff3cd_d88c309be3490c5aa981cd0007a4d4c5ce95f88140becc2876480da17a5fe6f5',
  botId: '676c86dc0b95b800088f76a5',
  
  // Appearance
  theme: 'light',
  position: 'bottom-right',
  primaryColor: '#3b82f6',
  borderRadius: '12px',
  
  // Behavior
  autoOpen: false,
  showWelcomeMessage: true,
  welcomeMessage: 'Hello! How can I help you today?',
  placeholder: 'Type your message...',
  enableTyping: true,
  
  // Features
  enableSounds: false,
  enableFileUpload: true,
  maxMessages: 100,
  enableMarkdown: true,
  
  // Event callbacks
  onOpen: function() {
    console.log('Chatbot opened');
  },
  onClose: function() {
    console.log('Chatbot closed');
  },
  onMessage: function(message) {
    console.log('New message:', message);
  }
});

Event Callbacks

Hook into chatbot events to create custom interactions:

onOpen

Triggered when the chatbot opens

onClose

Triggered when the chatbot closes

onMessage

Triggered on new messages

Best Practices: Start with minimal configuration and add options as needed. Test your configuration on different devices and screen sizes.

Next Steps

React SDK Guide

Learn about React-specific integration options.

Read Guide

Test Your Configuration

Try different settings in our live testing environment.

Open Tester