Public Holidays Coupon Code Code Compiler

How to integrate AI chatbot in website


Oct 9, 2025

How to integrate AI chatbot in website

In today's digital landscape, AI chatbot integration has become essential for businesses looking to enhance customer engagement and provide 24/7 support. This comprehensive guide will walk you through the process of integrating a custom AI chatbot into your website, from setup to deployment.

Why Integrate an AI Chatbot on Your Website?

Before diving into the technical implementation, let's understand why AI chatbot integration is crucial for modern websites:

AI chatbots provide instant responses to customer queries, reduce support costs by automating repetitive tasks, improve user engagement and satisfaction, collect valuable customer data and insights, and operate round-the-clock without human intervention. Whether you're running an e-commerce store, a SaaS platform, or a corporate website, implementing a chatbot can significantly enhance your customer experience.

Prerequisites for Chatbot Implementation

Before we begin the chatbot implementation, ensure you have the following:

Basic knowledge of HTML, CSS, and JavaScript, a text editor or IDE (VS Code, Sublime Text, etc.), a web hosting environment or local server, an API key from your chosen AI service provider (OpenAI, Dialogflow, or similar), and basic understanding of REST APIs and asynchronous JavaScript.

Project Structure Overview

Let's start by setting up our website chatbot project structure. Create the following directory layout:

project-root/
│
├── index.html
├── css/
│   └── chatbot.css
├── js/
│   ├── chatbot.js
│   └── config.js
├── images/
│   └── chatbot-icon.png
└── api/
    └── chat-handler.php

This organized structure ensures clean separation of concerns and makes your AI assistant for website easy to maintain and scale.

Step 1: Create the HTML Structure

First, create your index.html file in the project root directory. This file will contain the main chatbot interface:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn how to integrate AI chatbot in your website with this comprehensive guide">
    <title>AI Chatbot Integration - Step by Step Guide</title>
    <link rel="stylesheet" href="css/chatbot.css">
</head>
<body>
    <!-- Your main website content -->
    <main>
        <h1>Welcome to Our Website</h1>
        <p>Your main content goes here...</p>
    </main>

    <!-- Chatbot Widget -->
    <div id="chatbot-container" class="chatbot-closed">
        <div id="chatbot-header">
            <h3>AI Assistant</h3>
            <button id="close-chat" aria-label="Close chat">×</button>
        </div>
        
        <div id="chatbot-messages">
            <div class="bot-message">
                <p>Hello! How can I assist you today?</p>
            </div>
        </div>
        
        <div id="chatbot-input-area">
            <input 
                type="text" 
                id="user-input" 
                placeholder="Type your message..."
                aria-label="Chat input"
            >
            <button id="send-btn" aria-label="Send message">Send</button>
        </div>
    </div>

    <!-- Chatbot Toggle Button -->
    <button id="chatbot-toggle" aria-label="Open chat">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2Z" fill="white"/>
        </svg>
    </button>

    <script src="js/config.js"></script>
    <script src="js/chatbot.js"></script>
</body>
</html>

Understanding the HTML Structure

The HTML above creates a complete chatbot implementation with three main components: the chatbot container (holds all chat interface elements), the messages area (displays conversation history), and the input area (allows users to type and send messages). The toggle button remains visible to open the chat interface.

Step 2: Style Your Chatbot with CSS

Create css/chatbot.css file to style your AI assistant for website:

/* Chatbot Container Styles */
#chatbot-container {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 350px;
    height: 500px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: all 0.3s ease;
    overflow: hidden;
}

#chatbot-container.chatbot-closed {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

/* Header Styles */
#chatbot-header {
    background: linear-gradient(135deg, #01AEEF 0%, #0184C7 100%);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#chatbot-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

#close-chat {
    background: transparent;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
}

/* Messages Area */
#chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f5f7fa;
}

/* Message Styles */
.bot-message, .user-message {
    margin-bottom: 15px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bot-message p {
    background: #ffffff;
    color: #333;
    padding: 12px 16px;
    border-radius: 18px 18px 18px 4px;
    display: inline-block;
    max-width: 80%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin: 0;
}

.user-message p {
    background: #01AEEF;
    color: white;
    padding: 12px 16px;
    border-radius: 18px 18px 4px 18px;
    display: inline-block;
    max-width: 80%;
    margin: 0 0 0 auto;
    text-align: right;
}

.user-message {
    text-align: right;
}

/* Input Area */
#chatbot-input-area {
    display: flex;
    padding: 15px;
    background: white;
    border-top: 1px solid #e0e0e0;
}

#user-input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 25px;
    padding: 10px 15px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

#user-input:focus {
    border-color: #01AEEF;
}

#send-btn {
    background: #01AEEF;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    margin-left: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
}

#send-btn:hover {
    background: #0184C7;
}

/* Toggle Button */
#chatbot-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #01AEEF 0%, #0184C7 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(1, 174, 239, 0.4);
    z-index: 999;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#chatbot-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(1, 174, 239, 0.6);
}

/* Loading Indicator */
.typing-indicator {
    display: inline-block;
    padding: 12px 16px;
    background: white;
    border-radius: 18px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.typing-indicator span {
    height: 8px;
    width: 8px;
    background: #01AEEF;
    border-radius: 50%;
    display: inline-block;
    margin: 0 2px;
    animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    #chatbot-container {
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        bottom: 20px;
        right: 20px;
        left: 20px;
        max-width: none;
    }
}

CSS Design Highlights

