@my-aichatbot/chat
v1.0.1
Published
Embeddable AI chatbot widget for web applications
Downloads
8
Maintainers
d-effconReadme
@my-aichatbot/chat
Embeddable AI chatbot widget for your website. A lightweight, customizable chat widget that can be embedded in any website via npm or CDN.
Installation
Via npm
npm install @my-aichatbot/chatVia CDN (jsDelivr)
<!-- ES Module -->
<script type="module">
import { createChat } from 'https://cdn.jsdelivr.net/npm/@my-aichatbot/chat@latest/dist/chat.bundle.es.js';
createChat({ botId: 'your-bot-id' });
</script>
<!-- UMD (Global) -->
<script src="https://cdn.jsdelivr.net/npm/@my-aichatbot/chat@latest/dist/chat.bundle.umd.js"></script>
<script>
ChatbotWidget.createChat({ botId: 'your-bot-id' });
</script>Quick Start
Basic HTML Integration
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my site</h1>
<!-- Add the chatbot widget -->
<script type="module">
import { createChat } from 'https://cdn.jsdelivr.net/npm/@my-aichatbot/chat@latest/dist/chat.bundle.es.js';
createChat({
botId: 'your-bot-id',
locale: 'en',
position: 'right',
theme: 'light',
primaryColor: '#007bc8'
});
</script>
</body>
</html>React/Next.js Integration
import { useEffect } from 'react';
import { createChat } from '@my-aichatbot/chat';
function MyApp() {
useEffect(() => {
const widget = createChat({
botId: 'your-bot-id',
locale: 'en'
});
// Clean up on unmount
return () => {
widget.destroy();
};
}, []);
return <div>Your app content</div>;
}Vue.js Integration
<template>
<div>Your app content</div>
</template>
<script>
import { createChat } from '@my-aichatbot/chat';
export default {
mounted() {
this.widget = createChat({
botId: 'your-bot-id',
locale: 'en'
});
},
beforeDestroy() {
if (this.widget) {
this.widget.destroy();
}
}
};
</script>Configuration Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| botId | string | required | Your chatbot's unique identifier |
| apiUrl | string | 'https://app.my-aichatbot.com' | API base URL (usually not needed) |
| locale | string | 'en' | Language locale for the chat interface |
| position | 'left' \| 'right' | 'right' | Widget position on the screen |
| theme | 'light' \| 'dark' \| 'auto' | 'auto' | Color theme |
| primaryColor | string | '#007bc8' | Primary color for the chat button |
| buttonSize | number | 60 | Size of the chat button in pixels |
| zIndex | number | 9999 | CSS z-index for the widget |
| width | number | 400 | Width of the chat window in pixels |
| height | number | 600 | Height of the chat window in pixels |
| launcherText | string | 'Chat with us' | Text on the launcher button |
| launcherTextColor | string | '#ffffff' | Color of the launcher button text |
| shadowColor | string | 'rgba(15, 23, 42, 0.18)' | Shadow color for widget elements |
| welcomeMessage | string | 'Hi there! How can we help you today?' | Welcome message |
API Methods
createChat(config)
Creates and initializes a new chatbot widget.
const widget = createChat({
botId: 'abc123'
});Returns a ChatbotWidget instance.
widget.destroy()
Removes the widget from the page and cleans up resources.
widget.destroy();Features
- 🚀 Lightweight - Minimal bundle size with all dependencies included
- 📱 Mobile Responsive - Automatically adapts to mobile screens
- 🎨 Customizable - Extensive styling options
- ♿ Accessible - ARIA labels and keyboard navigation
- 🔒 Secure - Iframe isolation for security
- 📦 Zero Dependencies - All dependencies bundled in production build
- 🌍 CDN Ready - Works with jsDelivr, unpkg, and other CDNs
Development
Building from Source
# Clone the repository
git clone https://github.com/yourusername/chatbot-widget.git
cd chatbot-widget-npm
# Install dependencies
npm install
# Build the widget
npm run build
# Test locally
npm run testPublishing to npm
When you're ready to publish:
# Login to npm
npm login
# Publish the package
npm publish --access publicAfter publishing, the widget will be automatically available via:
- npm:
npm install @my-aichatbot/chat - jsDelivr CDN:
https://cdn.jsdelivr.net/npm/@my-aichatbot/chat@latest/dist/chat.bundle.es.js - unpkg CDN:
https://unpkg.com/@my-aichatbot/chat@latest/dist/chat.bundle.es.js
Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
License
MIT License - see LICENSE file for details.