aichat-widget

Drop-in AI chat widget for any website — powered by n8n. One script tag, zero dependencies.

Quick start

Paste before </body> on any page:

<script
  src="https://cdn.jsdelivr.net/gh/YOUR_USERNAME/aichat-widget@latest/widget.js"
  data-webhook="https://YOUR_N8N.com/webhook/ai-chatbot-trigger/chat"
  data-company="Acme Support"
  data-accent="#6366f1"
></script>

That's it. The widget injects itself and connects to your n8n AI Agent automatically.

---

All options

Attribute	Description	Default
data-webhook	n8n Chat Trigger webhook URL (required)	—
data-company	Bot name shown in the header	AI Assistant
data-accent	Accent color — bubble, send button, focus ring	#6366f1
data-theme	dark or light	dark
data-avatar	URL to a custom bot avatar image	default icon
data-welcome	First message shown on open	Hi there! 👋 …
data-placeholder	Input placeholder text	Ask me anything…
data-suggestions	Comma-separated quick reply chips (max 4)	3 defaults
data-position	right or left corner	right
data-branding	Set to false to hide "Powered by" footer	true
data-status	Status text next to the online dot	online

---

Full example

<script
  src="https://cdn.jsdelivr.net/gh/YOUR_USERNAME/aichat-widget@latest/widget.js"

  data-webhook="https://YOUR_N8N.com/webhook/ai-chatbot-trigger/chat"

  data-company="Acme Support"
  data-avatar="https://your-site.com/logo.png"
  data-accent="#0ea5e9"
  data-theme="light"
  data-branding="false"

  data-welcome="Hi! How can I help you today? 👋"
  data-placeholder="Type your question…"
  data-suggestions="Pricing,Features,Get in touch,Book a demo"

  data-position="right"
></script>

---

Versioned embeds

Pin to a specific version to avoid unexpected updates:

<!-- Always latest -->
src="https://cdn.jsdelivr.net/gh/YOUR_USERNAME/aichat-widget@latest/widget.js"

<!-- Pinned to v1.0.0 -->
src="https://cdn.jsdelivr.net/gh/YOUR_USERNAME/aichat-widget@v1.0.0/widget.js"

<!-- Pinned to a commit SHA -->
src="https://cdn.jsdelivr.net/gh/YOUR_USERNAME/aichat-widget@abc1234/widget.js"

---

Webflow embed

1. Open your Webflow project → Project Settings → Custom Code → Footer Code
2. Paste the script tag
3. Publish — done

Or use an Embed element anywhere on the page.

---

n8n setup

This widget expects your n8n workflow to:

1. Use a Chat Trigger node (or plain Webhook with path ai-chatbot-trigger)
2. Accept { chatInput: string, sessionId: string } in the POST body
3. Return { output: string } (or message, text — the widget handles all three)

See the n8n workflow JSON files in this repo for ready-to-import workflows.

---

JavaScript API

// Destroy the widget (useful in SPAs)
window.acwDestroy();

---

License

MIT — free to use, modify, and embed in client projects.