@modochats/widget

v1.2.0

Published

2 months ago

A responsive web chat widget for customer support.

Downloads

0High
0Medium
0Low

abolfazl2049

modo chat ai chatbot websocket real-time

Modo Widget

A responsive web chat widget for customer support.

Installation

NPM

Install the package via npm:

npm install @modochats/widget

Then, import and use in your JavaScript/TypeScript code:

import {Widget} from "@modochats/widget";

const widget = new Widget("your-public-key", {
  // options
});

CDN

Alternatively, include the script directly from CDN:

<script src="https://cdn.jsdelivr.net/gh/modochats/webcomponent@main/cdn-dist/modo-web-component.min.js"></script>

Features

🌙 Dark/Light theme support with customizable colors
🌐 RTL (Persian/Farsi) language support
📱 Mobile responsive design
💬 Real-time chat functionality with WebSocket connections
🔗 WebSocket connection status indicator
📝 Markdown message support
🎤 Voice chat capabilities
🖥️ Fullscreen mode option
🎨 Customizable position (left/right), primary and foreground colors
👤 User data management and updates
⚡ TypeScript + Modern JavaScript
🔄 Auto-initialization support

Configuration Options

The widget can be customized with the following options:

| Option | Type | Default | Description | | ----------------- | --------------------- | ----------- | ---------------------------------------------- | | position | "left" \| "right" | "right" | Position of the chat widget on the screen | | theme | "dark" \| "light" | "dark" | Theme mode (dark or light) | | primaryColor | string | "#667eea" | Primary color for the widget | | title | string | "" | Title displayed in the chat header | | foregroundColor | string | "#fff" | Foreground text color | | userData | Record<string, any> | undefined | Custom user data object | | autoInit | boolean | false | Whether to automatically initialize the widget | | fullScreen | boolean | false | Enable fullscreen mode |

Quick Start

Development

Install dependencies
```
yarn install
```
Start development server
```
yarn dev:full
```
This runs TypeScript compiler, Rollup bundler, and live server concurrently.
Open browser Navigate to http://localhost:3000

Production Build

yarn build

This will:

Compile TypeScript to JavaScript
Minify the code
Bundle with Rollup
Output to bundle.js

Project Structure

├── src/                    # Source code
│   ├── app.ts             # Main application entry
│   ├── models/            # Data models
│   ├── services/          # UI and business logic
│   ├── utils/             # Helper utilities
│   └── types/             # TypeScript types
├── temp/                   # Development files
│   ├── css/               # Compiled styles
│   └── dev.html           # Development HTML
├── scripts/               # Build scripts
└── bundle.js              # Production bundle

Available Scripts

| Script | Description | | ----------------- | ------------------------------ | | yarn dev:full | Full development environment | | yarn dev:ts | TypeScript compiler watch mode | | yarn dev:rollup | Rollup bundler watch mode | | yarn dev:server | Live development server | | yarn build | Production build | | yarn compile | Compile TypeScript | | yarn minify | Minify JavaScript |

Usage

Include the widget in your HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Website</title>
  </head>
  <body>
    <!-- Your website content -->

    <script src="https://cdn.jsdelivr.net/gh/modochats/webcomponent@main/cdn-dist/modo-web-component.min.js"></script>
    <script>
      // Initialize the chat widget
      const widget = new ModoWidget("your-public-key", {
        position: "right",
        theme: "dark",
        primaryColor: "#667eea",
        title: "Chat with Us",
        foregroundColor: "#ffffff",
        userData: {name: "John Doe", email: "[email protected]"},
        autoInit: true,
        fullScreen: false
      });
    </script>
  </body>
</html>

Initialization Options

Pass configuration options as the second parameter to the ModoWidget constructor. All options are optional except the public key.

Example with minimal options:

const widget = new ModoWidget("your-public-key");
widget.init(); // Manual initialization if autoInit is false

API Methods

Once initialized, you can interact with the widget instance:

Update User Data

Update or add custom user data dynamically:

await widget.updateUserData({
  name: "Jane Doe",
  email: "[email protected]"
});

This method merges the new data with existing user data and updates it on the server.

Requirements

Node.js 16+
Yarn package manager

License

ISC