GitHub Website + n8n AI Chatbot Integration

This page documents the exact setup used in the tutorial video—nodes, settings, flow, and the final working pipeline from website chat widget to AI reply.

1) Overview

We show a “Chat with AI” widget on a GitHub Pages website. When the user sends a message, it hits an n8n Webhook. An AI Agent + Chat Model generates a reply, and n8n returns it back to the website.

Flow: Website Chat UI → n8n Webhook → AI Agent → Chat Model → Edit Fields → Response to Webhook → Website Chat UI

2) What you built

Embedded the chat widget into GitHub Pages (by inserting the n8n Webhook Production URL).
Created an n8n Webhook workflow with CORS headers.
Generated AI replies from the incoming message and returned them via Response to Webhook.

3) Prerequisites

GitHub Pages website (domain not required)
n8n instance (cloud or self-hosted)
Chat widget HTML/JS that supports a webhook URL

4) Website-side setup

Add a Webhook node in n8n and copy the Production URL.
Paste that Production URL into your website chat HTML/JS code.
Commit changes on GitHub and open your site to verify the chat button appears.

5) n8n workflow nodes (exact structure)

Node 1 — Webhook: Receives the message from the website (usually POST).

Expected payload example: { "message": "Hello", "senderId": "website-user-123" }

Node 2 — Response to Webhook (CORS headers): Respond with Text, add Response Code and Response Headers:

Access-Control-Allow-Origin: https://yourname.github.io Access-Control-Allow-Methods: POST, OPTIONS Access-Control-Allow-Headers: Content-Type

Node 3 — AI Agent: Map user message into Prompt and set a short System Prompt.

User Prompt: {{$json.message}} System Prompt: (your rules / style / tone)

Node 4 — Chat Model: Connect a chat model and Execute Step to verify output.

Node 5 — Edit Fields: Format response fields (value + senderId).

Example output: { "value": "Hello! How can I help you today?", "senderId": "website-user-123" }

Node 6 — Response to Webhook (final): Put the formatted output into Response Body and return it to the website.

6) Testing

Open your website → open chat → type “Hello”
See “typing…” → receive the reply ✅

7) Troubleshooting

CORS error: Ensure exact origin + allow POST/OPTIONS + allow Content-Type.
No response returned: Response to Webhook must exist and be last.
Empty reply: Confirm message reaches AI Agent and correct output is selected in Edit Fields.

8) Security best practices

Webhook URL is public—use auth/header token if possible.
Add simple validation + truncate very long inputs.
Keep System Prompt strict: short replies, no sensitive data.

9) Next customizations

Add FAQ / service list / lead capture inside AI Agent.
Style chat UI with branding (icon, welcome message, colors).
Extend n8n: Google Sheets/CRM save, Telegram alerts, appointment booking.

Need this setup customized for your business workflow?

Contact → Back to Blog →