# 把 n8n 接入网页聊天挂件

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

使用 LangBot 把 n8n 应用接入网页聊天挂件：n8n 配置、机器人凭据、网络要求、测试与常见问题。

本文把你的 n8n 应用接到网页聊天挂件机器人上。LangBot 接收网页聊天挂件消息，交给流水线处理后把答案发回去，你不需要写任何平台对接代码。

n8n 负责执行工作流，LangBot 负责聊天平台接入、会话和消息投递，并在每条消息到来时通过 Webhook 调用你的工作流。

## 准备工作

- 一个运行中的 LangBot：[LangBot Cloud](https://space.langbot.app/cloud)（无需服务器），或用 Docker、`uvx langbot` [自行部署](https://langbot.app/docs/zh/deploy/langbot/docker.md)。
- LangBot 能通过网络访问到的 n8n 账号或实例。
- 不需要第三方凭据。可选：用于防刷的 Cloudflare Turnstile Site Key 和 Secret Key。

## 网络要求

访客的浏览器会直接连接 LangBot，因此 LangBot 需要可公网访问的 HTTPS 地址；LangBot Cloud 自带。

## 1. 准备 n8n

1. 工作流以 **Webhook** 或 **On chat message** 触发器开始；需要流式回复时把 **Response Mode** 设为 **Streaming**。
2. 用 **AI Agent** 节点（流式）或 **Respond to Webhook** 节点返回结果，响应字段名要与 LangBot 中的输出键名一致。
3. 点击 **Active** 启用工作流，复制生产环境的 Webhook 地址。

## 2. 创建流水线

在 LangBot WebUI 打开 **流水线**，新建流水线（或编辑默认流水线），按下表配置 **AI** 能力。如果列表里没有对应运行器，请先在 **插件** 或 [LangBot Space 插件市场](https://space.langbot.app/market) 安装官方运行器插件。

| 配置项         | 填写                                  |
| ----------- | ----------------------------------- |
| 运行器         | **n8n**（官方 n8n 工作流运行器插件）            |
| Webhook URL | 工作流的生产环境 Webhook 地址                 |
| 认证方式        | 无、Basic Auth、JWT 或 Header，与触发节点设置一致 |

## 3. 创建网页聊天挂件机器人

1. 新建机器人，选择 **网页机器人** 适配器并绑定流水线。
2. 把嵌入代码放进你的网站，并把其中的 `localhost:5300` 换成 LangBot 的公网地址。

## 4. 绑定并测试

打开机器人，选择刚才创建的流水线，保存并确认机器人已启用。

打开嵌入了挂件的网页，发起对话。

## 常见问题排查

- 回复为空：**Respond to Webhook** 中的字段名必须与 LangBot 配置的输出键名一致。
- 测试地址只在 n8n 编辑器监听时可用，请使用已激活工作流的生产地址。
- 挂件加载不出来：嵌入代码仍指向 `localhost`，或 LangBot 地址没有使用 HTTPS。
- 在 WebUI 的 **监控** 页面可以看到每条消息、每次流水线运行和错误详情。

## 常见问题

### 接入网页聊天挂件需要有公网 IP 的服务器吗？

需要，或者直接使用 LangBot Cloud。访客的浏览器会直接连接 LangBot，因此 LangBot 需要可公网访问的 HTTPS 地址；LangBot Cloud 自带。

### 网页聊天挂件机器人支持流式回复吗？

请查看[平台功能对照表](https://langbot.app/docs/zh/insight/platform-features.md)了解该平台支持的能力；AI 后端生成完成后会一次性发送回复。

### 同一套 n8n 配置能同时用在其他平台吗？

可以。一条流水线可以绑定多个机器人，同一套配置能同时在多个平台上回复。

## 相关文档

- [网页聊天挂件完整接入文档](https://langbot.app/docs/zh/usage/platforms/webpage.md)
- [n8n 运行器完整文档](https://langbot.app/docs/zh/usage/pipelines/n8n.md)
- 网页聊天挂件上的其他 AI 后端：[Dify](https://langbot.app/docs/zh/recipes/dify/web-page.md) · [Coze](https://langbot.app/docs/zh/recipes/coze/web-page.md) · [Langflow](https://langbot.app/docs/zh/recipes/langflow/web-page.md) · [DeepSeek](https://langbot.app/docs/zh/recipes/deepseek/web-page.md) · [OpenAI (ChatGPT models)](https://langbot.app/docs/zh/recipes/openai/web-page.md)
- n8n 接入其他平台：[Telegram](https://langbot.app/docs/zh/recipes/n8n/telegram.md) · [Discord](https://langbot.app/docs/zh/recipes/n8n/discord.md) · [Slack](https://langbot.app/docs/zh/recipes/n8n/slack.md) · [飞书](https://langbot.app/docs/zh/recipes/n8n/lark.md) · [钉钉](https://langbot.app/docs/zh/recipes/n8n/dingtalk.md) · [企业微信应用](https://langbot.app/docs/zh/recipes/n8n/wecom.md)