Webhook Chat

A WordPress plugin that embeds a fully customizable chat widget connected to any webhook endpoint — built for n8n AI agent workflows, but compatible with any HTTP backend.

Features

• Floating launcher — a corner button that opens a popup chat window
• Inline iframe mode — embed a self-contained chat window anywhere via shortcode
• Connects to any webhook — point it at an n8n webhook, a custom API, or any HTTP endpoint
• Session IDs — auto-generated per-conversation session IDs, passable as {session_id} in request body fields
• Dot-notation response parsing — read nested JSON replies like data.message.text
• Markdown & URL linkification — bot replies support [label](url) links and bare URLs
• Typing indicator — animated dots while waiting for a response
• Per-page visibility rules — restrict the widget to specific URL paths
• Fully styled from the admin panel — colors, fonts, size, position, avatar, and more
• No external dependencies — no npm, no build step, vanilla JS + PHP

Requirements

• WordPress 5.8+
• PHP 7.4+
• An HTTP webhook endpoint (e.g. an n8n workflow with a Webhook node)

Installation

1. Clone or download this repo into wp-content/plugins/webhook-chat/
2. Activate the plugin in Plugins → Installed Plugins
3. Go to Settings → Webhook Chat and enter your webhook URL

n8n Setup

1. In n8n, create a new workflow and add a Webhook node
2. Set the method to POST and note the webhook URL
3. Add your AI agent logic (e.g. OpenAI, Anthropic, or a custom chain)
4. Return a JSON response with a reply field, e.g.:

   { "reply": "Hello! How can I help you?" }

5. Paste the webhook URL into Settings → Webhook Chat → Webhook URL

n8n Session Tracking

To maintain conversation context across messages, pass the session ID through to your n8n workflow. In Extra Body Fields, add:

action=sendMessage
sessionId={session_id}

Then use sessionId in your n8n workflow to look up or store conversation history.

Configuration

Navigate to Settings → Webhook Chat in the WordPress admin. Settings are organized into four tabs:

Webhook

Appearance

Colors (primary, user bubble, bot bubble), font size, border radius, window width/height, and position (bottom-right, bottom-left, bottom-center).

Content

Chat title, subtitle, welcome message, input placeholder, send button label, launcher icon (chat, support, or bot), optional launcher label, and bot avatar URL.

Behaviour

Shortcode

Use [webhook_chat] to embed the chat widget inline on any page or post.

In iframe display mode, this renders a self-contained `