The stylesheet creates a modern, professional website chatbot interface with smooth animations for message appearance, gradient backgrounds using your primary color (#01AEEF), responsive design that works on all devices, typing indicator for better UX, and hover effects for interactive elements.

Step 3: Configure Your AI Service

Create js/config.js file to store your configuration settings:

// AI Chatbot Configuration
const CHATBOT_CONFIG = {
    // API Configuration
    apiEndpoint: 'api/chat-handler.php', // Your backend endpoint
    apiKey: 'YOUR_API_KEY_HERE', // Replace with your actual API key
    
    // Chatbot Settings
    botName: 'AI Assistant',
    welcomeMessage: 'Hello! How can I assist you today?',
    errorMessage: 'Sorry, I encountered an error. Please try again.',
    
    // UI Settings
    maxMessageLength: 500,
    typingDelay: 1000, // Milliseconds
    
    // Response Settings
    model: 'gpt-3.5-turbo', // Or your preferred AI model
    temperature: 0.7,
    maxTokens: 150
};

// Security: Never expose your actual API key in frontend code
// This is just for demonstration. Use environment variables and backend proxy

Important Security Note: Never hardcode your actual API keys in frontend JavaScript. Always use a backend proxy (PHP, Node.js, etc.) to handle API requests securely.

Step 4: Implement the Chatbot Logic

Create js/chatbot.js file to implement the core chatbot implementation functionality:

// Chatbot Main Logic
class AIChatbot {
    constructor() {
        this.chatContainer = document.getElementById('chatbot-container');
        this.messagesArea = document.getElementById('chatbot-messages');
        this.userInput = document.getElementById('user-input');
        this.sendBtn = document.getElementById('send-btn');
        this.toggleBtn = document.getElementById('chatbot-toggle');
        this.closeBtn = document.getElementById('close-chat');
        
        this.conversationHistory = [];
        this.isProcessing = false;
        
        this.init();
    }
    
    init() {
        // Event Listeners
        this.sendBtn.addEventListener('click', () => this.handleSend());
        this.userInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                this.handleSend();
            }
        });
        
        this.toggleBtn.addEventListener('click', () => this.toggleChat());
        this.closeBtn.addEventListener('click', () => this.toggleChat());
        
        // Load conversation history from memory
        this.loadConversationHistory();
    }
    
    toggleChat() {
        this.chatContainer.classList.toggle('chatbot-closed');
        
        if (!this.chatContainer.classList.contains('chatbot-closed')) {
            this.userInput.focus();
        }
    }
    
    async handleSend() {
        const message = this.userInput.value.trim();
        
        if (!message || this.isProcessing) return;
        
        if (message.length > CHATBOT_CONFIG.maxMessageLength) {
            this.displayError('Message is too long. Please keep it under ' + 
                            CHATBOT_CONFIG.maxMessageLength + ' characters.');
            return;
        }
        
        // Display user message
        this.displayMessage(message, 'user');
        this.userInput.value = '';
        
        // Show typing indicator
        this.showTypingIndicator();
        
        // Process message
        this.isProcessing = true;
        
        try {
            const response = await this.sendToAI(message);
            this.removeTypingIndicator();
            this.displayMessage(response, 'bot');
        } catch (error) {
            this.removeTypingIndicator();
            this.displayError(CHATBOT_CONFIG.errorMessage);
            console.error('Chatbot error:', error);
        } finally {
            this.isProcessing = false;
        }
    }
    
    displayMessage(text, sender) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `${sender}-message`;
        
        const messageParagraph = document.createElement('p');
        messageParagraph.textContent = text;
        
        messageDiv.appendChild(messageParagraph);
        this.messagesArea.appendChild(messageDiv);
        
        // Scroll to bottom
        this.messagesArea.scrollTop = this.messagesArea.scrollHeight;
        
        // Save to conversation history
        this.conversationHistory.push({
            role: sender === 'user' ? 'user' : 'assistant',
            content: text,
            timestamp: new Date().toISOString()
        });
        
        this.saveConversationHistory();
    }
    
    showTypingIndicator() {
        const indicator = document.createElement('div');
        indicator.className = 'bot-message typing-indicator';
        indicator.id = 'typing-indicator';
        indicator.innerHTML = '';
        this.messagesArea.appendChild(indicator);
        this.messagesArea.scrollTop = this.messagesArea.scrollHeight;
    }
    
    removeTypingIndicator() {
        const indicator = document.getElementById('typing-indicator');
        if (indicator) {
            indicator.remove();
        }
    }
    
    async sendToAI(message) {
        // Prepare request payload
        const payload = {
            message: message,
            conversationHistory: this.conversationHistory.slice(-10), // Last 10 messages
            config: {
                model: CHATBOT_CONFIG.model,
                temperature: CHATBOT_CONFIG.temperature,
                maxTokens: CHATBOT_CONFIG.maxTokens
            }
        };
        
        // Send request to backend
        const response = await fetch(CHATBOT_CONFIG.apiEndpoint, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(payload)
        });
        
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        
        const data = await response.json();
        
        if (data.error) {
            throw new Error(data.error);
        }
        
        return data.response;
    }
    
    displayError(message) {
        const errorDiv = document.createElement('div');
        errorDiv.className = 'bot-message error-message';
        errorDiv.innerHTML = `

${message}

`; this.messagesArea.appendChild(errorDiv); this.messagesArea.scrollTop = this.messagesArea.scrollHeight; } saveConversationHistory() { // Store in memory during session // Note: We don't use localStorage as per Claude.ai restrictions window.chatHistory = this.conversationHistory; } loadConversationHistory() { // Load from memory if available if (window.chatHistory) { this.conversationHistory = window.chatHistory; // Restore messages in UI this.conversationHistory.forEach(msg => { if (msg.role !== 'system') { this.displayMessage(msg.content, msg.role === 'user' ? 'user' : 'bot'); } }); } } } // Initialize chatbot when DOM is loaded document.addEventListener('DOMContentLoaded', () => { const chatbot = new AIChatbot(); console.log('AI Chatbot initialized successfully'); });

Key Features of the JavaScript Implementation

This custom chatbot development code includes asynchronous message handling for smooth UX, conversation history management, typing indicators for better user experience, error handling and validation, responsive event listeners, and memory-based storage (compatible with Claude.ai environment).

Step 5: Create the Backend API Handler

Create api/chat-handler.php file to handle chatbot API integration securely:

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

// Handle preflight requests
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit();
}

// Only allow POST requests
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    echo json_encode(['error' => 'Method not allowed']);
    exit();
}

// Get request data
$input = file_get_contents('php://input');
$data = json_decode($input, true);

if (!$data || !isset($data['message'])) {
    http_response_code(400);
    echo json_encode(['error' => 'Invalid request']);
    exit();
}

// Configuration - Store API key securely
$apiKey = getenv('OPENAI_API_KEY') ?: 'your-api-key-here';
$apiUrl = 'https://api.openai.com/v1/chat/completions';

