N8N Chat UI
Docs
Installing N8NChatUI on Webflow

Installing N8NChatUI on Webflow

Learn how to connect your n8nchatui.com widget to your Webflow site using our official integration. Follow this step-by-step guide to set up your widget ID, authorize site permissions, configure page exclusions, and publish your live chat.

Prerequisites

Before setting up the widget, ensure you have:

  • An active account on n8nchatui.com.
  • Your n8n account connected to n8nchatui.com (required to process and send automated responses).
  • A Webflow account with access to the site you want to edit.

Step 1: Copy Your Widget ID

  1. Log in to your n8nchatui.com account and navigate to your Dashboard.
  2. Locate the widget you want to embed on Webflow and click the Edit Widget icon.
  3. Select the Embed tab.
  4. Locate your Widget ID (the unique string at the end of your embed code) and copy it to a safe place.

Step 2: Authorize Webflow Access

  1. Open the N8NChatUI Webflow Auth Link.
  2. When prompted, select your Webflow site and grant the following required permissions:
    • Read site data
    • Edit custom code data
  4. Click Authorize App. Once authorized, you will automatically be redirected to the Widget Settings page.

Step 3: Configure Widget Settings & Page Exclusions

  1. In the Widget ID field, paste the Widget ID you copied in Step 1.
  2. (Optional) Set Page Exclusions: If you want to hide the chat widget on specific pages (e.g., /agents, /checkout, /legal), enter those URL paths in the page exclusion field.
  3. Click Save to update your settings.

Step 4: Publish & Verify

  1. Open your Webflow Designer/Editor.
  2. Click Publish in the top right corner and select your desired domains (e.g., your staging .webflow.io domain or custom domain).
  3. Open your published website to verify that the chat widget icon appears in the bottom corner.
  4. (Optional) Verify Exclusions: Visit one of the excluded pages you specified in Step 3 to ensure the widget is successfully hidden on those routes.

Note for Webflow Development Accounts:

If you are using a Webflow dev/free account, you may see an extra Webflow badge or development icon alongside the chat widget launcher. This is expected behavior and will look completely clean on production domains.

Backend Integration