Dx Chatbot Widget

A lightweight, customizable chatbot widget that can be easily integrated into any website.

Features

• 📱 Responsive design that works on both desktop and mobile devices
• 🔒 Secure cross-origin communication
• 🎨 Customizable positioning
• 🚀 Easy to integrate
• ⚡ Lightweight implementation

Installation

npm install dxchatbot-widget
# or
yarn add dxchatbot-widget

Usage

Import and initialize the chatbot widget in your application:

import { initChatbot } from "dxchatbot-widget";

initChatbot({
  domainId: "your-domain-id",
  domain: "https://your-chatbot-domain.com",
  position: {
    bottom: "50px", // Optional: defaults to '50px'
    right: "50px", // Optional: defaults to '50px'
  },
});

Configuration Options

| Parameter | Type | Description | Default | | ----------------- | -------- | ---------------------------------------- | ----------------------------------- | | domainId | string | Your unique domain identifier | Required | | domain | string | The domain where your chatbot is hosted | Required | | position | object | Positioning configuration for the widget | { bottom: '50px', right: '50px' } | | position.bottom | string | Distance from bottom of the viewport | '50px' | | position.right | string | Distance from right of the viewport | '50px' |

Mobile Responsiveness

The widget automatically adjusts its layout for mobile devices (screens smaller than 768px):

• Takes up most of the viewport width
• Adjusts height to 90% of viewport height
• Maintains proper spacing and usability on smaller screens

Security

The widget implements secure cross-origin communication and only processes messages from the specified domain.

Browser Support

This widget supports all modern browsers including:

• Chrome
• Firefox
• Safari
• Edge

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.