How to Add a Chatbot to Your Website Using HTML (2026 Guide)

What "add a chatbot using HTML" actually means

When people search this, they usually want one of two different things, and it's worth knowing which one you're after before you paste any code.

The first is building a chatbot yourself with plain HTML, CSS, and JavaScript. A little chat window in the corner of your page that opens when someone clicks it and replies to them. You own every line. It's free, and for a simple bot you can have it running in ten minutes. I'll give you the full code below.

The second is adding a chatbot someone else built by dropping a single <script> tag onto your page. The chatbot lives on their servers, you just point your site at it. This is how most real business chatbots get added, because the hard part (the actual conversation) is already handled.

There's also a question hiding underneath both: do you want a bot that follows a script, or one that genuinely understands what people type? Those are very different amounts of work. A scripted bot is an afternoon. An understanding bot is a small software project, unless you let a hosted tool do it.

Here's the lay of the land:

Let's go through all three.

Method 1: Build a simple chatbot in pure HTML, CSS, and JavaScript

This is a real, working chatbot you can paste into any HTML page. It has a floating button, a chat window, and replies based on keywords. No libraries, no backend, no account.

Paste this just before the closing </body> tag of your page:

<!-- Simple chatbot widget -->
<div id="chat-widget">
  <button id="chat-toggle" aria-label="Open chat">Chat</button>
  <div id="chat-box" hidden>
    <div id="chat-header">Ask us anything</div>
    <div id="chat-log"></div>
    <form id="chat-form">
      <input id="chat-input" type="text" placeholder="Type a message..." autocomplete="off" />
      <button type="submit">Send</button>
    </form>
  </div>
</div>

<style>
  #chat-widget { position: fixed; bottom: 20px; right: 20px; font-family: sans-serif; z-index: 9999; }
  #chat-toggle { background: #7C3AED; color: #fff; border: none; border-radius: 24px;
                 padding: 12px 18px; cursor: pointer; font-size: 15px;
                 box-shadow: 0 4px 14px rgba(0,0,0,0.2); }
  #chat-box { width: 320px; height: 420px; background: #fff; border-radius: 12px;
              box-shadow: 0 8px 30px rgba(0,0,0,0.18); display: flex; flex-direction: column;
              overflow: hidden; margin-bottom: 10px; }
  #chat-header { background: #7C3AED; color: #fff; padding: 12px 16px; font-weight: 600; }
  #chat-log { flex: 1; padding: 12px; overflow-y: auto; font-size: 14px; }
  .msg { margin: 6px 0; padding: 8px 12px; border-radius: 12px; max-width: 80%; }
  .msg.user { background: #ede9fe; margin-left: auto; }
  .msg.bot { background: #f1f5f9; }
  #chat-form { display: flex; border-top: 1px solid #eee; }
  #chat-input { flex: 1; border: none; padding: 12px; font-size: 14px; outline: none; }
  #chat-form button { background: #7C3AED; color: #fff; border: none; padding: 0 16px; cursor: pointer; }
</style>

<script>
  var toggle = document.getElementById('chat-toggle');
  var box = document.getElementById('chat-box');
  var log = document.getElementById('chat-log');
  var form = document.getElementById('chat-form');
  var input = document.getElementById('chat-input');

  toggle.addEventListener('click', function () {
    box.hidden = !box.hidden;
    if (!box.hidden && !log.hasChildNodes()) {
      addMessage('bot', 'Hi! How can I help you today?');
    }
  });

  form.addEventListener('submit', function (e) {
    e.preventDefault();
    var text = input.value.trim();
    if (!text) return;
    addMessage('user', text);
    input.value = '';
    setTimeout(function () { addMessage('bot', getReply(text)); }, 300);
  });

  function addMessage(who, text) {
    var div = document.createElement('div');
    div.className = 'msg ' + who;
    div.textContent = text;
    log.appendChild(div);
    log.scrollTop = log.scrollHeight;
  }

  function getReply(text) {
    var t = text.toLowerCase();
    if (t.indexOf('price') !== -1 || t.indexOf('cost') !== -1) {
      return 'Our pricing starts at $49/month. Want me to send the full breakdown?';
    }
    if (t.indexOf('hours') !== -1 || t.indexOf('open') !== -1) {
      return 'We are open Monday to Friday, 9am to 6pm.';
    }
    if (t.indexOf('contact') !== -1 || t.indexOf('email') !== -1) {
      return 'You can reach us at hello@example.com.';
    }
    return "Thanks for your message! Someone from our team will follow up shortly.";
  }
</script>

That's the whole thing. Save the page, open it in a browser, and you'll see a "Chat" button in the bottom-right corner.

A quick tour of how it works, so you can change it:

• The HTML is the structure: a button, a header, a scrolling message log, and a text input.
• The CSS positions the widget in the corner and styles the message bubbles. Change #7C3AED to your brand color and you've reskinned it.
• The JavaScript does three jobs. It shows or hides the box when you click the button, it adds your message to the log when you submit, and getReply() decides what the bot says back.

The logic lives entirely in getReply(). Right now it checks the message for words like "price" or "hours" and returns a canned answer. To teach it something new, add another if block with the keyword and the response.

Making the answers a bit smarter

You can stretch this approach further without touching the structure. Add more keyword rules. Add quick-reply buttons under the greeting so people tap instead of type. Save the conversation to localStorage so it survives a page refresh.

Be honest with yourself about the ceiling, though. This bot doesn't understand language, it matches words. Ask it "how much do you charge" and it won't catch that unless you've listed "charge" as a keyword. For a handful of common questions on a small site, that's fine. For real customer conversations, it falls apart fast.

Method 2: Connect your HTML chatbot to a real AI

To get a bot that actually understands what people type, you connect it to an AI model like Claude or GPT. The chat window stays mostly the same. The getReply() function changes from matching keywords to calling an AI.

Here's the catch, and it's an important one: you cannot put your API key in the HTML. Anything in your page source is visible to anyone who hits "view source." If your secret key is sitting in the JavaScript, people will find it and run up your bill. This is the single most common mistake when people first wire up an AI chatbot.

So the request has to go through a small backend that you own, which holds the key. The flow looks like this:

<script>
  async function getReply(text) {
    const res = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: text })
    });
    const data = await res.json();
    return data.reply;
  }
