Configuration Guide

n8n Webhook Setup Guide

Configure n8n workflows to power your N8.Chat widget with AI capabilities. This guide covers cloud and self-hosted setups.

Prerequisites

N8.Chat plugin installed on WordPress or Shopify
n8n account (cloud or self-hosted)
API keys for your preferred AI service (OpenAI, Anthropic, etc.)

Step 1: Create an n8n Account

n8n Cloud (Recommended)

+Fully managed hosting
+Automatic updates
+Built-in SSL certificates
+Free tier available

Self-Hosted

+Full control over data
+Run on your own infrastructure
+Free and open source
!Requires Docker or npm setup

Self-hosting documentation

Tip: For beginners, we recommend starting with n8n Cloud. You can always migrate to self-hosted later if needed.

Self-Hosted Docker Setup (Optional)

If you prefer self-hosting, here is the quickest way to get n8n running with Docker:

Docker Compose (docker-compose.yml):

version: '3.8'

services:
  n8n:
    image: n8nio/n8n:latest
    restart: always
    ports:
      - "5678:5678"
    environment:
      - N8N_BASIC_AUTH_ACTIVE=true
      - N8N_BASIC_AUTH_USER=admin
      - N8N_BASIC_AUTH_PASSWORD=your_secure_password
      - WEBHOOK_URL=https://your-domain.com/
      - N8N_ENCRYPTION_KEY=your_encryption_key
    volumes:
      - n8n_data:/home/node/.n8n

volumes:
  n8n_data:

Important: Replace your_secure_password and your_encryption_key with secure values. The WEBHOOK_URL should be your public-facing domain with SSL.

Step 2: Create a Webhook Workflow

1. Create a New Workflow

In your n8n dashboard, click + New Workflow to create a blank workflow.

2. Add a Webhook Trigger Node

Click the + button and search for "Webhook". Add the Webhook node to your workflow.

Webhook Configuration:

HTTP Method:POST

Path:n8chat-webhook

Response Mode:Last Node

3. Copy the Webhook URL

Click the Test workflow button, then copy the Production URL from the Webhook node.

https://your-instance.app.n8n.cloud/webhook/n8chat-webhook

Step 3: Connect AI (OpenAI, Claude)

Connect your preferred AI service to process chat messages. Here are the most popular options:

OpenAI (ChatGPT)

1.Add an OpenAI Chat Model node after your Webhook
2.Create OpenAI credentials in n8n with your API key from platform.openai.com
3.Set the model (e.g., gpt-4o or gpt-4o-mini)
4.Configure the prompt using {{ $json.message }}

Example n8n Expression:

{
  "model": "gpt-4o",
  "messages": [
    {
      "role": "system",
      "content": "You are a helpful customer support assistant for an e-commerce store."
    },
    {
      "role": "user",
      "content": "{{ $json.message }}"
    }
  ],
  "temperature": 0.7
}

Anthropic (Claude)

1.Add an HTTP Request node after your Webhook
2.Set URL to https://api.anthropic.com/v1/messages
3.Add required headers for authentication

Required Headers:

x-api-key: YOUR_ANTHROPIC_API_KEY
anthropic-version: 2023-06-01
Content-Type: application/json

Request Body:

{
  "model": "claude-3-5-sonnet-20241022",
  "max_tokens": 1024,
  "messages": [
    {
      "role": "user",
      "content": "{{ $json.message }}"
    }
  ]
}

Complete Workflow Template

Import this complete workflow JSON into n8n to get started quickly. This includes a webhook, OpenAI integration, and proper response formatting.

n8n Workflow JSON (copy and import):

{
  "name": "N8.Chat AI Workflow",
  "nodes": [
    {
      "parameters": {
        "httpMethod": "POST",
        "path": "n8chat-webhook",
        "responseMode": "lastNode",
        "options": {}
      },
      "id": "webhook-node",
      "name": "Webhook",
      "type": "n8n-nodes-base.webhook",
      "typeVersion": 1.1,
      "position": [250, 300]
    },
    {
      "parameters": {
        "model": "gpt-4o-mini",
        "messages": {
          "values": [
            {
              "content": "You are a helpful customer support assistant. Be concise and friendly."
            },
            {
              "content": "={{ $json.message }}",
              "role": "user"
            }
          ]
        },
        "options": {
          "temperature": 0.7,
          "maxTokens": 500
        }
      },
      "id": "openai-node",
      "name": "OpenAI Chat",
      "type": "@n8n/n8n-nodes-langchain.openAi",
      "typeVersion": 1.4,
      "position": [500, 300],
      "credentials": {
        "openAiApi": {
          "id": "YOUR_CREDENTIAL_ID",
          "name": "OpenAI account"
        }
      }
    },
    {
      "parameters": {
        "jsCode": "return [{ json: { message: $input.first().json.message.content } }];"
      },
      "id": "format-response",
      "name": "Format Response",
      "type": "n8n-nodes-base.code",
      "typeVersion": 2,
      "position": [750, 300]
    }
  ],
  "connections": {
    "Webhook": {
      "main": [[{ "node": "OpenAI Chat", "type": "main", "index": 0 }]]
    },
    "OpenAI Chat": {
      "main": [[{ "node": "Format Response", "type": "main", "index": 0 }]]
    }
  },
  "active": false,
  "settings": {
    "executionOrder": "v1"
  }
}

To import: In n8n, click the menu (three dots) at the top right, select "Import from File" or paste the JSON directly. Remember to add your OpenAI credentials after importing.

Step 4: Test Your Connection

Enable Test Mode in n8n

Click the "Test workflow" button to activate the test webhook endpoint

Send a Test Message

Use curl or your chat widget to send a test message to the webhook

Verify the Response

Check that the AI response appears correctly in your chat widget

Activate the Workflow

Toggle the workflow to "Active" to make it live for production

Test with curl:

curl -X POST https://your-instance.app.n8n.cloud/webhook/n8chat-webhook \
  -H "Content-Type: application/json" \
  -d '{"message": "Hello, this is a test message!"}'

Pro Tip: Use n8n's execution logs to debug any issues. Each webhook request is logged with full request and response details.

Best Practices

Secure Your Webhook

Use API key authentication headers to prevent unauthorized access to your webhook

Optimize Response Time

Keep workflows simple and use faster AI models (like gpt-4o-mini) for better UX

Handle Errors Gracefully

Add error handling nodes to provide fallback responses when AI calls fail

Monitor API Usage

Track AI API usage to avoid exceeding rate limits and manage costs effectively

Expected Response Format

Your n8n workflow should return a JSON response in this format for N8.Chat to display properly:

{
  "message": "Hello! How can I help you today?",
  "metadata": {
    "model": "gpt-4o-mini",
    "timestamp": "2025-01-15T10:30:00Z",
    "tokens_used": 150
  }
}

Troubleshooting

Webhook returns 404

Make sure the workflow is activated and you are using the Production URL, not the Test URL. Also verify the webhook path matches exactly.

Empty or undefined message

Check that your N8.Chat plugin is sending the message in the correct format. The webhook expects { message: '...' } in the request body.

AI API errors

Verify your API credentials are correct and have sufficient quota. Check the n8n execution logs for detailed error messages from the AI provider.

CORS errors

If using self-hosted n8n, ensure CORS is properly configured. Add your website domain to the allowed origins in n8n settings.