How to Add an AI Chatbot to Any Website in Under 5 Minutes

Adding a chatbot used to mean hiring a developer, wrestling with a third-party SaaS API, and waiting a week for a staging review. Today you can have a fully trained AI chatbot live on your website in the time it takes to make a coffee — no coding experience needed.

This guide walks you through every step: from creating a chatbot to embedding it on any platform, including plain HTML, WordPress, Webflow, Shopify, and React.

What you need before you start

• A document to train the chatbot on — a PDF FAQ, a help article, a product guide, anything.
• A website where you can paste a script tag (almost every CMS supports this).
• A free Minyut account (sign up here — no card required).

That is genuinely it. You do not need an API key, a database, or a backend.

Step 1: Upload your document

After signing up, click New chatbot on the dashboard. Give it a name — something like “Support Bot” or “Product Q&A” — then upload your file. Minyut accepts PDF, plain text (.txt), and Markdown (.md) up to 5 MB per file.

Once uploaded, Minyut automatically splits the file into chunks, generates vector embeddings, and stores them in a private knowledge base. You will see the chatbot status change fromProcessing to Ready within a minute or two.

Step 2: Customise the widget

Before embedding, make the chatbot feel at home on your site. In the chatbot settings you can:

• Change the primary colour to match your brand.
• Set a welcome message — the first thing visitors see when they open the widget.
• Write a fallback message for questions the bot cannot answer from your documents.
• Pick a position — bottom-right (default) or bottom-left.

You can preview the live widget right inside the dashboard before copying the embed code.

Step 3: Copy the embed code

Navigate to the Embed tab of your chatbot. You will see a snippet that looks like this:

<script
  src="https://minyut.com/widget.js"
  data-token="YOUR_EMBED_TOKEN"
  async
></script>

The data-token is unique to your chatbot. It is public by design — it can only retrieve answers from your uploaded documents, nothing else.

Installing on plain HTML

Paste the snippet before the closing </body> tag in your HTML file. The script loads asynchronously so it will not block your page rendering.

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    <!-- your site content -->

    <script
      src="https://minyut.com/widget.js"
      data-token="YOUR_EMBED_TOKEN"
      async
    ></script>
  </body>
</html>

Installing on WordPress

The easiest method is a free plugin like Head, Footer and Post Injectionsor WPCode. Install the plugin, navigate to the footer scripts section, paste the snippet, and save. The chatbot will appear on every page automatically.

Alternatively, paste the snippet directly into your theme's footer.phpbefore </body>. Just make sure to do it inside a child theme so it survives theme updates.

Installing on Webflow

1. Open your Webflow project.
2. Go to Project Settings → Custom Code → Footer Code.
3. Paste the snippet and click Save Changes.
4. Publish the site — the widget appears on every published page.

Installing on Shopify

1. From your Shopify admin, go to Online Store → Themes → Edit code.
2. Open theme.liquid.
3. Find the closing </body> tag and paste the snippet just before it.
4. Save — it will be live immediately.

Installing on React or Next.js

In React, you want to load the widget script once and avoid duplicate injections on client-side navigation. The cleanest approach is a small component:

// components/MinyutWidget.tsx
"use client";
import { useEffect } from "react";

export function MinyutWidget() {
  useEffect(() => {
    const s = document.createElement("script");
    s.src = "https://minyut.com/widget.js";
    s.dataset.token = "YOUR_EMBED_TOKEN";
    s.async = true;
    document.body.appendChild(s);
    return () => s.remove();
  }, []);
  return null;
}

// Then in your root layout:
// <MinyutWidget />

Step 4: Verify it is working

Open your live site in a fresh browser tab (not a local dev server — the widget needs the token to resolve against a real origin). You should see the launcher icon in the bottom corner within a second or two of the page loading.

Click the launcher, ask a question that is covered in your document, and verify the answer makes sense. If the widget says “still learning”, wait for document processing to finish in the dashboard — it usually takes under two minutes.

Optional: override settings per page

You can override dashboard settings with data-* attributes on the script tag. Useful for landing pages where you want a specific greeting or colour:

<script
  src="https://minyut.com/widget.js"
  data-token="YOUR_EMBED_TOKEN"
  data-color="#0f766e"
  data-greeting="Ask me about our return policy."
  data-position="bottom-left"
  async
></script>

What to do next

Once the widget is live, watch the Query Logs tab on the dashboard. You will quickly see which questions visitors actually ask — and whether the chatbot is answering them. If there are gaps, upload more documents or add a dedicated FAQ file.

Ready to go? Create your free Minyut account and have your chatbot live in under five minutes.