Brandable Custom Chatbox for N8N — Dark

Developed by Omer Fayyaz

This page shows how to embed the chatbox and connect it to an n8n Webhook. Open the widget from the floating button at the bottom-right.

Edit webhookUrl with your n8n URL. The widget persists conversation in localStorage under the key n8n-brandable-chatbox.

Open Chatbox Close Chatbox Toggle Chatbox Clear Chatbox Send "Hello" Message

---

How this example works

The widget is loaded from n8n-brandable-chatbox.js and initialized with window.N8NbrandableChatbox.init({...}). After init, the same API is exposed at window.N8NbrandableChatbox.api, which is used by the buttons above.

Embed + init

<script src="/path/to/n8n-brandable-chatbox.js"></script>
<script>
  const api = window.N8NbrandableChatbox.init({
    webhookUrl: "https://your-n8n/webhook/abc123",
    botName: "Acme Assistant",
    brandColor: "#6d28d9",
    accentColor: "#22c55e",
    position: "left",
    launcherVariant: "icon-text",
    launcherText: "Chat with us",
    darkMode: true,
    allowHTMLInResponses: true
  });
  // api.open(); api.close(); api.toggle(); api.send("Hi"); api.clear(); api.getSessionId();
</script>

Common options

• webhookUrl: your n8n Webhook URL (required)
• brandColor, accentColor: theming
• launcherVariant: icon | text | icon-text
• darkMode, position, openByDefault
• allowHTMLInResponses: safely render HTML replies
• extraContext: appended to each request as metadata

API methods

• open(), close(), toggle()
• send(text), clear(), getSessionId()

Webhook contract

Default request body (can be customized via transformRequest):

{
  "message": "user text",
  "sessionId": "...",
  "metadata": { }
}

Default parsing (can be customized via transformResponse): looks for reply → message → text → output or plain text.

---