Chat-ai-bot-hub-widget NPM

Social AI Chat Widget

A lightweight and customizable chat widget for embedding AI chatbots in any website.

Installation

npm install social-ai-chat-widget

Usage

Basic Usage

import SocialAIChatWidget from 'social-ai-chat-widget';

const chatWidget = new SocialAIChatWidget({
    botId: 'your-bot-id',
    serverUrl: 'https://your-server-url'
});

chatWidget.init();

Advanced Configuration

const chatWidget = new SocialAIChatWidget({
    botId: 'your-bot-id',
    serverUrl: 'https://your-server-url',
    position: 'left', // 'left' or 'right'
    logoUrl: 'https://your-domain.com/logo.png', // Custom logo image
    theme: {
        primaryColor: '#FF5733',
        buttonSize: '70px',
        chatWidth: '400px',
        chatHeight: '600px',
        borderRadius: '15px',
        fontFamily: 'Arial, sans-serif',
        buttonIconSize: '30px',
        buttonShadow: '0 4px 20px rgba(0,0,0,0.2)',
        chatShadow: '0 8px 24px rgba(0,0,0,0.2)',
        chatMargin: '15px',
        animation: true // Enable/disable animations
    }
});

Configuration Options

Option	Type	Default	Description
botId	string	required	Your chatbot ID
serverUrl	string	'http://localhost:5077'	Server URL where your chatbot is hosted
position	string	'right'	Widget position ('left' or 'right')
logoUrl	string	undefined	Custom logo image URL for the chat button

Theme Options

Option	Type	Default	Description
primaryColor	string	'#0084ff'	Primary color for the chat button
buttonSize	string	'60px'	Size of the chat button
chatWidth	string	'350px'	Width of the chat window
chatHeight	string	'500px'	Height of the chat window
borderRadius	string	'10px'	Border radius for chat window and button
fontFamily	string	system fonts	Font family for the chat interface
buttonIconSize	string	'24px'	Size of the button icon/logo
buttonShadow	string	'0 2px 12px rgba(0,0,0,0.1)'	Shadow for the chat button
chatShadow	string	'0 4px 12px rgba(0,0,0,0.15)'	Shadow for the chat window
chatMargin	string	'10px'	Margin between chat window and button
animation	boolean	true	Enable/disable all animations

License

MIT

chatbot widget ai chat customer-support

1.0.0

1 year ago