# Connect Dify to a website chat widget

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

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

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

Dify builds chat assistants, Chatflows, Agents and Workflows. LangBot calls the published app through its Service API, so prompts, tools and knowledge stay in Dify.

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

1. Build and **publish** a Chat Assistant (including Chatflow), Agent or Workflow app in Dify.
2. Open the app's **Access API** page and create an API key.
3. For a Workflow app, output the answer under the key `summary`.

## 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   | **Dify** (official Dify Agent runner plugin)                                          |
| Base URL | `https://api.dify.ai/v1` for Dify Cloud, or your own Dify address with `/v1` appended |
| API Key  | The key from the app's Access API page                                                |

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

- Self-hosted Dify in Docker on the same host: put both stacks on a shared Docker network and use the container address (for example `http://dify-nginx/v1`), not `localhost`.
- Chatflow apps only return what the Answer node outputs.
- 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 Dify 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 Dify runner guide](https://langbot.app/docs/en/usage/pipelines/dify.md)
- Other AI back ends on a website chat widget: [n8n](https://langbot.app/docs/en/recipes/n8n/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)
- Dify on other platforms: [Telegram](https://langbot.app/docs/en/recipes/dify/telegram.md) · [Discord](https://langbot.app/docs/en/recipes/dify/discord.md) · [Slack](https://langbot.app/docs/en/recipes/dify/slack.md) · [Lark (Feishu)](https://langbot.app/docs/en/recipes/dify/lark.md) · [DingTalk](https://langbot.app/docs/en/recipes/dify/dingtalk.md) · [WeCom (internal app)](https://langbot.app/docs/en/recipes/dify/wecom.md)