// Prepare conversation messages
$messages = [
    [
        'role' => 'system',
        'content' => 'You are a helpful AI assistant integrated into a website. Provide concise, friendly, and helpful responses.'
    ]
];

// Add conversation history
if (isset($data['conversationHistory']) && is_array($data['conversationHistory'])) {
    foreach ($data['conversationHistory'] as $msg) {
        if (isset($msg['role']) && isset($msg['content'])) {
            $messages[] = [
                'role' => $msg['role'],
                'content' => $msg['content']
            ];
        }
    }
}

// Add current message
$messages[] = [
    'role' => 'user',
    'content' => sanitizeInput($data['message'])
];

// Prepare API request
$requestData = [
    'model' => $data['config']['model'] ?? 'gpt-3.5-turbo',
    'messages' => $messages,
    'temperature' => $data['config']['temperature'] ?? 0.7,
    'max_tokens' => $data['config']['maxTokens'] ?? 150
];

// Make API request
$ch = curl_init($apiUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($requestData));
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Content-Type: application/json',
    'Authorization: Bearer ' . $apiKey
]);

$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

if ($httpCode !== 200) {
    http_response_code(500);
    echo json_encode(['error' => 'AI service error']);
    exit();
}

$responseData = json_decode($response, true);

if (!isset($responseData['choices'][0]['message']['content'])) {
    http_response_code(500);
    echo json_encode(['error' => 'Invalid AI response']);
    exit();
}

// Return successful response
echo json_encode([
    'success' => true,
    'response' => $responseData['choices'][0]['message']['content'],
    'timestamp' => date('c')
]);

// Helper function to sanitize input
function sanitizeInput($input) {
    return htmlspecialchars(strip_tags(trim($input)), ENT_QUOTES, 'UTF-8');
}
?>

Backend Security Best Practices

The PHP handler implements crucial security measures for AI chatbot integration: API key stored in environment variables (never in code), input sanitization to prevent XSS attacks, CORS headers for cross-origin requests, request validation and error handling, and rate limiting (recommended to add).

Step 6: Environment Configuration

For production deployment, create a .env file to store sensitive configuration:

# .env file (Never commit this to version control)
OPENAI_API_KEY=your_actual_api_key_here
API_RATE_LIMIT=100
ALLOWED_ORIGINS=https://yourdomain.com

And update your PHP to use environment variables:

<?php
// At the top of chat-handler.php
require_once __DIR__ . '/../vendor/autoload.php';

// Load environment variables
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__ . '/..');
$dotenv->load();

// Now use environment variables securely
$apiKey = $_ENV['OPENAI_API_KEY'];
$allowedOrigins = explode(',', $_ENV['ALLOWED_ORIGINS']);
// Validate origin
$origin = $_SERVER['HTTP_ORIGIN'] ?? '';
if (!in_array($origin, $allowedOrigins)) {
http_response_code(403);
echo json_encode(['error' => 'Forbidden']);
exit();
}
?>

Step 7: Alternative AI Service Integration

While we used OpenAI in the example above, you can integrate other AI chatbot services. Here's an example using Google's Dialogflow:

Dialogflow Integration

Create api/dialogflow-handler.php for Dialogflow integration:

<?php
header('Content-Type: application/json');

require_once __DIR__ . '/../vendor/autoload.php';

use Google\Cloud\Dialogflow\V2\SessionsClient;
use Google\Cloud\Dialogflow\V2\TextInput;
use Google\Cloud\Dialogflow\V2\QueryInput;

// Get request data
$input = file_get_contents('php://input');
$data = json_decode($input, true);

if (!$data || !isset($data['message'])) {
    http_response_code(400);
    echo json_encode(['error' => 'Invalid request']);
    exit();
}

try {
    // Dialogflow Configuration
    $projectId = $_ENV['DIALOGFLOW_PROJECT_ID'];
    $sessionId = $_ENV['DIALOGFLOW_SESSION_ID'] ?? uniqid();
    $languageCode = 'en-US';
    
    // Create sessions client
    $sessionsClient = new SessionsClient([
        'credentials' => $_ENV['GOOGLE_APPLICATION_CREDENTIALS']
    ]);
    
    // Prepare session
    $session = $sessionsClient->sessionName($projectId, $sessionId);
    
    // Create text input
    $textInput = new TextInput();
    $textInput->setText($data['message']);
    $textInput->setLanguageCode($languageCode);
    
    // Create query input
    $queryInput = new QueryInput();
    $queryInput->setText($textInput);
    
    // Detect intent
    $response = $sessionsClient->detectIntent($session, $queryInput);
    $queryResult = $response->getQueryResult();
    
    // Get response text
    $responseText = $queryResult->getFulfillmentText();
    
    echo json_encode([
        'success' => true,
        'response' => $responseText,
        'intent' => $queryResult->getIntent()->getDisplayName(),
        'confidence' => $queryResult->getIntentDetectionConfidence()
    ]);
    
} catch (Exception $e) {
    http_response_code(500);
    echo json_encode([
        'error' => 'Dialogflow error: ' . $e->getMessage()
    ]);
} finally {
    $sessionsClient->close();
}
?>

Step 8: Add Advanced Features

Enhance your conversational AI with these advanced features:

File Upload Support

Add file upload capability to your chatbot. Update index.html:

<!-- Add inside chatbot-input-area -->
<div id="chatbot-input-area">
    <label for="file-upload" class="file-upload-btn" aria-label="Upload file">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </label>
    <input type="file" id="file-upload" style="display: none;" accept="image/*,.pdf,.doc,.docx">
    
    <input 
        type="text" 
        id="user-input" 
        placeholder="Type your message..."
        aria-label="Chat input"
    >
    <button id="send-btn" aria-label="Send message">Send</button>
</div>

Add file handling to js/chatbot.js:

