Chatbot Embed Widget

A lightweight, customizable chatbot widget that can be easily embedded into any website. Supports React, vanilla JavaScript, and WordPress integrations.

Features

• 🤖 AI-Powered: Integrates with your chatbot API
• 🎨 Customizable: Multiple themes, colors, and positions
• 📱 Responsive: Works on desktop and mobile devices
• 🔌 Multiple Integrations: React, JavaScript, and WordPress
• ⚡ Lightweight: Minimal bundle size
• 🛡️ Secure: Guest authentication support
• 🎯 Easy Setup: Just a few lines of code

Quick Start

React Integration (React-only entry)

npm install chatbot-embed-widget

import React from 'react';
import 'chatbot-embed-widget/dist/index.esm.css';
import { ChatWidget } from 'chatbot-embed-widget/react';

function App() {
  return (
    <ChatWidget
      apiUrl="https://chatbot-vzv7.onrender.com/api/embed"
      agentId="your-agent-id"
      position="bottom-right"
      theme="light"
      primaryColor="#007bff"
      title="Chat Assistant"
      welcomeMessage="Hello! How can I help you today?"
    />
  );
}

JavaScript Integration (script tag / CDN)

<!-- Include CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chatbot-embed-widget@latest/dist/chatbot-widget.css">

<!-- Include JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/chatbot-embed-widget@latest/dist/chatbot-widget.js"></script>

<script>
window.ChatbotWidget.init({
  apiUrl: 'https://your-api.com/api',
  agentId: 'your-agent-id',
  position: 'bottom-right',
  theme: 'light',
  primaryColor: '#007bff',
  title: 'Chat Assistant',
  welcomeMessage: 'Hello! How can I help you today?'
});
</script>

WordPress Integration

1. Install the plugin
2. Go to Settings → Chatbot Widget
3. Configure your settings
4. Use the shortcode: [chatbot_widget]

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | apiUrl | string | Required | Your chatbot API endpoint | | agentId | string | null | Specific agent ID to use | | position | string | 'bottom-right' | Widget position: 'bottom-right', 'bottom-left', 'top-right', 'top-left' | | theme | string | 'light' | Theme: 'light' or 'dark' | | primaryColor | string | '#007bff' | Primary color for buttons and user messages | | title | string | 'Chat Assistant' | Widget title | | placeholder | string | 'Type your message...' | Input placeholder text | | welcomeMessage | string | 'Hello! How can I help you today?' | Initial message shown to users | | showWelcomeMessage | boolean | true | Whether to show the welcome message | | onMessage | function | null | Callback when a message is sent/received | | onError | function | null | Callback when an error occurs |

API Requirements

Your chatbot API should have the following endpoint:

POST /api/chat/embed

Request Body:

{
  "message": "Hello, how can you help me?",
  "agentId": "optional-agent-id",
  "sessionId": "session_1234567890_abc123"
}

Response:

{
  "response": "Hello! I'm here to help you with any questions you might have.",
  "usage": {
    "prompt_tokens": 10,
    "completion_tokens": 15,
    "total_tokens": 25
  },
  "agentId": "agent-123",
  "sessionId": "session_1234567890_abc123",
  "timestamp": "2024-01-15T10:30:00.000Z"
}

Backend Setup

1. Add Embed Routes

Add the embed routes to your Express.js app:

const embedRoutes = require('./routes/embed');
app.use('/api/embed', embedRoutes);

2. Create Embed Controller

// controllers/embedController.js
const { embedChat, getEmbedAgents } = require('./controllers/embedController');

// POST /api/chat/embed - Chat endpoint for embeddable widget
router.post('/chat/embed', guestAuth, embedChat);

// GET /api/agents/embed - Get available agents
router.get('/agents/embed', getEmbedAgents);

3. Update Agent Model

Add isPublic field to your Agent model:

// models/Agent.js
const agentSchema = new mongoose.Schema({
  // ... existing fields
  isPublic: {
    type: Boolean,
    default: false
  }
});

4. Guest Authentication

The widget uses guest authentication for public access. No user registration required.

Advanced Usage

Custom Styling

You can customize the widget appearance by overriding CSS variables:

.chatbot-widget {
  --primary-color: #your-color;
  --background-color: #your-bg;
  --text-color: #your-text;
  --border-radius: 12px;
}

Event Handling

window.ChatbotWidget.init({
  apiUrl: 'https://your-api.com/api',
  onMessage: function(userMsg, assistantMsg) {
    console.log('User:', userMsg.content);
    console.log('Assistant:', assistantMsg.content);
    
    // Track analytics
    gtag('event', 'chat_message', {
      'event_category': 'engagement',
      'event_label': 'chatbot'
    });
  },
  onError: function(error) {
    console.error('Chat error:', error);
    
    // Send error to monitoring service
    Sentry.captureException(error);
  }
});

Multiple Widgets

You can have multiple chatbot widgets on the same page:

// Widget 1
window.ChatbotWidget.init({
  containerId: 'support-chat',
  apiUrl: 'https://your-api.com/api',
  agentId: 'support-agent',
  position: 'bottom-right'
});

// Widget 2
window.ChatbotWidget.init({
  containerId: 'sales-chat',
  apiUrl: 'https://your-api.com/api',
  agentId: 'sales-agent',
  position: 'bottom-left'
});

WordPress Plugin

Installation

1. Download the plugin files
2. Upload to /wp-content/plugins/chatbot-widget/
3. Activate the plugin
4. Configure in Settings → Chatbot Widget

Shortcode Usage

// Basic usage
[chatbot_widget]

// With custom settings
[chatbot_widget 
  agent_id="support-agent"
  position="bottom-right"
  theme="dark"
  primary_color="#ff6b6b"
  title="Support Chat"
  welcome_message="Hi! I'm here to help with your questions."]

Hooks and Filters

// Modify widget configuration
add_filter('chatbot_widget_config', function($config) {
    $config['primaryColor'] = '#custom-color';
    return $config;
});

// Add custom CSS
add_action('wp_head', function() {
    echo '<style>.chatbot-widget { /* custom styles */ }</style>';
});

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+
• Mobile browsers (iOS Safari, Chrome Mobile)

Security Considerations

1. CORS: Ensure your API allows requests from your domain
2. Rate Limiting: Implement rate limiting on your API
3. Input Validation: Validate all user inputs
4. Content Security Policy: Update your CSP to allow the widget

Troubleshooting

Common Issues

1. Widget not appearing: Check console for JavaScript errors
2. API errors: Verify your API URL and CORS settings
3. Styling issues: Ensure CSS is loaded correctly
4. Mobile issues: Check responsive design settings

Debug Mode

Enable debug mode to see detailed logs:

window.ChatbotWidget.init({
  apiUrl: 'https://your-api.com/api',
  debug: true // Enable debug logging
});

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details.

Support

• Documentation: [Link to docs]
• Issues: [GitHub Issues]
• Email: [email protected]

Changelog

v1.0.0

• Initial release
• React, JavaScript, and WordPress support
• Customizable themes and positions
• Guest authentication
• Mobile responsive design