</script>

The browser talks to /api/chat, an endpoint on your own server. That endpoint holds the secret key, forwards the message to the AI provider, and sends the answer back. The key never leaves your server.

This works well, and it's the right architecture. But notice what just happened to the scope of the project. You now need a server, an API key with billing attached, a way to feed the bot your business information so its answers are correct, and ongoing maintenance when something breaks. You've gone from "paste some HTML" to "run and maintain a small application." For a lot of businesses, that's more than they signed up for.

Method 3: Embed a hosted chatbot widget with one script tag

This is how most businesses actually add a chatbot, and it's the path that skips the backend entirely. You sign up with a chatbot service, they give you a single <script> tag, you paste it before </body>, and a fully working chat widget appears on your site. The conversation, the AI, the hosting, the updates, all of that runs on their side.

The whole installation is one line:

<script src="https://example-chatbot.com/widget.js" data-id="your-id"></script>

That's the appeal. No key to protect, no server to run, no UI to build. The tradeoff is that you're depending on someone else's service and configuring it through their dashboard instead of your own code. For most businesses that's a fair trade, because the goal is a working chatbot, not a coding project.

This is the part where I'll be straight with you: this is what we build. All Calls Done is a hosted chat and voice widget you add with one script tag, so the rest of this section is about our product.

The install looks like this:

<script src="https://allcallsdone.com/widget.js"
        data-agent-id="YOUR_AGENT_ID"
        data-base-url="https://allcallsdone.com"></script>

Paste that before your closing </body> tag and a chat button appears in the corner of your site. When someone clicks it, they get a bot trained on your business: your services, your hours, your pricing, your FAQs. It answers their questions in your words, captures their name and contact details as a lead, and logs the full conversation so you can follow up. The same widget also does voice, so a visitor can talk instead of type. And because it connects to Google Calendar, it can book the appointment right there in the chat.