// Add to AIChatbot class
handleFileUpload() {
    const fileInput = document.getElementById('file-upload');
    const uploadBtn = document.querySelector('.file-upload-btn');
    
    uploadBtn.addEventListener('click', () => {
        fileInput.click();
    });
    
    fileInput.addEventListener('change', async (e) => {
        const file = e.target.files[0];
        if (!file) return;
        
        // Validate file size (max 5MB)
        if (file.size > 5 * 1024 * 1024) {
            this.displayError('File size must be less than 5MB');
            return;
        }
        
        this.showTypingIndicator();
        
        try {
            const formData = new FormData();
            formData.append('file', file);
            formData.append('message', 'User uploaded a file: ' + file.name);
            
            const response = await fetch('api/file-handler.php', {
                method: 'POST',
                body: formData
            });
            
            const data = await response.json();
            
            this.removeTypingIndicator();
            
            if (data.success) {
                this.displayMessage('File uploaded: ' + file.name, 'user');
                this.displayMessage(data.response, 'bot');
            } else {
                this.displayError('Failed to upload file');
            }
            
        } catch (error) {
            this.removeTypingIndicator();
            this.displayError('Error uploading file');
            console.error('Upload error:', error);
        }
        
        // Reset file input
        fileInput.value = '';
    });
}

// Call in init() method
init() {
    // ... existing code ...
    this.handleFileUpload();
}

Voice Input Integration

Add voice recognition to your integrate chatbot:

// Add to AIChatbot class
initVoiceRecognition() {
    if (!('webkitSpeechRecognition' in window)) {
        console.log('Voice recognition not supported');
        return;
    }
    
    const recognition = new webkitSpeechRecognition();
    recognition.continuous = false;
    recognition.interimResults = false;
    recognition.lang = 'en-US';
    
    const voiceBtn = document.createElement('button');
    voiceBtn.id = 'voice-btn';
    voiceBtn.setAttribute('aria-label', 'Voice input');
    voiceBtn.innerHTML = `
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" fill="currentColor"/>
            <path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v4M8 23h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
    `;
    
    const inputArea = document.getElementById('chatbot-input-area');
    inputArea.insertBefore(voiceBtn, this.userInput);
    
    voiceBtn.addEventListener('click', () => {
        recognition.start();
        voiceBtn.classList.add('recording');
    });
    
    recognition.onresult = (event) => {
        const transcript = event.results[0][0].transcript;
        this.userInput.value = transcript;
        voiceBtn.classList.remove('recording');
    };
    
    recognition.onerror = (event) => {
        console.error('Speech recognition error:', event.error);
        voiceBtn.classList.remove('recording');
    };
    
    recognition.onend = () => {
        voiceBtn.classList.remove('recording');
    };
}

Add CSS for voice button in css/chatbot.css:

/* Voice Button Styles */
#voice-btn {
    background: transparent;
    border: 1px solid #01AEEF;
    color: #01AEEF;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

#voice-btn:hover {
    background: #01AEEF;
    color: white;
}

#voice-btn.recording {
    background: #e74c3c;
    border-color: #e74c3c;
    color: white;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.file-upload-btn {
    background: transparent;
    border: 1px solid #01AEEF;
    color: #01AEEF;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.file-upload-btn:hover {
    background: #01AEEF;
    color: white;
}

Step 9: Analytics and Monitoring

Track your chatbot implementation performance with analytics. Create api/analytics.php:

<?php
require_once __DIR__ . '/../vendor/autoload.php';

class ChatbotAnalytics {
    private $pdo;
    
