← Back to Home

🚀 AI Chatbot Widget

A beautiful, reusable AI chatbot widget that can be easily integrated into any HTML page.

📋 Table of Contents

✨ Features

🎨 Modern Design
Beautiful, responsive interface
🤖 AI Integration
Direct OpenAI API connection
💬 Real-time Chat
Instant conversation flow
📱 Mobile-Friendly
Optimized for all devices
🔧 Easy Integration
Just 2 files + 1 line of code
⚡ Lightweight
Fast loading and performance
🧠 Context-Aware
Automatically understands your website
🎯 Adaptive Behavior
Adjusts to business type and industry
🔍 Smart Suggestions
Relevant conversation starters
🌐 Always Expanded
Ready to use immediately

🚀 Quick Start

1. Include the CSS file

Add this in your HTML <head> section:

<link rel="stylesheet" href="chatbot-widget.css">

2. Include the JavaScript file

Add this before the closing </body> tag:

<script src="chatbot-widget.js"></script>

3. Initialize the widget

<script>
document.addEventListener('DOMContentLoaded', function() {
    new ChatbotWidget();
});
</script>

⚙️ Advanced Usage (chatbot-widget.js)

Custom Configuration

const chatbot = new ChatbotWidget({
    model: 'gpt-4',                    // OpenAI model to use
    maxTokens: 200,                    // Maximum tokens per response
    temperature: 0.8,                  // Response creativity (0-1)
    contextScanning: true,             // Enable automatic context scanning (default: true)
    apiKey: 'your-base64-encoded-key'  // Your OpenAI API key (base64 encoded)
});

Manual Context Mode

Instead of automatic scanning, you can manually define the chatbot's behavior:

Option 1: Initialize with manual context

const chatbot = new ChatbotWidget({
    manualContext: true,                        // Disable auto-scanning
    customSystemPrompt: 'You are a helpful assistant for our premium consulting firm. Help users with business inquiries, service information, and scheduling appointments. Be professional and knowledgeable about business strategy.',
    customWelcomeMessage: 'Welcome to ConsultPro! I\'m here to help you with our consulting services. How can I assist you today?',
    businessType: 'corporate'                   // Optional: for suggestions
});

Option 2: Use only custom system prompt

const chatbot = new ChatbotWidget({
    customSystemPrompt: 'You are a customer service agent for TechStore. Help customers with product information, orders, returns, and technical support. Be friendly and solution-oriented.'
});

Widget Control

// Show/hide the widget
chatbot.show();
chatbot.hide();

// Clear conversation history
chatbot.clearConversation();

// Remove widget completely
chatbot.destroy();

// Context-aware features
chatbot.getWebsiteContext();           // Get scanned website information
chatbot.getContextualSuggestions();    // Get relevant conversation starters
chatbot.refreshContext();              // Re-scan context (useful for SPAs)

// Manual context control
chatbot.updateSystemPrompt('New system prompt here');                    // Update AI behavior
chatbot.updateWelcomeMessage('New welcome message');                     // Update greeting
chatbot.setManualMode(true, {                                           // Enable manual mode
    systemPrompt: 'Custom system prompt',
    welcomeMessage: 'Custom welcome message',
    businessType: 'corporate'
});
chatbot.setManualMode(false);          // Disable manual mode, re-enable auto-scanning
chatbot.getMode();                     // Get current mode and settings

Dynamic Context Switching

You can switch between automatic and manual modes at runtime:

// Start with automatic context scanning
const chatbot = new ChatbotWidget({
    contextScanning: true
});

// Later, switch to manual mode with custom behavior
chatbot.setManualMode(true, {
    systemPrompt: 'You are now a specialized customer support agent for our software platform. Help users with technical issues, account problems, and feature questions.',
    welcomeMessage: 'Hi! I\'m your technical support assistant. How can I help you today?',
    businessType: 'corporate'
});

// Update just the system prompt while keeping manual mode
chatbot.updateSystemPrompt('You are now focused on sales inquiries. Help potential customers understand our products and pricing.');

// Switch back to automatic context detection
chatbot.setManualMode(false);

🧠 Context-Aware Intelligence

Automatic Mode (Default)

The widget automatically scans your website to understand:

Manual Mode

You have complete control over the chatbot's behavior:

Benefits of Both Modes

📁 Files

🌐 Browser Support

🔑 API Key

The widget uses your OpenAI API key to communicate with the AI. For security, the API key is base64 encoded. To use your own key:

  1. Get your API key from OpenAI
  2. Encode it in base64
  3. Replace the apiKey in the widget options

🎯 Demo

Check out our demo pages to see the widget in action:

Ready to get started?

Try the widget on our demo pages or integrate it into your own website!

Live Demo Learn More