Here's how Method 1, Method 2, and a hosted widget compare:

To be fair, if you just need a button that answers three common questions, Method 1 is genuinely the right call and you should stop there. The hosted route is for when you want the bot to actually hold a conversation and turn visitors into leads without you running a server.

How to set up the All Calls Done widget

1. Create an agent and tell it about your business: what you do, your service area, your hours, your pricing basics.
2. Upload your FAQs and any documents customers commonly ask about, so the answers sound like you.
3. Copy your one-line script tag from the dashboard.
4. Paste it into your site just before </body>. The same paste works on a plain HTML site, WordPress, Wix, Squarespace, Webflow, or Shopify.
5. Optionally connect Google Calendar so the bot can book appointments, and set your brand color and greeting.

From there the widget handles inbound chats and calls around the clock. You start each morning with a list of who came by, what they asked, and which leads to follow up on.

Where to put the script tag

For any of the hosted options, placement is simple: the <script> goes just before the closing </body> tag of your HTML. Putting it at the end means the rest of your page loads first and the widget doesn't slow anything down.

On a site builder, you don't edit raw HTML directly, but every major platform has a slot for this:

• WordPress: paste it into a Custom HTML block, a footer-scripts plugin, or your theme's footer area.
• Wix: Settings > Custom Code > add the snippet to the body, on all pages.
• Squarespace: Settings > Advanced > Code Injection > Footer.
• Webflow: Project Settings > Custom Code > Footer Code, or per-page custom code.
• Shopify: add it to theme.liquid just before </body>, or use a custom-code app.

Troubleshooting

The widget doesn't show up. First check the script tag is actually on the page (open your live site, view source, search for the script). On a hosted widget, confirm any required ID attribute is filled in and correct. Hard-refresh with the cache cleared, since site builders and CDNs often serve an old version of the page for a few minutes.

It works locally but not on the live site. This is usually a Content Security Policy. If your site sends a Content-Security-Policy header, the browser may block the widget's script or iframe. You'll see the reason in the browser console. The fix is to allow the widget's domain in your script-src and frame-src directives.

The chat panel is cut off on mobile. For DIY code, check your fixed widths and switch to percentages or max-width. For a hosted widget this is handled for you, so a clipped panel usually means a conflicting CSS rule on your site setting overflow: hidden on a parent.

The DIY bot replies the same thing to everything. Your message isn't matching any keyword in getReply(). Lowercase the input (the example already does this) and add the words your visitors actually use, not just the ones you'd use.

My API key got exposed. If you ever pasted a real key into front-end HTML, treat it as compromised: revoke it and issue a new one, then move the call behind a backend as in Method 2.

Frequently asked questions

Do I need to know how to code? For Method 1, a little helps, but you can paste the code as-is and only change the text. For a hosted widget, no. You paste one line.

Will a chatbot slow down my website? A DIY bot like Method 1 is tiny and has no effect. A good hosted widget loads after your page and runs in the background, so the impact is minimal. Placing the script before </body> keeps it out of the way.

Can the HTML chatbot use real AI? Yes, but not safely from the HTML alone. The AI call has to go through a backend that holds your key (Method 2), or you let a hosted widget handle it.

Is adding a chatbot free? The DIY rule-based bot is free to build. AI usage costs money per message once you connect a model. Hosted widgets are usually paid, often with a free trial.

Does this work on WordPress, Wix, and Shopify? Yes. Each one has a place to paste either the DIY code or a hosted widget's script tag. See the placement list above.

The short version

If you want a basic bot that answers a few set questions, use Method 1. The code above is complete, free, and yours to edit.

If you want a bot that actually understands people and turns them into leads, you have two choices: build it on top of an AI API with a backend you maintain (Method 2), or paste a one-line hosted widget and skip the maintenance entirely. Pick based on whether you want to run software or just want a working chatbot.

Want the second kind without the backend? Try All Calls Done free for 14 days. No credit card required.