Build a Free AI Chatbot for Your Blogger Site (Using Cloudflare Workers AI + Llama 3)

Want to add a real AI chatbot to your Blogger website – without paying for OpenAI, without API keys, and without any coding experience? You’ve come to the right place.

In this guide, we’ll build a fully functional AI assistant for Domebytes (or any Blogger blog) using Cloudflare Workers and Workers AI (powered by Meta’s Llama 3). The chatbot will appear as a floating chat bubble, answer questions about your blog’s niche (like Python, AI tools, cybersecurity, SEO, and blogging), and run for free – with honest limits we’ll explain below.

📦 What You’ll Need

A Blogger website (like Domebytes).
A free Cloudflare account – sign up here.
A free GitHub account – sign up here (to host one small file).
About 15 minutes of your time.

🧠 How It Works (Simplified)

A visitor types a question in the chat bubble on your Blogger site.
The question is sent to a Cloudflare Worker (a tiny serverless function).
The Worker first checks a knowledge base of common Domebytes questions – if found, it answers instantly.
If not found, it calls Cloudflare Workers AI (using the Llama 3.1 8B model) to generate a smart reply.
The answer appears in the chat window – fast, free, and friendly.

⚙️ Step 1: Create the Cloudflare Worker (Backend)

This worker will act as your AI brain.

Log into Cloudflare Dashboard.
Go to Workers & Pages → Create application → Create Worker.
Name it (e.g., domebytes-ai-chat) and click Deploy.
Click Edit code and delete all the default code.
Copy the entire script below and paste it into the editor.

// domebytes-ai-chat Worker – complete backend with AI + knowledge base
export default {
    async fetch(request, env, ctx) {
        // CORS headers for Blogger
        const corsHeaders = {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'POST, OPTIONS',
            'Access-Control-Allow-Headers': 'Content-Type',
        };

        if (request.method === 'OPTIONS') {
            return new Response(null, { headers: corsHeaders });
        }
        if (request.method !== 'POST') {
            return new Response(JSON.stringify({ error: 'Method not allowed' }), {
                status: 405,
                headers: { ...corsHeaders, 'Content-Type': 'application/json' }
            });
        }

        let userMessage;
        try {
            const body = await request.json();
            userMessage = body.message?.trim();
        } catch (e) {
            return new Response(JSON.stringify({ error: 'Invalid JSON' }), {
                status: 400,
                headers: { ...corsHeaders, 'Content-Type': 'application/json' }
            });
        }
        if (!userMessage) {
            return new Response(JSON.stringify({ error: 'Message required' }), {
                status: 400,
                headers: { ...corsHeaders, 'Content-Type': 'application/json' }
            });
        }

        // ---------- Domebytes knowledge base (fast answers) ----------
        const kb = {
            "what is domebytes": "Domebytes is a tech blog covering Python, AI tools, cybersecurity, blogging, SEO, and free online tools.",
            "what topics do you cover": "We write about Python, AI tools, cybersecurity, SEO, blogging, Windows tips, and tech tutorials.",
            "link extractor tool": "Yes! Domebytes has a free Website Link Extractor Tool that extracts all URLs from any page server-side.",
            "learn python": "Check the 'Python' label on Domebytes for beginner tutorials, projects, and code examples.",
            "ai tools": "We cover free AI video generators, handwriting generators, ChatGPT alternatives, and more.",
            "improve seo": "Domebytes has SEO guides on keyword research, on-page optimization, and indexing strategies.",
        };

        const lowerMsg = userMessage.toLowerCase();
        for (const [key, answer] of Object.entries(kb)) {
            if (lowerMsg.includes(key)) {
                return new Response(JSON.stringify({ reply: answer }), {
                    headers: { ...corsHeaders, 'Content-Type': 'application/json' }
                });
            }
        }

        // ---------- AI fallback using Workers AI (Llama 3) ----------
        const systemPrompt = `You are Domebytes AI, a helpful assistant for a tech blog about Python, AI tools, cybersecurity, blogging, SEO, and online tools. Keep answers short (2-3 sentences), friendly, and useful. If you don't know, suggest visiting domebytes.online.`;
        const prompt = `${systemPrompt}\n\nUser: ${userMessage}\nAssistant:`;

        try {
            const aiResponse = await env.AI.run('@cf/meta/llama-3.1-8b-instruct', {
                prompt: prompt,
                max_tokens: 300,
                temperature: 0.7
            });
            const reply = aiResponse.response || "I'm not sure. Please visit Domebytes for more info!";
            return new Response(JSON.stringify({ reply }), {
                headers: { ...corsHeaders, 'Content-Type': 'application/json' }
            });
        } catch (err) {
            console.error(err);
            return new Response(JSON.stringify({ error: 'AI service temporarily unavailable' }), {
                status: 503,
                headers: { ...corsHeaders, 'Content-Type': 'application/json' }
            });
        }
    }
};

Click Save and Deploy.
Copy your Worker URL – it will look like https://domebytes-ai-chat.your-subdomain.workers.dev (save this for later).

⚠️ Critical: Enable the AI Binding

Without this, the Worker cannot talk to the AI model.

