Add DocuMind AI Chat to Your Website

Embed an AI-powered chatbot trained on your documents into any website in under 2 minutes. Works with HTML, WordPress, Shopify, Wix, and more.

Overview

DocuMind lets you create intelligent chatbots trained on your own documents. Once your chatbot is set up in the DocuMind dashboard, you can embed it on any website with a single <script> tag. The widget is:

⚡ Lightweight

Under 8 KB gzipped. No dependencies. Loads asynchronously so it never slows down your site.

🎨 Customizable

Match your brand colors, position, welcome message, and avatar — all from the dashboard.

🔒 Shadow DOM Isolation

The widget renders inside Shadow DOM — your page styles won't conflict and vice versa.

📱 Responsive

Looks great on desktop, tablet, and mobile devices with zero extra configuration.

Quick Start

Get up and running in three simple steps:

Create a Chatbot

Log in to your DocuMind Dashboard, navigate to Chatbots → New Chatbot, give it a name, and upload your documents (PDF, DOCX, TXT, or CSV).

Enable Public Access

In your chatbot's settings, toggle "Make Public" to ON. This generates a unique Embed Code (e.g. embed_4deb19d023bbc0565bcc33eb). Copy it.

Add the Script Tag

Paste the following snippet right before the closing </body> tag of your website:

<!-- DocuMind Chatbot Widget -->
<script
  src="https://YOUR_DOMAIN/widget.js"
  data-chatbot-id="YOUR_EMBED_CODE"
  data-api-url="https://YOUR_API_DOMAIN/api/v1"
  defer
></script>

💡

Replace YOUR_DOMAIN with the domain where your DocuMind app is hosted, YOUR_EMBED_CODE with the embed code from Step 2, and YOUR_API_DOMAIN with your API server's domain.

How It Works

Understanding the widget flow helps with debugging and customization:

The <script> tag loads widget.js asynchronously (defer).
It creates a <documind-chat> custom element and appends it to <body>.
The element initializes a Shadow DOM, then fetches your chatbot's public config from GET /api/v1/public/chatbot/:embedCode.
Theme colors, welcome message, name, and position are applied. A floating bubble appears.
When a visitor asks a question, the widget sends a POST /api/v1/public/chatbot/:embedCode/chat request.
DocuMind performs RAG (Retrieval-Augmented Generation) — it searches your uploaded documents, builds context, and returns an AI-generated answer.

HTML Website

For any standard HTML site, add the widget script before </body>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Website</title>
</head>
<body>

  <!-- Your page content here -->
  <h1>Welcome to My Site</h1>

  <!-- DocuMind Chatbot Widget -->
  <script
    src="https://YOUR_DOMAIN/widget.js"
    data-chatbot-id="embed_XXXXXXXXXXXXXX"
    data-api-url="https://YOUR_API_DOMAIN/api/v1"
    defer
  ></script>
</body>
</html>

That's it. Refresh the page and a chat bubble will appear at the bottom-right corner.

WordPress

There are two easy ways to add the widget to your WordPress site:

Go to Theme Settings

In your WordPress admin panel, navigate to Appearance → Theme Editor or use a plugin like Insert Headers and Footers (by WPCode).

Add the Snippet

Paste the following code in the "Footer" section:

<!-- DocuMind Chatbot Widget -->
<script
  src="https://YOUR_DOMAIN/widget.js"
  data-chatbot-id="embed_XXXXXXXXXXXXXX"
  data-api-url="https://YOUR_API_DOMAIN/api/v1"
  defer
></script>

Save & Preview

Click Save and visit your site. The chat bubble should appear on every page.

If you prefer code-level control, add this snippet to your theme's functions.php file:

function documind_chatbot_widget() {
    echo '<script
        src="https://YOUR_DOMAIN/widget.js"
        data-chatbot-id="embed_XXXXXXXXXXXXXX"
        data-api-url="https://YOUR_API_DOMAIN/api/v1"
        defer
    ></script>';
}
add_action('wp_footer', 'documind_chatbot_widget');

ℹ️

If you're using a child theme, add this to the child theme's functions.php so it survives theme updates.

Shopify

Open Theme Editor

In your Shopify admin, go to Online Store → Themes. Click Actions → Edit code on your current theme.

Edit theme.liquid

Open the Layout/theme.liquid file. Find the closing </body> tag.

Paste the Widget Code

Add the snippet right before </body>:

<!-- DocuMind Chatbot Widget -->
<script
  src="https://YOUR_DOMAIN/widget.js"
  data-chatbot-id="embed_XXXXXXXXXXXXXX"
  data-api-url="https://YOUR_API_DOMAIN/api/v1"
  defer
></script>

Save

