# Connect Langflow to a website chat widget

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

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

This recipe puts your Langflow 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.

Langflow builds agents and flows with a drag-and-drop editor. LangBot runs a flow through the Langflow API 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 Langflow 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 Langflow

1. Build a flow in Langflow (the Simple Agent template is a good start).
2. Create an API key under **Settings**.
3. Copy the **Flow ID** from **Share → API access**.

## 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   | **Langflow** (official Langflow Agent runner plugin) |
| Base URL | Your Langflow address, reachable from LangBot        |
| API Key  | The Langflow API key                                 |
| Flow ID  | The flow to run                                      |

## 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

- Connection refused: `http://localhost:7860` only works when Langflow runs on the same host and network namespace as LangBot.
- 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 Langflow 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 Langflow runner guide](https://langbot.app/docs/en/usage/pipelines/langflow.md)
- Other AI back ends on a website chat widget: [Dify](https://langbot.app/docs/en/recipes/dify/web-page.md) · [n8n](https://langbot.app/docs/en/recipes/n8n/web-page.md) · [Coze](https://langbot.app/docs/en/recipes/coze/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)
- Langflow on other platforms: [Telegram](https://langbot.app/docs/en/recipes/langflow/telegram.md) · [Discord](https://langbot.app/docs/en/recipes/langflow/discord.md) · [Slack](https://langbot.app/docs/en/recipes/langflow/slack.md) · [Lark (Feishu)](https://langbot.app/docs/en/recipes/langflow/lark.md) · [DingTalk](https://langbot.app/docs/en/recipes/langflow/dingtalk.md) · [WeCom (internal app)](https://langbot.app/docs/en/recipes/langflow/wecom.md)