In your Worker dashboard, click Settings → Variables.
Scroll to AI Bindings → click Add binding.
Binding name: enter AI (exactly, uppercase).
Click Save and then Deploy again.

🎨 Step 2: Host the Frontend Widget (The Chat Bubble)

We’ll use a GitHub Gist and raw.githack.com to serve the widget JavaScript – completely free, no command line needed.

Go to gist.github.com and log in with your GitHub account.
Create a new gist:
- Filename: domebytes-chatbot.js
- Copy the widget script below and paste it into the large text area.
- Click Create public gist.

// domebytes-chatbot.js – embeddable AI chat widget for Blogger
(function() {
    const config = window.DomebytesChatbotConfig || {};
    const apiUrl = config.apiUrl || "https://your-worker-url.workers.dev/chat";
    const botName = config.botName || "Domebytes AI";
    const primaryColor = config.primaryColor || "#2563eb";
    const position = config.position || "right";

    if (document.getElementById("domebytes-chatbot-widget")) return;

    const html = `
        <div id="domebytes-chatbot-widget" style="position: fixed; bottom: 20px; ${position}: 20px; z-index: 9999; font-family: system-ui, sans-serif;">
            <button id="db-chat-toggle" style="width: 60px; height: 60px; border-radius: 50%; background: ${primaryColor}; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2); cursor: pointer; font-size: 28px;">💬</button>
            <div id="db-chat-window" style="display: none; position: absolute; bottom: 70px; ${position}: 0; width: 360px; max-width: calc(100vw - 40px); height: 500px; background: white; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden;">
                <div style="background: ${primaryColor}; color: white; padding: 12px 16px; display: flex; justify-content: space-between;">
                    <span>${botName}</span>
                    <button id="db-chat-close" style="background: none; border: none; color: white; font-size: 20px; cursor: pointer;">✕</button>
                </div>
                <div id="db-messages" style="flex: 1; overflow-y: auto; padding: 16px; background: #f8fafc; display: flex; flex-direction: column; gap: 12px;">
                    <div style="background: #e2e8f0; padding: 10px 14px; border-radius: 18px; align-self: flex-start; max-width: 85%;">👋 Hi! I'm ${botName}. Ask me about Python, AI tools, SEO, or Domebytes!</div>
                </div>
                <div style="padding: 12px; border-top: 1px solid #e2e8f0; background: white; display: flex; gap: 8px;">
                    <input type="text" id="db-user-input" placeholder="Type a message..." style="flex: 1; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 24px;">
                    <button id="db-send-btn" style="background: ${primaryColor}; color: white; border: none; border-radius: 24px; padding: 8px 16px; cursor: pointer;">Send</button>
                </div>
                <div id="db-typing" style="display: none; padding: 8px 16px; font-size: 12px; color: #64748b;">${botName} is typing...</div>
            </div>
        </div>
    `;
    document.body.insertAdjacentHTML('beforeend', html);

    const toggle = document.getElementById('db-chat-toggle');
    const win = document.getElementById('db-chat-window');
    const close = document.getElementById('db-chat-close');
    const send = document.getElementById('db-send-btn');
    const input = document.getElementById('db-user-input');
    const messages = document.getElementById('db-messages');
    const typing = document.getElementById('db-typing');

    let open = false;
    function scroll() { messages.scrollTop = messages.scrollHeight; }
    function addMsg(text, isUser) {
        const div = document.createElement('div');
        div.style.maxWidth = '85%';
        div.style.padding = '8px 12px';
        div.style.borderRadius = '16px';
        div.style.wordBreak = 'break-word';
        if (isUser) {
            div.style.background = primaryColor;
            div.style.color = 'white';
            div.style.alignSelf = 'flex-end';
        } else {
            div.style.background = '#e2e8f0';
            div.style.alignSelf = 'flex-start';
        }
        div.innerText = text;
        messages.appendChild(div);
        scroll();
    }
    async function sendMsg() {
        const msg = input.value.trim();
        if (!msg) return;
        addMsg(msg, true);
        input.value = '';
        typing.style.display = 'block';
        try {
            const res = await fetch(apiUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ message: msg })
            });
            const data = await res.json();
            addMsg(data.reply || "Sorry, no response.", false);
        } catch (e) {
            addMsg("⚠️ Error connecting to AI. Please try again later.", false);
        }
        typing.style.display = 'none';
    }
    toggle.onclick = () => {
        open = !open;
        win.style.display = open ? 'flex' : 'none';
        if (open) input.focus();
    };
    close.onclick = () => { open = false; win.style.display = 'none'; };
    send.onclick = sendMsg;
    input.onkeypress = (e) => { if (e.key === 'Enter') sendMsg(); };
})();

After creating the gist, click the Raw button (top-right of the code area).
Copy the raw URL from your browser’s address bar.
Go to raw.githack.com, paste the raw URL, and generate the Production URL – it will look like https://rawcdn.githack.com/.../domebytes-chatbot.js. Copy this URL (you’ll use it in Blogger).

🧩 Step 3: Add the Chatbot to Your Blogger Site

Now we put everything together with one simple embed code.

