OneTag AI / Guides

How to add an AI chatbot to an HTML website with one script tag

How do I add an AI chatbot to my website with plain HTML?

Paste this one line before </body> and the page gets a chat button in the corner. It answers visitors' questions from the text of the page it is on:

<script async src="https://onetagai.com/widget.js" data-key="YOUR_ONETAG_KEY"></script>

That is the whole installation: no backend, no plugin, no build step. The key comes by email and is free for 1,000,000 tokens a month. If you want to own the HTML and CSS of the chat window, the second way below is a floating chat widget in about 80 lines that you can edit freely.

Steps

1. Get a free key

   Enter your email at onetagai.com. The key (it starts with ot_) arrives by email. One key per email, no card.

2. Paste the tag before </body>

   Put it on every page that should have the chat, or once in the layout your pages share:

   <script async src="https://onetagai.com/widget.js" data-key="YOUR_ONETAG_KEY"></script>

   Nothing else is needed. The widget reads the page's <main> (or the whole body if there is none) and answers from it.

3. Set the title, greeting, colour and side

   Options are data- attributes on the same tag. We ran this one on 2026-11-11:

   <script async src="https://onetagai.com/widget.js" data-key="YOUR_ONETAG_KEY"
           data-title="Ask Acme Bikes" data-greeting="Hi! How can I help?" data-color="#0a7d4f" data-position="left"></script>

   data-system adds instructions for the bot and data-source is a CSS selector for the text it should read. The full list is in the docs.

4. Publish

   Upload the page as usual. The widget works wherever a script tag works, and from a file opened on your own computer.

The second way: a chat widget you can restyle

This is a floating Chat button and panel written out in full: the CSS, the HTML and the JavaScript are yours to change. Paste it before </body>. The bot answers from the SYSTEM text, so write your facts there.

Live demo on a shared demo key, with the same code as below. Open it in its own tab.