Click Save. The widget will now appear on every page of your Shopify store.

💡

Want the widget only on specific pages? Wrap it in a Shopify Liquid condition:
{% if template == 'product' %} ... {% endif %}

Wix

Open Settings

In the Wix Dashboard, go to Settings → Custom Code (under Advanced).

Add Custom Code

Click "+ Add Custom Code", paste the widget snippet, and set placement to "Body - end".

<!-- DocuMind Chatbot Widget -->
<script
  src="https://YOUR_DOMAIN/widget.js"
  data-chatbot-id="embed_XXXXXXXXXXXXXX"
  data-api-url="https://YOUR_API_DOMAIN/api/v1"
  defer
></script>

Choose Pages & Save

Select whether to load on All Pages or specific pages. Click Apply. Publish your site to see the widget live.

Squarespace

Open Code Injection

From your Squarespace dashboard, go to Settings → Advanced → Code Injection.

Add to Footer

Paste the widget snippet into the "Footer" section:

<!-- DocuMind Chatbot Widget -->
<script
  src="https://YOUR_DOMAIN/widget.js"
  data-chatbot-id="embed_XXXXXXXXXXXXXX"
  data-api-url="https://YOUR_API_DOMAIN/api/v1"
  defer
></script>

Save & Publish

Click Save, then publish your site. The chatbot widget will appear on all pages.

React / Next.js

For React-based SPAs, load the widget script using the useEffect hook or next/script:

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src   = 'https://YOUR_DOMAIN/widget.js';
    script.setAttribute('data-chatbot-id', 'embed_XXXXXXXXXXXXXX');
    script.setAttribute('data-api-url', 'https://YOUR_API_DOMAIN/api/v1');
    script.defer  = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
      const widget = document.querySelector('documind-chat');
      if (widget) widget.remove();
    };
  }, []);

  return <div>Your App</div>;
}

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://YOUR_DOMAIN/widget.js"
          data-chatbot-id="embed_XXXXXXXXXXXXXX"
          data-api-url="https://YOUR_API_DOMAIN/api/v1"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Vue / Nuxt

<!-- App.vue -->
<script setup>
import { onMounted, onUnmounted } from 'vue';

let script;
onMounted(() => {
  script     = document.createElement('script');
  script.src = 'https://YOUR_DOMAIN/widget.js';
  script.setAttribute('data-chatbot-id', 'embed_XXXXXXXXXXXXXX');
  script.setAttribute('data-api-url',   'https://YOUR_API_DOMAIN/api/v1');
  script.defer = true;
  document.body.appendChild(script);
});

onUnmounted(() => {
  script?.remove();
  document.querySelector('documind-chat')?.remove();
});
</script>

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src:   'https://YOUR_DOMAIN/widget.js',
          defer: true,
          'data-chatbot-id': 'embed_XXXXXXXXXXXXXX',
          'data-api-url':   'https://YOUR_API_DOMAIN/api/v1',
        }
      ]
    }
  }
});

Webflow

Open Project Settings

In the Webflow Designer, click the gear icon (⚙) → Custom Code.

Paste in Footer Code

Add the widget snippet in the "Footer Code" textarea:

<!-- DocuMind Chatbot Widget -->
<script
  src="https://YOUR_DOMAIN/widget.js"
  data-chatbot-id="embed_XXXXXXXXXXXXXX"
  data-api-url="https://YOUR_API_DOMAIN/api/v1"
  defer
></script>

Publish

Click Save and Publish. The chatbot will appear on your live Webflow site.

Customization

All visual customization is done from your DocuMind Dashboard under Chatbot → Settings → Appearance. No code changes needed! The widget automatically fetches your latest settings.

🎨 Brand Colors

Set the primary color, background color, and text color to match your brand identity.

💬 Welcome Message

Customize the initial greeting visitors see when they open the chatbot window.

📍 Position

Place the chat bubble at the bottom-right or bottom-left of the screen.

✏️ Placeholder Text

Change the input placeholder to guide users on what to ask.

Widget Attributes

The <script> tag accepts the following data-* attributes:

Attribute	Required	Description
`data-chatbot-id`	✅ Yes	Your chatbot's unique embed code (e.g. `embed_4deb19d0...`). Found in the dashboard under Chatbot Settings.
`data-api-url`	❌ No	The base URL for the DocuMind API. Defaults to the origin of the widget script + `/api/v1`. Override this only if your API is on a different domain.
`defer`	Recommended	Ensures the script loads after the page content. Always include this for best performance.

Theme Options

These settings are configured in the DocuMind dashboard and are automatically applied to the widget:

