Chatbot Widget SDK

A fully config-driven embeddable chat widget SDK built with TypeScript, Rollup, and Shadow DOM encapsulation.

Features

• Config-Driven Architecture: All styling, colors, and text content come from the API
• Shadow DOM Encapsulation: Isolated styles that won't conflict with host page
• WebSocket Support: Real-time chat with automatic reconnection
• Session Persistence: Chat history preserved via localStorage
• TypeScript: Full type safety and IDE support
• Lightweight: ~30KB minified and gzipped
• Mobile Responsive: Adapts to all screen sizes

Installation

CDN (Recommended)

<script src="https://your-cdn.com/chatbot-widget.min.js"></script>
<script>
  const widget = new ChatbotWidget.default('pk_your_public_key');
  widget.init();
</script>

Auto-Init

<script
  src="https://your-cdn.com/chatbot-widget.min.js"
  data-key="pk_your_public_key"
></script>

With debug mode:

<script
  src="https://your-cdn.com/chatbot-widget.min.js"
  data-key="pk_your_public_key"
  data-debug
></script>

NPM

npm install chatbot-widget-sdk

import ChatbotWidget from 'chatbot-widget-sdk';

const widget = new ChatbotWidget('pk_your_public_key', {
  debug: true  // optional
});

await widget.init();

API

Constructor

const widget = new ChatbotWidget(publicKey: string, options?: WidgetOptions);

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | debug | boolean | false | Enable debug logging |

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 10.1+
• Edge 79+

License

MIT