    public function __construct() {
        $dbHost = $_ENV['DB_HOST'];
        $dbName = $_ENV['DB_NAME'];
        $dbUser = $_ENV['DB_USER'];
        $dbPass = $_ENV['DB_PASS'];
        
        $this->pdo = new PDO(
            "mysql:host=$dbHost;dbname=$dbName;charset=utf8mb4",
            $dbUser,
            $dbPass,
            [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
        );
    }
    
    public function logConversation($userId, $message, $response, $intent = null) {
        $sql = "INSERT INTO chatbot_logs 
                (user_id, user_message, bot_response, intent, created_at) 
                VALUES (:user_id, :message, :response, :intent, NOW())";
        
        $stmt = $this->pdo->prepare($sql);
        $stmt->execute([
            'user_id' => $userId,
            'message' => $message,
            'response' => $response,
            'intent' => $intent
        ]);
        
        return $this->pdo->lastInsertId();
    }
    
    public function getConversationStats($startDate, $endDate) {
        $sql = "SELECT 
                    COUNT(*) as total_conversations,
                    COUNT(DISTINCT user_id) as unique_users,
                    AVG(LENGTH(user_message)) as avg_message_length,
                    DATE(created_at) as date
                FROM chatbot_logs
                WHERE created_at BETWEEN :start_date AND :end_date
                GROUP BY DATE(created_at)
                ORDER BY date DESC";
        
        $stmt = $this->pdo->prepare($sql);
        $stmt->execute([
            'start_date' => $startDate,
            'end_date' => $endDate
        ]);
        
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    }
    
    public function getPopularIntents($limit = 10) {
        $sql = "SELECT 
                    intent,
                    COUNT(*) as count
                FROM chatbot_logs
                WHERE intent IS NOT NULL
                GROUP BY intent
                ORDER BY count DESC
                LIMIT :limit";
        
        $stmt = $this->pdo->prepare($sql);
        $stmt->bindValue(':limit', $limit, PDO::PARAM_INT);
        $stmt->execute();
        
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    }
}
?>

Database Schema for Analytics

Create the database table using this SQL script database/schema.sql:

-- Create database
CREATE DATABASE IF NOT EXISTS chatbot_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

USE chatbot_db;

-- Chatbot logs table
CREATE TABLE IF NOT EXISTS chatbot_logs (
    id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    user_id VARCHAR(255) NOT NULL,
    user_message TEXT NOT NULL,
    bot_response TEXT NOT NULL,
    intent VARCHAR(100),
    response_time INT UNSIGNED,
    session_id VARCHAR(255),
    user_agent TEXT,
    ip_address VARCHAR(45),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    INDEX idx_user_id (user_id),
    INDEX idx_created_at (created_at),
    INDEX idx_intent (intent),
    INDEX idx_session_id (session_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- User feedback table
CREATE TABLE IF NOT EXISTS chatbot_feedback (
    id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    log_id BIGINT UNSIGNED NOT NULL,
    rating TINYINT NOT NULL,
    feedback_text TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (log_id) REFERENCES chatbot_logs(id) ON DELETE CASCADE,
    INDEX idx_rating (rating),
    INDEX idx_created_at (created_at)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- User sessions table
CREATE TABLE IF NOT EXISTS chatbot_sessions (
    id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    session_id VARCHAR(255) UNIQUE NOT NULL,
    user_id VARCHAR(255),
    started_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    last_activity TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    message_count INT UNSIGNED DEFAULT 0,
    INDEX idx_session_id (session_id),
    INDEX idx_user_id (user_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Step 10: Testing Your AI Chatbot

Before deploying your AI chatbot integration, thorough testing is essential:

Testing Checklist

Functionality Testing: Test message sending and receiving, verify typing indicators appear correctly, check conversation history persistence, test file upload functionality (if implemented), verify voice input works (if implemented), and ensure error messages display appropriately.

Cross-Browser Testing: Test on Chrome, Firefox, Safari, Edge, and test mobile browsers (iOS Safari, Chrome Mobile).

Responsive Design Testing: Test on desktop (1920x1080, 1366x768), tablet (iPad, Android tablets), and mobile (iPhone, Android phones).

Performance Testing: Measure response times, test with multiple simultaneous users, check memory usage over time, and verify no memory leaks.

Security Testing: Test XSS prevention, verify API key protection, check CORS policies, test rate limiting, and validate input sanitization.

Create a Test Suite

Create tests/chatbot-test.js for automated testing:

// Simple test suite for chatbot functionality
class ChatbotTests {
    constructor(chatbot) {
        this.chatbot = chatbot;
        this.testResults = [];
    }
    
    async runAllTests() {
        console.log('Starting chatbot tests...');
        
        await this.testMessageSending();
        await this.testInputValidation();
        await this.testErrorHandling();
        await this.testConversationHistory();
        
        this.displayResults();
    }
    
    async testMessageSending() {
        try {
            const testMessage = 'Hello, this is a test';
            this.chatbot.userInput.value = testMessage;
            await this.chatbot.handleSend();
            
            const messages = document.querySelectorAll('.user-message');
            const lastMessage = messages[messages.length - 1];
            
            if (lastMessage && lastMessage.textContent.includes(testMessage)) {
                this.testResults.push({ test: 'Message Sending', status: 'PASS' });
            } else {
                this.testResults.push({ test: 'Message Sending', status: 'FAIL' });
            }
        } catch (error) {
            this.testResults.push({ 
                test: 'Message Sending', 
                status: 'FAIL', 
                error: error.message 
            });
        }
    }
    
    async testInputValidation() {
        try {
            // Test empty message
            this.chatbot.userInput.value = '';
            const initialMessageCount = document.querySelectorAll('.user-message').length;
            await this.chatbot.handleSend();
            const newMessageCount = document.querySelectorAll('.user-message').length;
            
            if (initialMessageCount === newMessageCount) {
                this.testResults.push({ test: 'Input Validation', status: 'PASS' });
            } else {
                this.testResults.push({ test: 'Input Validation', status: 'FAIL' });
            }
        } catch (error) {
            this.testResults.push({ 
                test: 'Input Validation', 
                status: 'FAIL', 
                error: error.message 
            });
        }
    }
    
    async testErrorHandling() {
        try {
            // Simulate API error
            const originalFetch = window.fetch;
            window.fetch = () => Promise.reject(new Error('Network error'));
            
            this.chatbot.userInput.value = 'Test error handling';
            await this.chatbot.handleSend();
            
            // Restore original fetch
            window.fetch = originalFetch;
            
            const errorMessages = document.querySelectorAll('.error-message');
            if (errorMessages.length > 0) {
                this.testResults.push({ test: 'Error Handling', status: 'PASS' });
            } else {
                this.testResults.push({ test: 'Error Handling', status: 'FAIL' });
            }
        } catch (error) {
            this.testResults.push({ 
                test: 'Error Handling', 
                status: 'FAIL', 
                error: error.message 
            });
        }
    }
    
    async testConversationHistory() {
        try {
            const historyLength = this.chatbot.conversationHistory.length;
            if (historyLength > 0) {
                this.testResults.push({ test: 'Conversation History', status: 'PASS' });
            } else {
                this.testResults.push({ test: 'Conversation History', status: 'FAIL' });
            }
        } catch (error) {
            this.testResults.push({ 
                test: 'Conversation History', 
                status: 'FAIL', 
                error: error.message 
            });
        }
    }
    
    displayResults() {
        console.log('\n=== Test Results ===');
        this.testResults.forEach(result => {
            const status = result.status === 'PASS' ? '✓' : '✗';
            console.log(`${status} ${result.test}: ${result.status}`);
            if (result.error) {
                console.log(`  Error: ${result.error}`);
            }
        });
        
        const passed = this.testResults.filter(r => r.status === 'PASS').length;
        const total = this.testResults.length;
        console.log(`\nPassed: ${passed}/${total}`);
    }
}

// Run tests (uncomment in development)
// document.addEventListener('DOMContentLoaded', () => {
//     setTimeout(() => {
//         const tests = new ChatbotTests(window.chatbot);
//         tests.runAllTests();
//     }, 2000);
// });

Step 11: Deployment and Optimization

Deploy your website chatbot with these optimization steps:

Performance Optimization

Minify Your Code: Use tools to minify CSS and JavaScript for faster loading:

npm install -g terser cssnano-cli

# Minify JavaScript
terser js/chatbot.js -o js/chatbot.min.js -c -m

# Minify CSS
cssnano css/chatbot.css css/chatbot.min.css

Implement Caching: Add cache headers in your .htaccess file:

# Enable caching for static assets
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>

# Enable Gzip compression
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

CDN Integration

For better performance, serve static assets through a CDN. Update your index.html:

<!-- Use CDN for static assets in production -->
<link rel="stylesheet" href="https://cdn.yourdomain.com/css/chatbot.min.css">
<script src="https://cdn.yourdomain.com/js/chatbot.min.js"></script>

Step 12: SEO Best Practices for Chatbot Pages

Optimize your page for search engines while implementing AI chatbot integration:

Add Structured Data

Include JSON-LD structured data in your index.html:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "AI Chatbot Assistant",
  "description": "Intelligent AI-powered chatbot for instant customer support and assistance",
  "applicationCategory": "BusinessApplication",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "featureList": [
    "24/7 AI-powered customer support",
    "Natural language processing",
    "Multi-language support",
    "Conversation history",
    "File upload capability"
  ]
}
</script>

Meta Tags Optimization

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Primary Meta Tags -->
    <title>How to Integrate AI Chatbot in Website | Complete Implementation Guide</title>
    <meta name="title" content="How to Integrate AI Chatbot in Website | Complete Guide">
    <meta name="description" content="Learn AI chatbot integration with our step-by-step guide. Implement custom chatbot development, API integration, and conversational AI on your website.">
    <meta name="keywords" content="AI chatbot integration, chatbot implementation, website chatbot, integrate chatbot, custom chatbot development, chatbot API integration">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://yourdomain.com/how-to-integrate-ai-chatbot-in-website">
    <meta property="og:title" content="How to Integrate AI Chatbot in Website | Complete Guide">
    <meta property="og:description" content="Complete guide to AI chatbot integration with code examples, best practices, and implementation steps.">
    <meta property="og:image" content="https://yourdomain.com/images/chatbot-integration-guide.jpg">
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://yourdomain.com/how-to-integrate-ai-chatbot-in-website">
    <meta property="twitter:title" content="How to Integrate AI Chatbot in Website">
    <meta property="twitter:description" content="Step-by-step guide for AI chatbot integration with practical code examples">
    <meta property="twitter:image" content="https://yourdomain.com/images/chatbot-integration-guide.jpg">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://yourdomain.com/how-to-integrate-ai-chatbot-in-website">
</head>

Common Issues and Troubleshooting

Here are common problems you might encounter during chatbot implementation and their solutions:

Issue 1: Chatbot Not Responding

Symptoms: Messages sent but no response received

Solutions: Check browser console for JavaScript errors, verify API endpoint is accessible, confirm API key is valid and not expired, check CORS headers are properly configured, and ensure backend server is running.

Issue 2: Styling Issues

Symptoms: Chatbot appears broken or misaligned

Solutions: Clear browser cache, verify CSS file is loading (check Network tab), check for CSS conflicts with existing stylesheets, ensure viewport meta tag is present, and test in different browsers.

Issue 3: Performance Problems

Symptoms: Slow response times or lagging interface

Solutions: Implement request debouncing, optimize API calls with caching, reduce conversation history size, minify JavaScript and CSS files, and use CDN for static assets.

Debugging Code

Add comprehensive logging to js/chatbot.js:

// Add debug mode to config.js
const CHATBOT_CONFIG = {
    // ... existing config ...
    debugMode: true // Set to false in production
};

// Add logging function to chatbot.js
class AIChatbot {
    log(message, data = null) {
        if (CHATBOT_CONFIG.debugMode) {
            console.log(`[Chatbot Debug] ${message}`, data || '');
        }
    }
    
    async sendToAI(message) {
        this.log('Sending message to AI', { message, timestamp: new Date() });
        
        try {
            const response = await fetch(CHATBOT_CONFIG.apiEndpoint, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ message })
            });
            
            this.log('Received response', { 
                status: response.status, 
                ok: response.ok 
            });
            
            const data = await response.json();
            this.log('Parsed response data', data);
            
            return data.response;
        } catch (error) {
            this.log('Error in sendToAI', { error: error.message, stack: error.stack });
            throw error;
        }
    }
}

Conclusion

Congratulations! You've successfully learned how to implement AI chatbot integration on your website. This comprehensive guide covered everything from basic setup to advanced features like voice input, file uploads, and analytics tracking.

Key Takeaways: AI chatbot implementation enhances user engagement and provides 24/7 support, proper security measures are essential for protecting API keys and user data, performance optimization ensures smooth user experience, analytics help you understand user behavior and improve chatbot responses, and regular testing and monitoring are crucial for maintaining chatbot quality.

Next Steps

To further enhance your website chatbot, consider implementing sentiment analysis for better user understanding, multi-language support for global audiences, integration with CRM systems, advanced NLP for intent recognition, and A/B testing for conversation flows.

Additional Resources

AI chatbot integration and conversational AI, explore these resources: OpenAI API Documentation for implementing GPT-based chatbots, Dialogflow Documentation for Google's conversational AI platform, Web Speech API for voice integration capabilities, Webhook.site for testing API endpoints, and Postman for API testing and debugging.

Best Practices Checklist

Before launching your AI chatbot integration, ensure you've followed these best practices:

Security: Never expose API keys in frontend code, implement rate limiting to prevent abuse, sanitize all user inputs to prevent XSS attacks, use HTTPS for all API communications, implement CORS properly for allowed origins, and regularly update dependencies and security patches.

User Experience: Provide clear visual feedback during processing, implement typing indicators for better UX, keep response times under 3 seconds, make the chatbot easily accessible but not intrusive, provide option to minimize or close the chat, and ensure mobile responsiveness across all devices.

Performance: Minify and compress all static assets, implement lazy loading for chatbot resources, use CDN for faster asset delivery, cache API responses when appropriate, optimize database queries for analytics, and monitor server performance regularly.

Accessibility: Include proper ARIA labels for screen readers, ensure keyboard navigation works properly, maintain sufficient color contrast ratios, provide text alternatives for icons, and test with accessibility tools like WAVE or axe.

Maintenance: Set up error logging and monitoring, regularly review conversation logs for improvements, update AI model training based on user feedback, keep documentation up to date, and schedule regular security audits.

Advanced Customization Options

Customize your custom chatbot development further with these advanced options:

Custom Themes

Create a theme system for your chatbot. Add to js/config.js:

const CHATBOT_THEMES = {
    default: {
        primaryColor: '#01AEEF',
        secondaryColor: '#0184C7',
        textColor: '#333333',
        backgroundColor: '#FFFFFF',
        userMessageBg: '#01AEEF',
        botMessageBg: '#FFFFFF'
    },
    dark: {
        primaryColor: '#01AEEF',
        secondaryColor: '#0184C7',
        textColor: '#FFFFFF',
        backgroundColor: '#1a1a1a',
        userMessageBg: '#01AEEF',
        botMessageBg: '#2d2d2d'
    },
    purple: {
        primaryColor: '#6C63FF',
        secondaryColor: '#5A52D5',
        textColor: '#333333',
        backgroundColor: '#FFFFFF',
        userMessageBg: '#6C63FF',
        botMessageBg: '#F0EEFF'
    }
};

// Function to apply theme
function applyTheme(themeName) {
    const theme = CHATBOT_THEMES[themeName] || CHATBOT_THEMES.default;
    const root = document.documentElement;
    
    root.style.setProperty('--chatbot-primary', theme.primaryColor);
    root.style.setProperty('--chatbot-secondary', theme.secondaryColor);
    root.style.setProperty('--chatbot-text', theme.textColor);
    root.style.setProperty('--chatbot-bg', theme.backgroundColor);
    root.style.setProperty('--chatbot-user-msg', theme.userMessageBg);
    root.style.setProperty('--chatbot-bot-msg', theme.botMessageBg);
}

Update css/chatbot.css to use CSS variables:

:root {
    --chatbot-primary: #01AEEF;
    --chatbot-secondary: #0184C7;
    --chatbot-text: #333333;
    --chatbot-bg: #FFFFFF;
    --chatbot-user-msg: #01AEEF;
    --chatbot-bot-msg: #FFFFFF;
}

#chatbot-header {
    background: linear-gradient(135deg, var(--chatbot-primary) 0%, var(--chatbot-secondary) 100%);
}

.bot-message p {
    background: var(--chatbot-bot-msg);
    color: var(--chatbot-text);
}

.user-message p {
    background: var(--chatbot-user-msg);
    color: white;
}

Multi-Language Support

Add internationalization to your integrate chatbot. Create js/i18n.js:

const CHATBOT_LANGUAGES = {
    en: {
        welcome: 'Hello! How can I assist you today?',
        placeholder: 'Type your message...',
        send: 'Send',
        error: 'Sorry, I encountered an error. Please try again.',
        close: 'Close',
        minimize: 'Minimize',
        typing: 'AI is typing...'
    },
    es: {
        welcome: '¡Hola! ¿Cómo puedo ayudarte hoy?',
        placeholder: 'Escribe tu mensaje...',
        send: 'Enviar',
        error: 'Lo siento, encontré un error. Por favor, intenta de nuevo.',
        close: 'Cerrar',
        minimize: 'Minimizar',
        typing: 'IA está escribiendo...'
    },
    fr: {
        welcome: 'Bonjour! Comment puis-je vous aider aujourd\'hui?',
        placeholder: 'Tapez votre message...',
        send: 'Envoyer',
        error: 'Désolé, j\'ai rencontré une erreur. Veuillez réessayer.',
        close: 'Fermer',
        minimize: 'Minimiser',
        typing: 'L\'IA tape...'
    },
    hi: {
        welcome: 'नमस्ते! मैं आज आपकी कैसे सहायता कर सकता हूं?',
        placeholder: 'अपना संदेश टाइप करें...',
        send: 'भेजें',
        error: 'क्षमा करें, मुझे एक त्रुटि का सामना करना पड़ा। कृपया पुनः प्रयास करें।',
        close: 'बंद करें',
        minimize: 'छोटा करें',
        typing: 'एआई टाइप कर रहा है...'
    }
};

class I18n {
    constructor(defaultLang = 'en') {
        this.currentLang = defaultLang;
    }
    
