Embedded Chat Widget

This example demonstrates how to embed the ChatBox SDK directly into your page layout rather than using it as a popup widget. This is ideal for:

  • Support pages with dedicated chat sections
  • Dashboard interfaces with integrated messaging
  • Help centers with inline support chat
  • Admin panels with customer communication
  • Customer portals with persistent chat visibility

Implementation

The embedded layout uses the layout.type: 'embedded' configuration option. Instead of appearing as a floating widget, the chat interface is rendered inside a container element you specify. 

// Initialize with embedded layout
const chatBox = new ChatBoxSDK({
  apiKey: 'your-api-key',
  layout: {
    type: 'embedded',
    containerId: 'chat-widget-container',
    width: '100%',
    height: '100%'
  },
  theme: {
    primaryColor: '#007bff',
    backgroundColor: '#ffffff',
    borderRadius: '0px',  // No border radius for embedded
    shadows: false        // No shadows for embedded
  },
  ui: {
    title: 'Support Chat',
    subtitle: 'Ask us anything',
    minimizeButton: false,  // Typically disabled in embedded
    closeButton: false      // Typically disabled in embedded
  },
  behavior: {
    autoOpen: true,         // Auto-open for embedded mode
    rememberState: false    // Usually don't remember state
  }
});

Key Features

The embedded mode provides all the same functionality as the popup mode, with these differences:

  • Widget renders inside a container element
  • No floating button or minimize/maximize controls
  • Fills the entire container (responsive)
  • Auto-open behavior is typical
  • Perfect for fixed locations in your UI

Programmatic Control

// Send messages programmatically
chatBox.sendToWidget({
  type: 'new-message',
  data: {
    text: 'Hello! How can we help you today?',
    sender: 'agent',
    timestamp: new Date().toISOString()
  }
});

// Listen to events
chatBox.on('message', (data) => {
  console.log('User sent:', data.text);
  // Handle message in your application
});

// Update theme dynamically
chatBox.updateTheme({
  primaryColor: '#ff5722',
  darkMode: true
});

// Update configuration
chatBox.updateConfig({
  ui: {
    title: 'New Title',
    placeholder: 'New placeholder...'
  }
});

Testing with Config Panel

Use the configuration panel at the top to:

  • Switch between embedded and popup modes
  • Test different themes and colors
  • Send test messages to the embedded widget
  • Run automated test scenarios
  • Monitor events and statistics