# Connect n8n to a website chat widget

Source: https://langbot.app/docs/en/recipes/n8n/web-page

Step-by-step guide to running your n8n app as a a website chat widget bot with LangBot: n8n setup, bot credentials, networking, testing and troubleshooting.

This recipe puts your n8n app behind a a website chat widget bot. LangBot receives messages from a website chat widget, runs them through a pipeline, and sends the answer back, so you do not write any platform code.

n8n runs the workflow; LangBot handles the chat platform, sessions and delivery and calls your workflow through a webhook for every message.

## What you need

- A running LangBot instance: [LangBot Cloud](https://space.langbot.app/cloud) (no server needed) or a [self-hosted deployment](https://langbot.app/docs/en/deploy/langbot/docker.md) with Docker or `uvx langbot`.
- A n8n account or instance that LangBot can reach over the network.
- Nothing from a third party. Optionally a Cloudflare Turnstile site key and secret key for anti-abuse.

## Networking

Visitors' browsers talk to LangBot directly, so LangBot must be reachable at a public HTTPS address. LangBot Cloud includes one.

## 1. Prepare n8n

1. Start the workflow with a **Webhook** or **On chat message** trigger. Set **Response Mode** to **Streaming** if you want streamed replies.
2. Answer with an **AI Agent** node (streaming) or a **Respond to Webhook** node whose response key matches LangBot's output key.
3. Click **Active** to enable the workflow and copy its production webhook URL.

## 2. Create a pipeline

Open **Pipelines** in the LangBot WebUI, create a pipeline (or edit the default one) and set **AI** as follows. If the runner is not listed, install the official runner plugin from **Plugins** or the [LangBot Space marketplace](https://space.langbot.app/market).

| Field               | Value                                                      |
| ------------------- | ---------------------------------------------------------- |
| Runner              | **n8n** (official n8n workflow runner plugin)              |
| Webhook URL         | The workflow's production webhook URL                      |
| Authentication Type | None, Basic Auth, JWT or Header, matching the trigger node |

## 3. Create the a website chat widget bot

1. Create a bot with the **Web Page Bot** adapter and bind a pipeline.
2. Copy the embed code into your site and replace `localhost:5300` with LangBot's public address.

## 4. Bind and test

Open the bot, select the pipeline you created, save and make sure the bot is enabled.

Open the page with the widget and start a conversation.

## Troubleshooting

- Empty replies: the key in **Respond to Webhook** must match the output key configured in LangBot.
- The test URL only works while the n8n editor is listening; use the production URL of an active workflow.
- The widget does not load: the embed code still points at `localhost`, or the LangBot address is not served over HTTPS.
- Check **Monitoring** in the WebUI: every message, pipeline run and error is recorded there.

## FAQ

### Do I need a server with a public IP for a website chat widget?

Yes, or use LangBot Cloud. Visitors' browsers talk to LangBot directly, so LangBot must be reachable at a public HTTPS address. LangBot Cloud includes one.

### Does the a website chat widget bot support streaming replies?

Check the [platform feature matrix](https://langbot.app/docs/en/insight/platform-features.md) for what this platform supports. Replies are delivered once the AI back end has finished.

### Can the same n8n setup serve other platforms too?

Yes. A pipeline can be bound to many bots, so one configuration can answer on several platforms at once.

## Related guides

- [Full a website chat widget setup guide](https://langbot.app/docs/en/usage/platforms/webpage.md)
- [Full n8n runner guide](https://langbot.app/docs/en/usage/pipelines/n8n.md)
- Other AI back ends on a website chat widget: [Dify](https://langbot.app/docs/en/recipes/dify/web-page.md) · [Coze](https://langbot.app/docs/en/recipes/coze/web-page.md) · [Langflow](https://langbot.app/docs/en/recipes/langflow/web-page.md) · [DeepSeek](https://langbot.app/docs/en/recipes/deepseek/web-page.md) · [OpenAI (ChatGPT models)](https://langbot.app/docs/en/recipes/openai/web-page.md)
- n8n on other platforms: [Telegram](https://langbot.app/docs/en/recipes/n8n/telegram.md) · [Discord](https://langbot.app/docs/en/recipes/n8n/discord.md) · [Slack](https://langbot.app/docs/en/recipes/n8n/slack.md) · [Lark (Feishu)](https://langbot.app/docs/en/recipes/n8n/lark.md) · [DingTalk](https://langbot.app/docs/en/recipes/n8n/dingtalk.md) · [WeCom (internal app)](https://langbot.app/docs/en/recipes/n8n/wecom.md)