mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-06-23 05:54:22 +00:00
RockChinQ
8ad1203fd5
Move the Page Bot (web_page_bot) embed test page out of the repo root into examples/web-page-bot/ as a proper, LangBot-styled demo: a self-contained index.html that loads the live widget.js against a running instance, plus bilingual READMEs mirroring examples/http-bot/.
49 lines
2.2 KiB
Markdown
49 lines
2.2 KiB
Markdown
# Page Bot Adapter — Embed Demo
|
|
|
|
> English | [中文](./README.zh.md)
|
|
|
|
A single self-contained HTML page that demos the LangBot **Page Bot**
|
|
(`web_page_bot`) embeddable chat widget — the one you drop onto any website with
|
|
a single `<script>` tag.
|
|
|
|
Full guide: [docs.langbot.app — Page Bot](https://docs.langbot.app/en/usage/platforms/webpage).
|
|
|
|
## Files
|
|
|
|
| File | What it is |
|
|
|---|---|
|
|
| `index.html` | **Browser demo** — open it, point it at a running LangBot instance + a Page Bot you created, and it loads the live embed widget so you can chat with the bot exactly as a site visitor would. Zero deps, no build step. |
|
|
|
|
## How to use
|
|
|
|
1. In the LangBot WebUI, create a bot with the **Page Bot** (`页面机器人`)
|
|
adapter and bind it to a working pipeline. Copy its **bot UUID** from the
|
|
generated embed code.
|
|
2. Open `index.html` in a browser. Any of these work:
|
|
- double-click the file, or
|
|
- serve the folder: `python3 -m http.server 8930` then open
|
|
`http://localhost:8930/examples/web-page-bot/`.
|
|
3. Fill in:
|
|
- **LangBot base URL** — where your instance is reachable from the browser
|
|
(e.g. `http://localhost:5300`, or your public address).
|
|
- **Page Bot UUID** — from step 1.
|
|
- **Widget title** — optional, sets the `data-title` attribute.
|
|
4. Click **Load widget**. A floating chat bubble appears in the bottom-right
|
|
corner — click it and chat.
|
|
|
|
The page also renders the exact `<script>` snippet you'd paste into your own
|
|
site (before `</body>`), and updates it live as you edit the fields.
|
|
|
|
## What it demonstrates
|
|
|
|
- The embed contract: `<script data-title="…" src="<base>/api/v1/embed/<uuid>/widget.js"></script>`.
|
|
- `widget.js` is served by LangBot pre-configured for that bot UUID — title,
|
|
bubble icon, language and optional Cloudflare Turnstile protection all come
|
|
from the bot's config, no page changes needed.
|
|
- Messages travel over a WebSocket to the bot's bound pipeline; replies stream
|
|
back into the bubble.
|
|
|
|
> The widget loads `widget.js` from your LangBot instance, so the **base URL
|
|
> must be reachable from the browser** you open this page in. If LangBot runs on
|
|
> a server, use its public address instead of `localhost`.
|