    setLanguage(lang) {
        if (CHATBOT_LANGUAGES[lang]) {
            this.currentLang = lang;
            this.updateUI();
        }
    }
    
    t(key) {
        return CHATBOT_LANGUAGES[this.currentLang][key] || key;
    }
    
    updateUI() {
        document.getElementById('user-input').placeholder = this.t('placeholder');
        document.getElementById('send-btn').textContent = this.t('send');
    }
    
    detectUserLanguage() {
        const browserLang = navigator.language.split('-')[0];
        return CHATBOT_LANGUAGES[browserLang] ? browserLang : 'en';
    }
}

// Initialize with detected language
const i18n = new I18n(new I18n().detectUserLanguage());

Integrating with Popular Platforms

Extend your chatbot API integration to work with popular platforms:

WordPress Integration

Create a WordPress plugin. File: wp-content/plugins/ai-chatbot/ai-chatbot.php:

<?php
/**
 * Plugin Name: AI Chatbot Integration
 * Description: Integrate AI-powered chatbot into WordPress
 * Version: 1.0.0
 * Author: Your Name
 */

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

class AI_Chatbot_Plugin {
    public function __construct() {
        add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts'));
        add_action('wp_footer', array($this, 'render_chatbot'));
        add_action('wp_ajax_chatbot_message', array($this, 'handle_chatbot_message'));
        add_action('wp_ajax_nopriv_chatbot_message', array($this, 'handle_chatbot_message'));
    }
    
