How to Add a WebChat Widget with OpenClaw

Prerequisites

• ✓An existing OpenClaw Gateway deployment that can already connect to chat channels.
• ✓Access to modify your web app or site where you plan to embed the WebChat UI.
• ✓At least one configured OpenClaw agent so WebChat conversations have somewhere to route.

Steps

1. 1

   Understand how WebChat fits into OpenClaw channels

   WebChat is one of the supported chat channels in OpenClaw, alongside Slack, Telegram, WhatsApp, and others. It connects to the Gateway over WebSocket so your browser UI talks to the same routing layer as every other channel.

   Treat WebChat as another channel entry in your mental model so you can configure routing and groups consistently with the rest of your stack.

2. 2

   Review supported channels to plan your WebChat rollout

   Before you wire WebChat into your app, decide how it should coexist with other channels like Telegram or WhatsApp. OpenClaw can run multiple channels at once and route messages per chat, so you can add WebChat without disrupting existing bots.

   Use this step to confirm that WebChat is the right choice for browser-based access while other channels cover mobile or enterprise chat.

   textCopy

   *   [BlueBubbles](https://docs.openclaw.ai/channels/bluebubbles) — **Recommended for iMessage**; uses the BlueBubbles macOS server REST API with full feature support (bundled plugin; edit, unsend, effects, reactions, group management — edit currently broken on macOS 26 Tahoe).
   *   [Discord](https://docs.openclaw.ai/channels/discord) — Discord Bot API + Gateway; supports servers, channels, and DMs.
   *   [Feishu](https://docs.openclaw.ai/channels/feishu) — Feishu/Lark bot via WebSocket (bundled plugin).
   *   [Google Chat](https://docs.openclaw.ai/channels/googlechat) — Google Chat API app via HTTP webhook.
   *   [iMessage (legacy)](https://docs.openclaw.ai/channels/imessage) — Legacy macOS integration via imsg CLI (deprecated, use BlueBubbles for new setups).
   *   [IRC](https://docs.openclaw.ai/channels/irc) — Classic IRC servers; channels + DMs with pairing/allowlist controls.
   *   [LINE](https://docs.openclaw.ai/channels/line) — LINE Messaging API bot (bundled plugin).
   *   [Matrix](https://docs.openclaw.ai/channels/matrix) — Matrix protocol (bundled plugin).
   *   [Mattermost](https://docs.openclaw.ai/channels/mattermost) — Bot API + WebSocket; channels, groups, DMs (bundled plugin).
   *   [Microsoft Teams](https://docs.openclaw.ai/channels/msteams) — Bot Framework; enterprise support (bundled plugin).
   *   [Nextcloud Talk](https://docs.openclaw.ai/channels/nextcloud-talk) — Self-hosted chat via Nextcloud Talk (bundled plugin).
   *   [Nostr](https://docs.openclaw.ai/channels/nostr) — Decentralized DMs via NIP-04 (bundled plugin).
   *   [QQ Bot](https://docs.openclaw.ai/channels/qqbot) — QQ Bot API; private chat, group chat, and rich media (bundled plugin).
   *   [Signal](https://docs.openclaw.ai/channels/signal) — signal-cli; privacy-focused.
   *   [Slack](https://docs.openclaw.ai/channels/slack) — Bolt SDK; workspace apps.
   *   [Synology Chat](https://docs.openclaw.ai/channels/synology-chat) — Synology NAS Chat via outgoing+incoming webhooks (bundled plugin).
   *   [Telegram](https://docs.openclaw.ai/channels/telegram) — Bot API via grammY; supports groups.
   *   [Tlon](https://docs.openclaw.ai/channels/tlon) — Urbit-based messenger (bundled plugin).
   *   [Twitch](https://docs.openclaw.ai/channels/twitch) — Twitch chat via IRC connection (bundled plugin).
   *   [Voice Call](https://docs.openclaw.ai/plugins/voice-call) — Telephony via Plivo or Twilio (plugin, installed separately).
   *   [WebChat](https://docs.openclaw.ai/web/webchat) — Gateway WebChat UI over WebSocket.
   *   [WeChat](https://www.npmjs.com/package/@tencent-weixin/openclaw-weixin) — Tencent iLink Bot plugin via QR login; private chats only.
   *   [WhatsApp](https://docs.openclaw.ai/channels/whatsapp) — Most popular; uses Baileys and requires QR pairing.
   *   [Zalo](https://docs.openclaw.ai/channels/zalo) — Zalo Bot API; Vietnam’s popular messenger (bundled plugin).
   *   [Zalo Personal](https://docs.openclaw.ai/channels/zalouser) — Zalo personal account via QR login (bundled plugin).

3. 3

   Connect the WebChat UI to the Gateway over WebSocket

   WebChat talks to the OpenClaw Gateway using a WebSocket connection, so your browser widget streams messages in real time. When you embed the WebChat UI in your site, point it at the Gateway endpoint that exposes WebChat so it can join the same routing flow as other channels.

   This is where you wire your frontend to the backend that already knows about agents, groups, and security.

   textCopy

   *   [WebChat](https://docs.openclaw.ai/web/webchat) — Gateway WebChat UI over WebSocket.

4. 4

   Run WebChat alongside other channels

   Once WebChat is wired to the Gateway, you can run it at the same time as Telegram, Slack, WhatsApp, and others. OpenClaw routes per chat, so each WebChat conversation stays isolated while still sharing the same agents and tools.

   Use this to offer a browser-based entry point without changing your existing channel configs.

   textCopy

   *   Channels can run simultaneously; configure multiple and OpenClaw will route per chat.

5. 5

   Apply channel configuration concepts to WebChat

   WebChat follows the same configuration concepts as other channels: pairing, groups, broadcast groups, and routing. When you configure WebChat, reuse the same patterns you use for DM pairing and allowlists so browser users stay safe.

   This keeps your WebChat widget consistent with how you manage access and routing everywhere else.

   textCopy

   *   Group behavior varies by channel; see [Groups](https://docs.openclaw.ai/channels/groups).
   *   DM pairing and allowlists are enforced for safety; see [Security](https://docs.openclaw.ai/gateway/security).

Troubleshooting

*   [Groups](https://docs.openclaw.ai/channels/groups)
*   [Broadcast Groups](https://docs.openclaw.ai/channels/broadcast-groups)
*   [Channel Routing](https://docs.openclaw.ai/channels/channel-routing)

*   DM pairing and allowlists are enforced for safety; see [Security](https://docs.openclaw.ai/gateway/security).

Frequently asked questions