🤖 AI Chatbot for n8n

A high-performance, SaaS-grade WordPress plugin that injects a fully customizable AI chatbot widget onto your site, connected seamlessly to n8n workflows via public webhooks.

Features • Quick Start • Customizer • n8n Setup • API • Development

✨ Features

🚀 Quick Start

1. Install the Plugin

Upload the ai-chatbot-n8n folder to /wp-content/plugins/, then activate AI Chatbot for n8n from the WordPress admin Plugins page.

2. Create an n8n Webhook Workflow

1. In n8n, create a new workflow.
2. Add a Webhook trigger node.
3. Set the Method to POST.
4. Copy the webhook URL (e.g., https://your-n8n.com/webhook/chatbot or https://your-n8n.com/webhook-test/chatbot for testing).
5. Connect your AI logic (OpenAI, Anthropic, local LLM, etc.) and a Respond to Webhook node.
6. Activate the workflow.

💡 The webhook receives: { message, sessionId, chatInput, history, timestamp, metadata } and should return a response with a reply or response field.

3. Configure the Plugin

Navigate to AI Chatbot in your WordPress admin sidebar and configure:

• General — Enable the widget, set bot name, status, welcome message, avatar, and input placeholder.
• Visual Customizer — Choose colors, position, size, launcher icon, and see live preview updates in real time.
• Webhook Setup — Enter your n8n production and test webhook URLs, add optional auth headers, and click Test Connection.
• Advanced — Set session timeout and add custom CSS.

🎛️ Admin Customizer

The admin panel features a live preview panel that updates instantly as you tweak settings — no save required to preview.

🔧 n8n Workflow Setup

Sample Webhook Output

Your n8n workflow should Respond to Webhook with a payload containing one of these fields (the plugin searches in order):

{
  "reply": "I can help you with that!",
  "response": "...",
  "answer": "...",
  "output": "...",
  "text": "...",
  "message": "...",
  "content": "..."
}

The plugin will extract the first matching text field. The response supports Markdown formatting (bold, lists, code, links, etc.), which is rendered beautifully in the chat widget.

Request Format

The webhook receives:

{
  "message": "User's chat message",
  "sessionId": "sess_1712345678_abc123def",
  "chatInput": "User's chat message",
  "timestamp": "2025-01-01 12:00:00",
  "history": [
    { "role": "user", "text": "Previous message" },
    { "role": "bot", "text": "Previous reply" }
  ],
  "metadata": {
    "source": "wordpress",
    "site_url": "https://example.com",
    "user_agent": "Mozilla/5.0 ..."
  }
}

Filter hooks: aichatbot_n8n_request_body, aichatbot_n8n_request_args, aichatbot_n8n_frontend_config, aichatbot_n8n_should_display.

📡 API

The plugin registers custom REST API endpoints under ai-chatbot-n8n/v1:

🏗️ Architecture

ai-chatbot-n8n/
├── ai-chatbot-n8n.php           # Bootstrap & singleton
├── includes/
│   ├── Autoloader.php           # PSR-4 autoloader
│   ├── Core/Plugin.php          # Main orchestrator
│   ├── Admin/
│   │   ├── Settings.php         # Admin page & menu
│   │   └── Customizer.php       # Preview panel & icons
│   ├── API/
│   │   ├── RestServer.php       # REST endpoints
│   │   └── WebhookClient.php    # n8n HTTP client
│   ├── Frontend/
│   │   └── Widget.php           # Asset enqueue & injector
│   └── Helpers/
│       └── Sanitizer.php        # Input validation
├── assets/
│   ├── css/
│   │   ├── admin.css            # Admin dashboard styles
│   │   └── widget.css           # Frontend widget styles
│   └── js/
│       ├── admin-preview.js     # Live customizer engine
│       └── widget.js            # Chat widget engine
└── templates/
    ├── admin-settings.php       # Settings page layout
    └── widget-view.php          # Widget HTML container

🧩 Hooks & Filters

🧪 Requirements

• WordPress 5.8+
• PHP 8.0+
• n8n instance with a public webhook endpoint
• Modern browser for the frontend widget (Chrome, Firefox, Safari, Edge)

Develop By

-- Kamrul Hasan