🤖 Quantum AI Chatbot — Integration Guide

Beautiful, intelligent chatbot for your website. Built with modern AI, designed for Axivora.

📋 Overview

Quantum is a fully-featured AI chatbot that integrates seamlessly with your website. It features:

✨ Smart Responses

Intent-based understanding. Learns from your dataset. Provides intelligent answers.

🎨 Beautiful Design

Glassmorphic UI. Fully responsive. Dark mode optimized. Matches your brand.

⚡ Performance

Lightweight (~15KB). Fast loading. Smooth animations. No external dependencies.

🔧 Easy Integration

Two lines of code. Works with any website. Quick setup. Full customization.

🚀 Quick Start (2 minutes)

1Add CSS Link

In your HTML <head> section, add:

<link rel="stylesheet" href="css/chatbot.css">
2Add JavaScript

At the end of your HTML <body>, add:

<script src="js/chatbot.js"></script>
3Ensure Dataset

Make sure axivora_ai_labs_chatbot_dataset.json is in your root directory.

✅ That's it! Your chatbot is now live. Start chatting!

📝 Full Integration Example

Here's a complete example of how to add the chatbot to your website:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Awesome Website</title>
  
  <!-- Your existing styles -->
  <link rel="stylesheet" href="css/main.css">
  
  <!-- Chatbot styles -->
  <link rel="stylesheet" href="css/chatbot.css">
</head>
<body>
  <!-- Your website content here -->
  
  <!-- Chatbot script (at the end of body) -->
  <script src="js/chatbot.js"></script>
</body>
</html>

✨ Key Features

💬 Intelligent Conversation

🎨 Modern UI/UX

⚡ Performance

🔧 Customization

🎨 Customization

Change Colors

Edit the CSS variables in css/chatbot.css:

:root {
  --chatbot-primary: #2563EB;      /* Main brand color */
  --chatbot-accent: #7C3AED;       /* Accent color */
  --chatbot-cyan: #22D3EE;         /* Highlight color */
  --chatbot-bg-dark: #0B1120;      /* Dark background */
}

Customize Responses

Edit the generateResponse() method in js/chatbot.js to add custom intents and responses.

Styling & Positioning

All CSS classes can be overridden:

/* Move chatbot to bottom-left */
.quantum-chatbot {
  right: auto;
  left: 20px;
}

/* Change size */
.quantum-chatbot {
  width: 500px;
  max-height: 700px;
}

🔌 API Reference

Methods

// Access the chatbot instance
window.quantumChatbot

// Open/close chat
quantumChatbot.openChat()
quantumChatbot.closeChat()
quantumChatbot.toggleChat()

// Send message programmatically
quantumChatbot.elementsendMessage()

// Add custom messages
quantumChatbot.addUserMessage("Hello!")
quantumChatbot.addBotMessage("Hi there!", ["Reply 1", "Reply 2"])

Events

The chatbot fires custom events you can listen to:

// Listen for messages
document.addEventListener('chatbot-message-sent', (e) => {
  console.log('User message:', e.detail.message);
});

// Listen for bot responses
document.addEventListener('chatbot-response', (e) => {
  console.log('Bot response:', e.detail.response);
});

❓ FAQ

How do I change the chatbot's responses?

Edit the generateResponse() method in js/chatbot.js. Add new matchesIntent() conditions for your custom responses.

Can I integrate with my backend API?

Yes! Modify the generateResponse() method to make API calls instead of using local logic. Example:

async generateResponse(userMessage) {
  const response = await fetch('/api/chatbot', {
    method: 'POST',
    body: JSON.stringify({ message: userMessage })
  });
  const data = await response.json();
  return data.reply;
}

How do I track user conversations?

All messages are stored in this.messages array. You can send them to your backend:

// After each message
fetch('/api/save-conversation', {
  method: 'POST',
  body: JSON.stringify({
    message: userMessage,
    response: botResponse,
    timestamp: new Date()
  })
});

Is it mobile-friendly?

Yes! The chatbot is fully responsive and tested on all devices (320px - 1920px).

Can I deploy it to production?

Absolutely! The chatbot is production-ready. Just ensure:

📁 File Structure

Axivora/
├── index.html
├── css/
│   ├── main.css
│   ├── chatbot.css          ← NEW
│   └── ... (other styles)
├── js/
│   ├── main.js
│   ├── chatbot.js           ← NEW
│   └── ... (other scripts)
├── axivora_ai_labs_chatbot_dataset.json
└── assets/
    └── ... (images, logos)

🎯 Next Steps

  1. Copy chatbot.js to your js/ folder
  2. Copy chatbot.css to your css/ folder
  3. Add the CSS link to your <head>
  4. Add the JS script to the end of your <body>
  5. Ensure axivora_ai_labs_chatbot_dataset.json is in your root
  6. Test on desktop, tablet, and mobile
  7. Customize colors and responses as needed
  8. Deploy to production!

📞 Support & Questions

For more help or to discuss integration:

Built with ❤️ by Axivora Labs • Data • Intelligence • Impact