Lesson 13 : Build a No-Code AI Chatbot for Your Website with Make.com

Beginning

Every automation built so far has worked quietly in the background. An email arrived, a row got added, a message landed in Slack, and nobody was sitting on the other side waiting for something to happen.

A chatbot is different. There's a real person typing a question, and they expect an answer within a few seconds. That one change makes this lesson feel different from the rest of Phase 3. You're no longer building something that runs behind the scenes — you're building something a visitor can actually talk to.

By the end of this lesson, your own website will have a live AI chat box, powered by Make.com and OpenAI, without a single line of backend code.

In this lesson, you'll learn:

• How a chatbot works in its simplest form: a question goes in, an answer comes back

• How to use Make's Webhook response module to send a reply back to the person who asked

• How to write a prompt that gives your bot a clear job and clear limits

• How to add a working chat box to a Blogger page and test it from your phone

Core Concept: The Instant Reply Machine

Think about the front desk of a small office. A visitor walks in and asks, "What time do you open on Saturdays?" The receptionist already knows, answers right away, and the visitor moves on. Now imagine that receptionist never sleeps and can talk to a hundred visitors at once. That's what a website chatbot does.

In this build, the chat box is the front desk, Make.com is the back office, and OpenAI is the person who knows the answers.

You already have the key building block. In Lesson 8, you learned that a webhook is an instant trigger — it starts your scenario the moment something knocks on its URL. That's exactly what a chatbot needs, since a visitor can't wait for a scenario that only checks for new data every few minutes.

The one new piece is the Webhook response module. Until now, when you opened a webhook URL in your browser, all you saw was the word "Accepted." A Webhook response changes that: it lets Make answer the same request it received, so whatever your scenario produced travels back to the visitor's screen.

The whole journey looks like this: Question → Webhook → OpenAI → Webhook response → Answer in the chat box. It's still the familiar Read → Think → Respond pattern, just fast enough to feel like a conversation.

Tool Walkthrough: Building the Chatbot

This build has two parts. First you create the "brain" in Make (Steps 1–7), then you add the chat box to your blog and connect the two (Steps 8–9).

Step 1 — Add a Custom Webhook

Create a new scenario, search for Webhooks, and choose Custom webhook. Click Add, name it "Website Chatbot," and save. Make will generate a webhook URL — copy it somewhere safe. Treat this URL like a password, since anyone who has it can send messages to your scenario.

Step 2 — Send a Test Question

Click Run once so the webhook starts listening. Then open your webhook URL in a new browser tab and add this to the end:

?message=Hello

The page should say Accepted. Back in Make, the webhook should now show one detected field called message. This is the same query-string trick from Lessons 8 and 14 — your chat box will do exactly the same thing later, with the visitor's real question instead of "Hello."

Step 3 — Add OpenAI's "Generate a Response" Module

Click the + after the webhook, search for OpenAI, and choose Generate a response. Select your existing connection from Lesson 10 and the GPT-4o model.

Step 4 — Write the Prompt

The prompt is your bot's job description, and it's the most important part of this lesson. A vague prompt makes the bot ramble and sometimes invent facts. A clear one makes it sound like a trained member of your team. Paste the prompt below into the Prompt field, then replace [message] at the end with the message chip from your webhook module.

Code

You are the friendly assistant for BotDigitals, a free learning website about no-code AI automation.

Rules:
- Answer in a warm, simple tone, like a helpful team member.
- Keep every answer under 80 words.
- Only answer questions about no-code automation, Make.com and this website's free course.
- If you do not know something, say so honestly and suggest the visitor use the Contact page.
- Never invent prices, dates or features.
- Reply in the same language as the visitor's question. If the question is in English, always answer in English.

Visitor's question: [message]

Change the business details to match your own site. What matters is the structure: who the bot is, what it can talk about, how long its answers should be, and what to do when it doesn't know.

Step 5 — Add a Webhook Response