In Blogger, go to Theme → Edit HTML.
Search for </body> (Ctrl+F).
Just before </body>, paste the following snippet – but replace the two placeholders with your actual URLs (Worker URL & production widget URL).

<script>
    window.DomebytesChatbotConfig = {
        apiUrl: "https://your-worker-url.workers.dev/chat",
        botName: "Domebytes AI",
        primaryColor: "#2563eb",
        position: "right"
    };
</script>
<script src="https://your-rawgithack-url/domebytes-chatbot.js"></script>

For example (using a real worker URL):

<script>
    window.DomebytesChatbotConfig = {
        apiUrl: "https://domebytes-chat.ajiamal2002.workers.dev/chat",
        botName: "Domebytes AI",
        primaryColor: "#2563eb",
        position: "right"
    };
</script>
<script src="https://rawcdn.githack.com/Cyber-Dome/86cea2317507bb7a3bce98bbcaa9dac9/raw/domebytes-chatbot.js"></script>

Click Save theme.

🎉 That’s it! Visit your blog – you should see a chat bubble. Click it and ask something like “What topics does Domebytes cover?” The AI will answer.

🎨 Customization (Colors, Name, Position)

You can easily change the chatbot’s appearance by editing the window.DomebytesChatbotConfig object in the embed code.

Option	Description	Example
`botName`	Name displayed in the chat header	`"CyberDome Assistant"`
`primaryColor`	Main button and accent color (hex code)	`"#10b981"` (green) or `"#f97316"` (orange)
`position`	Side where the chat bubble appears	`"left"` or `"right"`

To add more custom answers (like “Where is Domebytes based?”), edit the kb object inside your Cloudflare Worker code and redeploy.

💰 Free Tier Limits – Honest Reality Check

This chatbot is completely free to start, but it’s not “unlimited free AI”. Here are the actual limits of Cloudflare’s free tier:

Cloudflare Workers: 100,000 requests per day. That’s huge for a personal blog – you likely won’t hit it.
Workers AI (Llama 3): 10,000 inference requests per day (as of 2025).
If your blog gets thousands of daily visitors all using the chatbot, you may exceed the free tier. In that case, you can upgrade to a paid plan (starting around $5/month).

For most bloggers with a few hundred visitors per day, you will never pay a cent.

🔧 Troubleshooting

Chat bubble doesn’t appear – Check that you pasted the embed code before </body> and that the widget URL is correct.
AI doesn’t reply (error “method not allowed”) – Your Worker URL is missing /chat at the end or you haven’t enabled the AI binding (Step 1, “Enable AI Binding”).
“AI service temporarily unavailable” – The free tier may have been exceeded for the day, or Cloudflare’s AI is temporarily busy. Wait a few minutes and try again.

📺 YouTube Tutorial Reference

For a complete walkthrough, watch our step‑by‑step video on the Domebytes YouTube channel:

👉 (Link to your YouTube video will be placed here)

In the video, I explain every line of code, show the Cloudflare dashboard live, and test the chatbot on a real Blogger site.

🚀 Next Steps & More Domebytes Tools

Now that you have an AI chatbot, why not add more free tools to your blog?

Website Link Extractor Tool – Extract all URLs from any page server‑side.
SEO Guides – Rank higher on Google.
Python Tutorials – Learn programming for free.
Top 7 Free Web APIs
Free AI Video Generator

🔗 Explore More on Domebytes (Internal Links & Social)

Recent Stories: Jonathan James Hacker Story | PowerSchool Hacker | Cyber Crimes in India | Nikola Tesla’s Discovery

Written by Domebytes – Free tech tools and tutorials for creators.

Domebytes

Build a Free AI Chatbot for Your Blogger Site (Using Cloudflare Workers AI + Llama 3)

📦 What You’ll Need

🧠 How It Works (Simplified)

⚙️ Step 1: Create the Cloudflare Worker (Backend)

⚠️ Critical: Enable the AI Binding

🎨 Step 2: Host the Frontend Widget (The Chat Bubble)

🧩 Step 3: Add the Chatbot to Your Blogger Site

🎨 Customization (Colors, Name, Position)

💰 Free Tier Limits – Honest Reality Check

🔧 Troubleshooting

📺 YouTube Tutorial Reference

🚀 Next Steps & More Domebytes Tools

🔗 Explore More on Domebytes (Internal Links & Social)

About the author

Post a Comment

The Five Stages Of Hacking:Understanding the cybersecurity Threat Landscape | Cybersecurity guide

NIKOLA TESLA'S FORBIDDEN DISCOVERY

How to use Cloudflare for website security (ethical guide)

How People's Install VMWare Workstation 17 Pro Freely | With License Key 2023 |

The Ultimate Guide to Becoming an Ethical Hacker in 2023: A Step-by-Step Roadmap

𝐓𝐄𝐑𝐌𝐔𝐗 𝐀𝐍𝐃 𝐁𝐀𝐒𝐈𝐂 𝐂𝐎𝐌𝐌𝐀𝐍𝐃𝐒 𝐅𝐎𝐑 𝐁𝐄𝐆𝐈𝐍𝐄𝐑𝐒 | Cybersecurity Guide