Setting	Default	Description
`primaryColor`	#4F46E5	Bubble color, header, user message bubbles, and accent elements.
`backgroundColor`	#FFFFFF	Chat window background color.
`textColor`	#111827	Text color for bot messages and input area.
`borderRadius`	12px	Rounding of corners on the chat window and message bubbles.
`position`	bottom-right	Chat button position: `bottom-right` or `bottom-left`.
`welcomeMessage`	Hi! How can I help you today?	First message shown when the chat window opens.
`placeholder`	Ask a question...	Placeholder text in the message input field.

Allowed Domains

For security, you can restrict which domains can use your chatbot widget. In the DocuMind dashboard under Chatbot Settings, add your website domains to the Allowed Domains list.

⚠️

If you leave the allowed domains list empty, the chatbot will accept requests from any origin. For production use, always add your domain(s) to prevent unauthorized embedding.

// Example allowed domains (set in dashboard)
"allowedDomains": [
  "https://mywebsite.com",
  "https://www.mywebsite.com",
  "https://shop.mywebsite.com"
]

API Reference

The widget communicates with these public (no-auth) endpoints. These are useful if you want to build a custom chat UI.

Get Chatbot Config

GET /api/v1/public/chatbot/:embedCode

// Response
{
  "success": true,
  "data": {
    "id":          "665abc...",
    "name":        "My Chatbot",
    "description": "Help desk assistant",
    "branding":  { "primaryColor": "#4F46E5", ... },
    "theme":     { "position": "bottom-right", ... }
  }
}

Send a Message

POST /api/v1/public/chatbot/:embedCode/chat
Content-Type: application/json

{
  "query":     "How do I reset my password?",
  "sessionId": "optional-session-uuid"     // omit for first message
}

// Response
{
  "success": true,
  "data": {
    "answer":    "To reset your password, go to...",
    "sessionId": "a1b2c3-uuid",
    "sources":   []
  }
}

Stream a Message (SSE)

POST /api/v1/public/chatbot/:embedCode/stream
Content-Type: application/json

{
  "query":     "What are your pricing plans?",
  "sessionId": "a1b2c3-uuid"
}

// Server-Sent Events (SSE) stream
event: token
data: "Our"

event: token
data: " pricing"

event: done
data: {"sessionId": "a1b2c3-uuid"}

Submit Feedback

POST /api/v1/public/chatbot/:embedCode/feedback
Content-Type: application/json

{
  "queryId":  "query-object-id",
  "rating":   "up"    // "up" or "down"
}

Troubleshooting

Widget doesn't appear

Check your embed code — Make sure data-chatbot-id matches the embed code in your dashboard.
Check "Make Public" — The chatbot must be set to public and active in the dashboard.
Check the console — Open browser DevTools (F12) and look for error messages in the Console tab.
Check the API URL — If data-api-url is set, verify it's correct and reachable. Try opening https://YOUR_API_DOMAIN/health in a browser.
CORS issues — The API already allows wildcard CORS for public routes. If you're still seeing CORS errors, ensure you're on HTTPS in production.

Widget loads but chat doesn't work

Upload documents — The chatbot needs at least one processed document to answer questions. Check the Documents tab in the dashboard.
Check API status — Visit /health endpoint of your API to confirm it's running.
Rate limiting — Public chat has rate limits. If you're testing heavily, you may be temporarily blocked.

Styling conflicts

The widget uses Shadow DOM, so your page's CSS cannot affect it (and vice versa). However, some aggressive global CSS resets using * selectors with !important can sometimes penetrate. If you see issues, check for overly broad global resets.

Frequently Asked Questions

Can I add the chatbot to multiple websites?

Yes! You can use the same embed code on multiple sites. If you need different branding per site, create separate chatbots in the dashboard.

Does the widget slow down my site?

No. The script is loaded with the defer attribute, meaning it won't block page rendering. The widget itself is under 8 KB gzipped.

Can I customize the chatbot's AI behavior?

Yes. In the dashboard, go to Chatbot Settings → AI Configuration. You can adjust the system prompt, temperature, max tokens, and choose between different GPT models (gpt-4o-mini, gpt-4o, gpt-4-turbo).

What file formats are supported for documents?

DocuMind supports PDF, DOCX, TXT, and CSV files. More formats are planned for future releases.

Is there a limit on the number of messages?

Message limits depend on your subscription plan. The widget includes built-in rate limiting to prevent abuse. Check your dashboard for current usage and limits.

Can I build a custom chat UI instead of using the widget?

Absolutely! Use the Public API endpoints to build your own chat interface. The API supports both standard request/response and SSE streaming.

Does the chatbot work on mobile?

Yes. The widget is fully responsive and works on all screen sizes. The chat window adapts to smaller screens automatically.