Click the + after the OpenAI module, search for Webhooks again, and this time choose Webhook response. Fill it in like this:

• Status: 200

• Body: map OpenAI's Result field (the generated text)

• Custom headers: click Add item twice, and add Content-Type = text/plain; charset=utf-8, then Access-Control-Allow-Origin = *

We return plain text instead of JSON because AI answers often contain quotation marks and line breaks, which can quietly break a JSON reply. The second header tells the browser your website is allowed to read the answer — without it, the browser blocks the reply even though Make sent it correctly.

Step 6 — Test the Whole Chain

Click Run once again, then open your webhook URL with a real question at the end:

?message=What is Make.com used for?

This time, instead of "Accepted," your browser should show an actual answer written by the AI. In Make, all three modules should show green checkmarks.

Step 7 — Activate the Scenario

Switch the Active toggle on. A webhook only answers while its scenario is active, so a chat box connected to a switched-off scenario will just show an error.

Step 8 — Add the Chat Box to Blogger

Create a new draft post, switch to HTML view (not Compose view), and paste the chat box code below. Use the Copy button in the box.

Code

<div id="bd-chat" style="max-width:420px;margin:24px auto;border:1px solid #e6defe;border-radius:16px;overflow:hidden;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;background:#ffffff;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
  <div style="background:linear-gradient(135deg,#7c3aed 0%,#2563eb 100%);padding:14px 16px;color:#ffffff;font-weight:700;font-size:15px;">BotDigitals Assistant <span style="font-weight:400;font-size:12px;opacity:0.85;">&middot; Ask me anything</span></div>
  <div id="bd-chat-log" style="height:260px;overflow-y:auto;padding:14px;background:#f8f7ff;font-size:14px;line-height:1.5;">
    <div style="background:#ffffff;border:1px solid #e6defe;color:#1f2937;padding:10px 12px;border-radius:12px;margin-bottom:10px;max-width:85%;">Hi! I can answer questions about no-code automation and our free course. What would you like to know?</div>
  </div>
  <div style="display:flex;gap:8px;padding:10px;border-top:1px solid #e6defe;background:#ffffff;">
    <input id="bd-chat-input" type="text" placeholder="Type your question..." style="flex:1;min-width:0;padding:10px 12px;border:1px solid #d8cffb;border-radius:999px;font-size:14px;outline:none;color:#1f2937;background:#ffffff;" />
    <button id="bd-chat-send" type="button" style="background:linear-gradient(135deg,#7c3aed 0%,#2563eb 100%);color:#ffffff;border:none;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;">Send</button>
  </div>
</div>

<script>
(function () {
  var WEBHOOK_URL = "PASTE-YOUR-WEBHOOK-URL-HERE";

  var log = document.getElementById("bd-chat-log");
  var input = document.getElementById("bd-chat-input");
  var btn = document.getElementById("bd-chat-send");

  function addBubble(text, isUser) {
    var d = document.createElement("div");
    d.style.cssText = "padding:10px 12px;border-radius:12px;margin-bottom:10px;max-width:85%;white-space:pre-wrap;word-wrap:break-word;" +
      (isUser
        ? "background:linear-gradient(135deg,#7c3aed 0%,#2563eb 100%);color:#ffffff;margin-left:auto;"
        : "background:#ffffff;border:1px solid #e6defe;color:#1f2937;");
    d.textContent = text;
    log.appendChild(d);
    log.scrollTop = log.scrollHeight;
    return d;
  }

  function send() {
    var q = input.value.trim();
    if (!q) { return; }
    addBubble(q, true);
    input.value = "";
    btn.disabled = true;
    var thinking = addBubble("Typing...", false);

    var sep = WEBHOOK_URL.indexOf("?") === -1 ? "?" : "&";
    fetch(WEBHOOK_URL + sep + "message=" + encodeURIComponent(q))
      .then(function (r) { return r.text(); })
      .then(function (t) { thinking.textContent = t || "Sorry, I could not find an answer."; })
      .catch(function () { thinking.textContent = "Something went wrong. Please try again in a moment."; })
      .then(function () { btn.disabled = false; log.scrollTop = log.scrollHeight; });
  }

  btn.addEventListener("click", send);
  input.addEventListener("keydown", function (e) { if (e.key === "Enter") { send(); } });
})();
</script>

