A responsive web chat widget for customer support.
npm install @modochats/widgetA responsive web chat widget for customer support.
Install the package via npm:
``bash`
npm install @modochats/widget
Then, import and use in your JavaScript/TypeScript code:
`javascript
import {Widget} from "@modochats/widget";
const widget = new Widget("your-public-key", {
// options
});
`
Alternatively, include the script directly from CDN:
`html`
- š 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
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 | undefined | Custom user data object |autoInit
| | boolean | false | Whether to automatically initialize the widget |fullScreen
| | boolean | false | Enable fullscreen mode |
1. Install dependencies
`bash`
yarn install
2. Start development server
`bash`
yarn dev:full
This runs TypeScript compiler, Rollup bundler, and live server concurrently.
3. Open browser Navigate to http://localhost:3000
`bash`
yarn build
This will:
- Compile TypeScript to JavaScript
- Minify the code
- Bundle with Rollup
- Output to bundle.js
``
āāā 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
| 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 |
Include the widget in your HTML:
`html
`
Pass configuration options as the second parameter to the ModoWidget constructor. All options are optional except the public key.
Example with minimal options:
`javascript`
const widget = new ModoWidget("your-public-key");
widget.init(); // Manual initialization if autoInit is false
Once initialized, you can interact with the widget instance:
Update or add custom user data dynamically:
`javascript``
await widget.updateUserData({
name: "Jane Doe",
email: "jane@example.com"
});
This method merges the new data with existing user data and updates it on the server.
- Node.js 16+
- Yarn package manager
ISC