    public function enqueue_scripts() {
        wp_enqueue_style(
            'ai-chatbot-style',
            plugins_url('css/chatbot.css', __FILE__),
            array(),
            '1.0.0'
        );
        
        wp_enqueue_script(
            'ai-chatbot-script',
            plugins_url('js/chatbot.js', __FILE__),
            array('jquery'),
            '1.0.0',
            true
        );
        
        wp_localize_script('ai-chatbot-script', 'chatbotAjax', array(
            'ajaxurl' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('chatbot_nonce')
        ));
    }
    
    public function render_chatbot() {
        include plugin_dir_path(__FILE__) . 'templates/chatbot-widget.php';
    }
    
    public function handle_chatbot_message() {
        check_ajax_referer('chatbot_nonce', 'nonce');
        
        $message = sanitize_text_field($_POST['message']);
        
        // Process with AI API
        $response = $this->get_ai_response($message);
        
        wp_send_json_success(array(
            'response' => $response
        ));
    }
    
    private function get_ai_response($message) {
        $api_key = get_option('chatbot_api_key');
        
        $response = wp_remote_post('https://api.openai.com/v1/chat/completions', array(
            'headers' => array(
                'Authorization' => 'Bearer ' . $api_key,
                'Content-Type' => 'application/json'
            ),
            'body' => json_encode(array(
                'model' => 'gpt-3.5-turbo',
                'messages' => array(
                    array('role' => 'user', 'content' => $message)
                )
            )),
            'timeout' => 30
        ));
        
        if (is_wp_error($response)) {
            return 'Sorry, I encountered an error.';
        }
        
        $body = json_decode(wp_remote_retrieve_body($response), true);
        return $body['choices'][0]['message']['content'];
    }
}

new AI_Chatbot_Plugin();
?>

Shopify Integration

For Shopify stores, create a custom app. File: assets/chatbot-shopify.js:

// Shopify-specific chatbot integration
(function() {
    // Wait for Shopify to load
    if (typeof Shopify === 'undefined') {
        console.error('Shopify object not found');
        return;
    }
    
    class ShopifyChatbot extends AIChatbot {
        constructor() {
            super();
            this.initShopifyFeatures();
        }
        
        initShopifyFeatures() {
            // Add product recommendation capability
            this.addProductRecommendations();
            
            // Add order tracking
            this.addOrderTracking();
            
            // Add cart assistance
            this.addCartAssistance();
        }
        
        addProductRecommendations() {
            // Fetch products from Shopify
            fetch('/products.json')
                .then(response => response.json())
                .then(data => {
                    this.products = data.products;
                })
                .catch(error => console.error('Error fetching products:', error));
        }
        
        async handleProductQuery(query) {
            // Search products based on query
            const matchedProducts = this.products.filter(product => 
                product.title.toLowerCase().includes(query.toLowerCase()) ||
                product.tags.some(tag => tag.toLowerCase().includes(query.toLowerCase()))
            );
            
            if (matchedProducts.length > 0) {
                return this.formatProductResponse(matchedProducts.slice(0, 3));
            }
            
            return 'I couldn\'t find any products matching your query.';
        }
        
        formatProductResponse(products) {
            let response = 'Here are some products I found:\n\n';
            
            products.forEach(product => {
                response += `• ${product.title} - $${product.variants[0].price}\n`;
                response += `  ${window.location.origin}/products/${product.handle}\n\n`;
            });
            
            return response;
        }
        
        addOrderTracking() {
            // Implement order tracking functionality
            this.orderTrackingEnabled = true;
        }
        
        addCartAssistance() {
            // Add items to cart through chatbot
            this.cartAssistanceEnabled = true;
        }
        
        async addToCart(variantId, quantity = 1) {
            try {
                const response = await fetch('/cart/add.js', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        id: variantId,
                        quantity: quantity
                    })
                });
                
                if (response.ok) {
                    return 'Product added to cart successfully!';
                }
            } catch (error) {
                console.error('Error adding to cart:', error);
            }
            
            return 'Sorry, I couldn\'t add that to your cart.';
        }
    }
    
    // Initialize Shopify chatbot
    document.addEventListener('DOMContentLoaded', () => {
        window.shopifyChatbot = new ShopifyChatbot();
    });
})();

