Custom API Webhook Integration

N8N Chat UI allows you to connect the chat widget to any custom API endpoint as a webhook, not just n8n workflows. To ensure the widget displays responses correctly, your API must return data in a specific JSON structure.

Required Response Format

Your custom API endpoint should always return a JSON object with the following structure:

{
  "output": "Your response text to render"
}

• The output field should contain the text you want displayed in the chat window.
• Only the content of the output field will be rendered by the widget.
• You are not limited to plain text—the output field also supports Markdown & HTML. Read here for more details and formatting options.

Enhancing Your Custom API

Consider these additional features to create a more engaging chat experience:

• Use metadata to pass contextual information from your website to your API.
• Enable file uploads to allow users to share documents and images.
• Add voice input capabilities for a more interactive interface.
• Programmatically control your widget using the Chat Widget Controls API.

Summary

• Always return a JSON object with an output field from your custom webhook.
• The value of output is what the chat widget will display.
• Any other fields will be ignored.
• Ensure your endpoint responds with valid JSON and a 200 OK status.
• For advanced formatting options in your responses, check out our guide on rendering Markdown and HTML.