<!-- Chat bubble. Paste before </body> on any page. -->
<style>
  .cb-button, .cb-panel { position: fixed; right: 20px; z-index: 9999; font: 15px/1.5 system-ui, sans-serif; color: #0b1020; }
  .cb-button { bottom: 20px; height: 48px; padding: 0 20px; border: 0; background: #0b5fff; color: #fff; font-weight: 600; cursor: pointer; }
  .cb-panel { bottom: 80px; width: min(360px, calc(100vw - 40px)); height: min(480px, calc(100dvh - 100px)); display: flex; flex-direction: column; background: #fff; border: 1px solid #0b1020; box-shadow: 0 12px 32px rgba(11, 16, 32, .18); }
  .cb-panel[hidden] { display: none; }
  .cb-head { padding: 10px 14px; border-bottom: 1px solid #0b1020; font-weight: 600; }
  .cb-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
  .cb-msg { max-width: 85%; padding: 6px 10px; border: 1px solid #0b1020; white-space: pre-wrap; overflow-wrap: anywhere; }
  .cb-user { align-self: flex-end; background: #0b5fff; border-color: #0b5fff; color: #fff; }
  .cb-bot { align-self: flex-start; background: #f5f7fb; }
  .cb-bot:empty::after { content: "…"; }
  .cb-form { display: flex; border-top: 1px solid #0b1020; }
  .cb-form input { flex: 1; min-width: 0; padding: 12px 14px; border: 0; font: inherit; outline: none; }
  .cb-form button { padding: 0 16px; border: 0; background: #0b5fff; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
</style>

<button class="cb-button" id="cb-button" aria-expanded="false">Chat</button>
<div class="cb-panel" id="cb-panel" hidden>
  <div class="cb-head">Ask Acme Bikes</div>
  <div class="cb-log" id="cb-log" aria-live="polite"><div class="cb-msg cb-bot">Hi! How can I help?</div></div>
  <form class="cb-form" id="cb-form">
    <input id="cb-q" placeholder="Type a message" autocomplete="off" required>
    <button>Send</button>
  </form>
</div>

<script src="https://onetagai.com/v1.js" data-key="YOUR_ONETAG_KEY"></script>
<script>
(() => {
  // What the bot is and what it knows. Replace with your own facts.
  const SYSTEM = `You are the assistant of Acme Bikes, a bike shop in Portland.
Open Monday to Saturday, 9am to 6pm. Repairs take two working days.
A tune-up costs $60 and a full service costs $140.
Answer in under 60 words. If you do not know, say so.`;

  const button = document.getElementById("cb-button");
  const panel = document.getElementById("cb-panel");
  const log = document.getElementById("cb-log");
  const q = document.getElementById("cb-q");
  const history = [];

  button.addEventListener("click", () => {
    panel.hidden = !panel.hidden;
    button.textContent = panel.hidden ? "Chat" : "Close";
    button.setAttribute("aria-expanded", String(!panel.hidden));
    if (!panel.hidden) q.focus();
  });

  function bubble(who, text) {
    const el = document.createElement("div");
    el.className = "cb-msg cb-" + who;
    el.textContent = text;
    log.appendChild(el);
    log.scrollTop = log.scrollHeight;
    return el;
  }

  document.getElementById("cb-form").addEventListener("submit", async (event) => {
    event.preventDefault();
    const question = q.value.trim();
    if (!question) return;
    q.value = "";
    bubble("user", question);
    const bot = bubble("bot", "");
    try {
      const answer = await onetag.ask(question, null, {
        system: SYSTEM,
        history: history.slice(-20),
        stream: (delta) => { bot.textContent += delta; log.scrollTop = log.scrollHeight; },
      });
      bot.textContent = answer;
      history.push({ role: "user", content: question }, { role: "assistant", content: answer });
    } catch (error) {
      bot.textContent = error.code === "quota_exceeded" ? "The chat is resting for now. Please come back later." : "Something went wrong: " + error.message;
    }
  });
})();
</script>

For a full-page chat and a sidebar layout, see Chatbot HTML templates. AI chatbot in HTML, CSS and JavaScript explains the code part by part.

Which one to use

Where to paste it

• Plain HTML files. Before </body> in each page.
• Static site generators. In the base layout, so every page gets it: see the guides for GitHub Pages, Hugo, Jekyll and Astro.
• Site builders. Any builder that lets you add custom HTML or a script to the page footer can take the tag. We have not written step-by-step instructions for each builder yet.

What it costs

With the one-line widget, each question sends the page text along with it, so the cost follows the length of the page. In our test on 2026-11-11, one question on a 552-word page used 1,055 tokens (1,006 in, 49 out). At that size 1,000,000 tokens is about 950 questions a month.

Your own widget sends only the SYSTEM text and the recent messages: a short turn used 124 tokens in our test on 2026-11-10, about 8,000 turns a month. When the month's tokens are used up the chat stops answering until the 1st; there is no bill on the free plan. Pro is $9.9 a month for 100,000,000 tokens.

Limits to know before you rely on it

• The one-line widget reads the page it is on, not the whole site. For a documentation site, Add 'ask the docs' AI search answers from all pages.
• It answers questions. It has no inbox, no live-chat handoff to a person and no lead capture.
• It will answer confidently about things the page or the SYSTEM text never said unless you tell it not to. Add a line such as "If you do not know, say so".
• One model answers and you do not choose it. It is not ChatGPT.
• Anyone can read the key in the page source. They can only spend the key's budget, and calls are limited to 60 a minute per key and 20 a minute per IP address. Pro keys can be locked to your domain.

Questions

Related guides

• AI chatbot in HTML, CSS and JavaScript: complete working code
• Chatbot HTML templates: 3 free chat UIs with working AI
• Free chatbot API for websites: chat history, streaming, no backend
• Add AI to a GitHub Pages site

Updated 2026-11-11. Something wrong or missing? Email support@odysseyx.app.