Step 9 — Connect It and Test

Near the top of that code, find the line var WEBHOOK_URL = "PASTE-YOUR-WEBHOOK-URL-HERE"; and replace the text inside the quotation marks with your webhook URL from Step 1. Don't add ?message= yourself — the code adds the visitor's question automatically. Then click Preview, type a question, and check that an answer appears within a couple of seconds. Try it on your phone too, since most visitors will be on one.

Real Example: The Receptionist Who Never Sleeps

Imagine a small tailoring shop with a simple website. The owner keeps getting the same five questions on WhatsApp: what are your timings, do you do alterations, how long does a stitched suit take, do you deliver, how do I place an order.

She adds a chat box to her Contact page, with her timings, delivery areas and turnaround time written into the prompt. At 1 AM, a visitor types, "Do you stitch bridal dresses and how long does it take?" The bot replies within seconds with the turnaround time she provided and suggests calling her for a fitting. She wakes up to a customer who already knows what to expect, instead of a pile of unanswered messages.

The AI model is the same one everybody else uses. What makes it her receptionist is the prompt.

Common Mistakes

Mistake 1: Leaving the scenario switched off

Everything in Make looks perfect, yet the chat box shows an error. A webhook only responds while its scenario is active, so check the toggle first.

Mistake 2: Skipping the Access-Control-Allow-Origin header

The scenario runs and every module is green, but the chat box still fails. The browser blocked the reply for security reasons. Adding this header in the Webhook response fixes it.

Mistake 3: Not protecting your OpenAI credit

Your webhook URL sits inside the page code, so anyone who looks can find it and send thousands of messages — and every message costs a small amount of credit. Set a monthly spending limit in your OpenAI billing settings, keep auto-reload switched off, and keep answers short, as the prompt above does. Lesson 16 covers this in more depth.

Try This Yourself

Before moving to Lesson 14, build this end-to-end on your own:

• Create the full chain: Custom webhook → OpenAI → Webhook response, and activate it

• Change the bot's personality, for example a "Course Helper" that only answers questions about your free course

• Ask it an unrelated question and check that it politely stays in character, then tighten the prompt rules until it does

Key Takeaways

• A Webhook response is what turns Make from a background worker into a live responder

• The prompt is the bot's job description — clear rules on topic, tone, and length separate a useful bot from a rambling one

• A webhook URL in public page code is a public door, so always set a spending limit

• Each chat message uses three Make operations, so the free plan covers roughly 300 messages a month

Frequently Asked Questions

Can I use this chat box on a site that isn't on Blogger?

Yes. The chat box is ordinary HTML and JavaScript, so it works on any page where you can paste HTML.

Does the bot remember what the visitor said earlier?

Not in this basic build — each question is treated as a fresh prompt. Giving a bot memory of the conversation is a more advanced technique beyond this introductory lesson.

Can I connect the same bot to Telegram later?

Yes. Once you have a Telegram bot token, swap the Custom webhook for Telegram's Watch Updates trigger and the Webhook response for Telegram's Send a Message module. Your OpenAI step and prompt stay exactly the same.

Next Lesson Preview

With a working chatbot built, Lesson 14 moves into Phase 4 and starts combining everything learned so far into a complete freelance-ready project: Lead Capture → CRM → AI Follow-Up System.

Navigation:

← Previous: Lesson 12 — AI Content Automation: Auto-Generate & Schedule Posts

→ Next: Lesson 14 — Project 1: Lead Capture → CRM → AI Follow-Up System

🏠 Back to Course Hub