Quickbots Documentation

Embed intelligent chatbots into any website or application in minutes. Quickbots provides a powerful, customizable chatbot widget that works seamlessly across all frameworks.

What is Quickbots?

Quickbots is a modern chatbot widget that can be embedded into any website or web application. It supports dark mode, file uploads, streaming responses, and much more.

Zero dependencies - works with any framework or vanilla HTML
Automatic dark mode detection
File upload support (images, PDFs, and more)
Streaming AI responses
Fully customizable appearance and behavior

Installation

Get started with Quickbots in seconds. Choose the method that works best for your project.

CDN LinkRecommended

The fastest way to get started. Just add a script tag to your HTML.

Production CDN:

https://quickbot-ai.smit090305.workers.dev/v1/quickbot.iife.js

Basic Script Tag:

<script
  src="https://quickbot-ai.smit090305.workers.dev/v1/quickbot.iife.js"
  data-bot-id="YOUR_BOT_ID"
  defer
></script>

Note

Replace YOUR_BOT_ID with your actual bot ID from the Quickbots dashboard.

Get Your Bot ID

You need a bot ID to use the widget. Here's how to get one:

1
Create a bot
Go to your dashboard and click "Create bot"
2
Configure your bot
Customize the bot's name, greeting message, and appearance in the Config tab
3
Copy your Bot ID
Find your Bot ID in the bot settings or the API/connect tab. It looks like: a1b2c3d4-e5f6-7890-abcd-ef1234567890

Framework Guides

Step-by-step instructions for integrating Quickbots into your favorite framework.

Vanilla HTML

The simplest integration - just add a script tag!

Complete HTML Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to My Site</h1>
  
  <!-- Quickbots Widget -->
  <script
    src="https://quickbot-ai.smit090305.workers.dev/v1/quickbot.iife.js"
    data-bot-id="YOUR_BOT_ID"
    defer
></script>
</body>
</html>

Tip

The defer attribute ensures the script loads after the page content, improving performance.

API Reference

Programmatic control of the Quickbots widget using the JavaScript API.

QuickBot.init()

Initialize a QuickBot widget programmatically.

Syntax:

window.QuickBot.init({
  botId: string,           // Required: Your bot ID
  container?: HTMLElement   // Optional: Container element
});

RequiredbotIdOptionalcontainer

Example:

// Initialize widget
window.QuickBot.init({
  botId: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
  container: document.getElementById('chatbot-container')
});

QuickBot.destroy()

Remove a QuickBot widget from the page.

Syntax:

window.QuickBot.destroy(botId: string);

Example:

// Remove widget
window.QuickBot.destroy('a1b2c3d4-e5f6-7890-abcd-ef1234567890');

Custom Element

Use the custom HTML element directly.

Usage:

<!-- After loading the script, you can use the custom element -->
<quick-bot bot-id="YOUR_BOT_ID"></quick-bot>

Tip

The custom element approach gives you more control over placement and lifecycle. Make sure the script is loaded before using the element.

Configuration

Customize your bot's appearance and behavior from the Quickbots dashboard.

Available Settings

Configure these settings in your bot's Config tab in the dashboard.

Appearance

• Chatbot name and branding
• Theme selection (modern, classic, minimal, bubble, retro)
• Welcome message customization
• Quick questions/buttons

Behavior

• Auto-open delay
• Auto-greet on open
• Email collection before chat
• Chat persistence (sessionStorage)
• Timestamp display

Integration

• Social media links (WhatsApp, Telegram, X, Instagram, Email)
• Support information
• Custom API endpoints

Dark Mode

Quickbots automatically detects and adapts to your website's dark mode.

The widget automatically detects if your website uses dark mode by checking for the dark class on the html element.

<!-- Enable dark mode on your site -->
<html class="dark">
  <!-- Your content -->
</html>

Ready to Get Started?

Create your first bot in the dashboard and start embedding it in minutes.

Go to Dashboard Create Bot