Monitoring and Maintenance

Set up proper monitoring for your AI assistant for website:

Error Tracking with Sentry

Integrate Sentry for error tracking. Add to index.html:

<script src="https://browser.sentry-cdn.com/7.0.0/bundle.min.js"></script>
<script>
    Sentry.init({
        dsn: 'YOUR_SENTRY_DSN',
        environment: 'production',
        integrations: [new Sentry.BrowserTracing()],
        tracesSampleRate: 1.0,
        beforeSend(event, hint) {
            // Filter out chatbot-specific errors
            if (event.exception) {
                console.error('Chatbot error captured:', hint.originalException);
            }
            return event;
        }
    });
</script>

Performance Monitoring

Create js/performance-monitor.js:

class PerformanceMonitor {
    constructor() {
        this.metrics = {
            responseTime: [],
            errorRate: 0,
            totalRequests: 0,
            failedRequests: 0
        };
    }
    
    trackResponseTime(startTime) {
        const endTime = performance.now();
        const duration = endTime - startTime;
        this.metrics.responseTime.push(duration);
        this.metrics.totalRequests++;
        
        // Keep only last 100 measurements
        if (this.metrics.responseTime.length > 100) {
            this.metrics.responseTime.shift();
        }
        
        // Log if response time is too high
        if (duration > 5000) {
            console.warn(`Slow response detected: ${duration}ms`);
            this.sendAlert('slow_response', { duration });
        }
    }
    
    trackError() {
        this.metrics.failedRequests++;
        this.metrics.errorRate = 
            (this.metrics.failedRequests / this.metrics.totalRequests) * 100;
        
        // Alert if error rate is too high
        if (this.metrics.errorRate > 10) {
            this.sendAlert('high_error_rate', { 
                errorRate: this.metrics.errorRate 
            });
        }
    }
    
    getAverageResponseTime() {
        if (this.metrics.responseTime.length === 0) return 0;
        
        const sum = this.metrics.responseTime.reduce((a, b) => a + b, 0);
        return sum / this.metrics.responseTime.length;
    }
    
    getMetrics() {
        return {
            averageResponseTime: this.getAverageResponseTime(),
            errorRate: this.metrics.errorRate,
            totalRequests: this.metrics.totalRequests,
            failedRequests: this.metrics.failedRequests
        };
    }
    
    sendAlert(type, data) {
        // Send alert to monitoring service
        fetch('/api/alerts', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ type, data, timestamp: new Date() })
        }).catch(error => console.error('Failed to send alert:', error));
    }
    
    logMetrics() {
        console.log('Chatbot Performance Metrics:', this.getMetrics());
    }
}

// Initialize performance monitor
const perfMonitor = new PerformanceMonitor();

// Log metrics every 5 minutes
setInterval(() => perfMonitor.logMetrics(), 5 * 60 * 1000);

Final Thoughts

You now have a complete, production-ready AI chatbot integration system. This implementation includes robust security measures, advanced features like voice input and file uploads, comprehensive analytics and monitoring, multi-language support, platform-specific integrations, and performance optimization techniques.

Remember to continuously improve your chatbot based on user feedback and conversation analytics. Regular updates and maintenance will ensure your website chatbot remains effective and provides value to your users.

Final Checklist before Going Live:

✓ Test all functionality across different browsers and devices
✓ Verify API keys are stored securely (never in frontend code)
✓ Implement rate limiting to prevent abuse
✓ Set up error monitoring and logging
✓ Configure analytics tracking
✓ Test performance under load
✓ Verify GDPR/privacy compliance
✓ Document your implementation for future reference
✓ Create backup and rollback procedures
✓ Set up automated testing if possible

Your AI chatbot integration is now complete and ready to enhance your website's user experience. Good luck with your implementation!

Copyright 2025. All rights are reserved