-
Notifications
You must be signed in to change notification settings - Fork 1.6k
zh usage platforms webpage
langbot-wiki-sync[bot] edited this page Jul 29, 2026
·
1 revision
通过一行脚本标签将 LangBot 聊天组件嵌入到任何网站。
打开 LangBot WebUI,进入机器人 > 创建机器人,填写机器人名称,平台/适配器选择 页面机器人。

| 配置项 | 说明 |
|---|---|
| 组件标题 | 显示在聊天组件顶部的标题,默认为 LangBot |
| 气泡图标 | 浮动聊天气泡上显示的图标 |
| 组件语言 | 聊天组件的显示语言,支持简体中文、English 等 |
| Turnstile 站点密钥 | Cloudflare Turnstile 站点密钥,用于防止机器人滥用。留空则不启用 |
| Turnstile 服务端密钥 | Cloudflare Turnstile 服务端密钥,与站点密钥一起在 Cloudflare 控制台中获取。设置了站点密钥时必填 |
创建并保存后,在机器人配置页面的嵌入代码区域会自动生成一段 <script> 标签。

复制此代码并粘贴到你的网站 HTML 中(通常放在 </body> 前),保存后页面右下角将出现聊天气泡,访客即可与机器人对话。
<script data-title="LangBot" src="http://localhost:5300/api/v1/embed/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></script>Warning
嵌入代码中的 URL 默认为 localhost,如果你的 LangBot 部署在服务器上,请将 localhost:5300 替换为你的实际访问地址。
如果担心接口被滥用,可以在 Cloudflare 控制台中开启 Turnstile:
- 前往 Cloudflare Turnstile > 添加站点
- 获取站点密钥和服务端密钥
- 分别填入 LangBot 页面机器人的对应配置项
- 保存即可生效
如果你想在接入自己网站前先体验一下嵌入组件的效果,LangBot 主仓的
examples/web-page-bot/
提供了一个自包含的单文件演示页 index.html:在浏览器中打开它,填上你的 LangBot
地址和页面机器人 UUID,它就会加载真实的嵌入组件,让你像网站访客一样和机器人对话,
并实时生成可直接粘贴到自己网站的 <script> 代码片段。
# 在 LangBot 仓库根目录起一个静态服务,然后在浏览器中打开
python3 -m http.server 8930
# 访问 http://localhost:8930/examples/web-page-bot/嵌入代码添加到网站后,访客点击页面右下角的聊天气泡即可与机器人进行对话。
Automatically synchronized from langbot-app/langbot-wiki.
简体中文
指南
开发者
- 插件开发
- 插件 SDK API
- 核心开发
文章
- 浏览
- 产品动态
- 技术解析
- 教程与集成
- 公告
API 参考
- Service API
English
Guides
Developers
-
Plugin Development
- Plugin Development Tutorial
- Completing Plugin Configuration Information
- Plugin Directory Structure
- Component Development
- Code Style Guide
- Migration Guide
- Publish Plugin
- Plugin SDK API
- Core Development
Articles
- Browse
- Product Updates
- Engineering
-
Tutorials & Integrations
- LangTARS: Open-Source AI Agent for Remote PC Control — Works with Dify, n8n & 10+ Messaging Platforms
- How to Connect DeepSeek R1 to WeChat, Discord & Telegram in 5 Minutes (FREE)
- Deploy Your Own AI Bot to Discord, Telegram & WeChat in 5 Minutes
- Finally Got My Dify Agent Working in Discord, Telegram and Slack
- How I Built a Multi-Platform AI Bot with Langflow's Drag-and-Drop Workflows
- How I Built a Multi-Platform AI Chatbot with n8n and LangBot
- LangBot 4.6.0 External Knowledge Base Tutorial: Integrating Dify with LangBot for RAG-powered Conversations
- Announcements
API Reference
- Service API
Other pages
日本語
ガイド
開発者
- プラグイン開発
- プラグイン SDK API
- コア開発
記事
- 一覧
- 製品アップデート
- エンジニアリング
-
チュートリアルと連携
- LangTARS:Dify・n8n と連携するオープンソース PC 操作 Agent
- DeepSeek R1 を WeChat・Discord・Telegram に5分で接続する方法
- AI Bot を Discord・Telegram・WeChat に5分でデプロイ
- Dify Agent を Discord・Telegram・Slack で動かす
- Langflow のドラッグ&ドロップでマルチプラットフォーム AI Bot を構築
- n8n と LangBot でマルチプラットフォーム AI Chatbot を構築
- LangBot 4.6.0 外部ナレッジベース入門:Dify と連携した RAG 会話
- お知らせ
API リファレンス
- Service API