Dograh嵌入Embed功能教程把语音AI聊天/通话组件嵌入你的网站【免费下载链接】dograhOpen source voice AI platform. Self-hosted alternative to Vapi and Retell. On Prem, BYOK across Speech to Speech or LLM/STT/TTS, with a visual workflow builder, MCP native and telephony support.项目地址: https://gitcode.com/GitHub_Trending/do/dograhDograh 是一个开源语音 AI 平台Vapi / Retell 的自托管替代方案它的Embed嵌入功能让你只需复制一段script代码就能把语音 AI 通话组件或聊天组件嵌入到你自己的网站中——访客无需登录你的后台即可直接开口说话或用文字与你的语音 AI 智能体互动。本教程面向新手完整讲解如何配置 Widget、三种嵌入模式的区别以及进阶的访客上下文传递技巧。 快速上手4 步生成嵌入代码整个流程都在 Dograh 控制台的Agent 设置 → Add to Website中完成不需要写后端代码。第 1 步打开你的 Agent 编辑器点击右上角齿轮图标进入设置。第 2 步向下滚动到Add to Website区域点击Configure Widget按钮。第 3 步在弹出的 Widget 配置对话框中开启Embedding在Allowed Domains中填入你网站的域名留空则允许所有域名测试时记得加上localhost选择Widget TypeVoice语音通话或Chat文字聊天选择Embed ModeFloating Widget/Inline Component/Headless按需定制按钮位置、颜色、文案点击Save Configurations。第 4 步复制自动生成的嵌入代码粘贴到你网页的head或body中即可上线。生成的代码本质上是一个异步加载dograh-widget.js的script标签其中js.src携带了你的embed token形如emb_...由 api/db/embed_token_client.py 用密码学安全随机数生成。服务端脚本本体见 ui/public/embed/dograh-widget.js配置对话框的前端实现在 ui/src/app/workflow/[workflowId]/components/EmbedDialog.tsx。️ 两种 Widget 类型语音通话 vs 文字聊天类型访客如何互动适用场景Voice通过 WebRTC 实时音频通话需要麦克风客服咨询、语音助手Chat在聊天面板中输入文字AI 以文字回复帮助中心、轻量问答聊天模式的一些行为值得注意访客点击聊天按钮时才开始对话Agent 会先打招呼一个聊天会话最长持续1 小时过期后出现 “Start new chat” 按钮刷新页面会开启新会话每次会话计入该 embed token 的使用次数并与语音通话一样记录在 Agent 的通话历史中可查看完整文字稿。 三种嵌入模式总有一种适合你的网站模式渲染效果适合场景Floating Widget页面角落的胶囊形按钮开箱即用不打扰原有布局Inline Component渲染到你指定的div容器内放在落地页 Hero 区、支持页 Tab 等固定位置Headless不渲染任何 UI只提供window.DograhWidgetJavaScript API完全自定义 UI 与设计系统① Floating Widget浮动按钮语音点击按钮开始通话按钮文案随生命周期自动变化“Connecting…” → “End Call” → “Retry”聊天点击按钮在角落打开聊天面板关闭面板不会结束会话主页面不需要写任何 JavaScript粘贴嵌入代码就是全部集成工作。② Inline Component内联组件在希望出现组件的位置放一个容器即可Widget 会自动挂载!-- 先粘贴 Dograh 嵌入代码再放这个容器 -- div iddograh-inline-container/div在 React 中则通过window.DograhWidget.initInline({ container })初始化React 挂载可能晚于脚本加载官方文档给出了轮询等待的完整示例。③ Headless无界面模式组件不提供任何 UI你自己画按钮、面板通过 JavaScript API 驱动 Agent核心方法包括语音start()/end()/onStatusChange()/onError()聊天startChat()/sendMessage(text)/onMessage()/onChatStateChange()。⚠️ 注意start()必须在真实用户手势如 click中调用否则浏览器会拒绝授权麦克风。 进阶给语音AI传递访客上下文你的页面通常已经知道访客信息——姓名、套餐、购物车金额。通过data-dograh-context属性生成代码里已预置page_url和today两个字段把任何页面数据传给 Agent即可在任意节点提示词中用模板变量引用Greet {{initial_context.customer_name | there}} and mention their {{initial_context.plan}} plan.页面加载后才获得的信息SPA 中登录、切换路由等调用以下方法即可后续会话自动合并window.DograhWidget.setContext({ customer_name: user.firstName, plan: user.plan });安全提醒上下文来自访客浏览器可被读取和篡改。切勿传递密钥也不要用它作为权限判断的依据需要可信数据时传一个customer_id让 Agent 通过 Pre-Call Data Fetch 从你的 API 拉取真实详情。✅ 上线前检查清单HTTPS 要求语音 Widget 的页面必须用 HTTPS 或localhost服务否则浏览器拒绝麦克风权限Allowed Domains若设置了域名白名单测试环境如localhost也要加进去否则请求会被 403 拒绝回调时机Widget 脚本是异步加载的注册on*回调要等window.DograhWidget可用后再执行Token 管理每个 Workflow 只能有一个激活的 embed token支持设置使用次数上限和过期时间默认 30 天相关端点见 api/routes/workflow_embed.py公开接口安全嵌入组件走的是免登录的公开接口/public/embed内置 Origin 域名校验与 CORS 控制实现见 api/routes/public_embed.py 和 api/routes/public_embed_chat.py。 参考资料资料路径官方嵌入文档含 React / Vanilla JS 完整示例docs/voice-agent/add-to-website.mdxWidget 嵌入配置界面源码ui/src/app/workflow/[workflowId]/components/EmbedDialog.tsx嵌入 Token 与使用量管理api/db/embed_token_client.py通话记录查看docs/images/conversation-history.png 所在文档照着上面的步骤十分钟以内你就能把 Dograh 语音 AI 聊天/通话组件嵌入到任何网站。更多节点级配置提示词、工具、知识库可参考 docs/voice-agent/ 下的官方文档。【免费下载链接】dograhOpen source voice AI platform. Self-hosted alternative to Vapi and Retell. On Prem, BYOK across Speech to Speech or LLM/STT/TTS, with a visual workflow builder, MCP native and telephony support.项目地址: https://gitcode.com/GitHub_Trending/do/dograh创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Dograh嵌入（Embed）功能教程：把语音AI聊天/通话组件嵌入你的网站
Dograh嵌入Embed功能教程把语音AI聊天/通话组件嵌入你的网站【免费下载链接】dograhOpen source voice AI platform. Self-hosted alternative to Vapi and Retell. On Prem, BYOK across Speech to Speech or LLM/STT/TTS, with a visual workflow builder, MCP native and telephony support.项目地址: https://gitcode.com/GitHub_Trending/do/dograhDograh 是一个开源语音 AI 平台Vapi / Retell 的自托管替代方案它的Embed嵌入功能让你只需复制一段script代码就能把语音 AI 通话组件或聊天组件嵌入到你自己的网站中——访客无需登录你的后台即可直接开口说话或用文字与你的语音 AI 智能体互动。本教程面向新手完整讲解如何配置 Widget、三种嵌入模式的区别以及进阶的访客上下文传递技巧。 快速上手4 步生成嵌入代码整个流程都在 Dograh 控制台的Agent 设置 → Add to Website中完成不需要写后端代码。第 1 步打开你的 Agent 编辑器点击右上角齿轮图标进入设置。第 2 步向下滚动到Add to Website区域点击Configure Widget按钮。第 3 步在弹出的 Widget 配置对话框中开启Embedding在Allowed Domains中填入你网站的域名留空则允许所有域名测试时记得加上localhost选择Widget TypeVoice语音通话或Chat文字聊天选择Embed ModeFloating Widget/Inline Component/Headless按需定制按钮位置、颜色、文案点击Save Configurations。第 4 步复制自动生成的嵌入代码粘贴到你网页的head或body中即可上线。生成的代码本质上是一个异步加载dograh-widget.js的script标签其中js.src携带了你的embed token形如emb_...由 api/db/embed_token_client.py 用密码学安全随机数生成。服务端脚本本体见 ui/public/embed/dograh-widget.js配置对话框的前端实现在 ui/src/app/workflow/[workflowId]/components/EmbedDialog.tsx。️ 两种 Widget 类型语音通话 vs 文字聊天类型访客如何互动适用场景Voice通过 WebRTC 实时音频通话需要麦克风客服咨询、语音助手Chat在聊天面板中输入文字AI 以文字回复帮助中心、轻量问答聊天模式的一些行为值得注意访客点击聊天按钮时才开始对话Agent 会先打招呼一个聊天会话最长持续1 小时过期后出现 “Start new chat” 按钮刷新页面会开启新会话每次会话计入该 embed token 的使用次数并与语音通话一样记录在 Agent 的通话历史中可查看完整文字稿。 三种嵌入模式总有一种适合你的网站模式渲染效果适合场景Floating Widget页面角落的胶囊形按钮开箱即用不打扰原有布局Inline Component渲染到你指定的div容器内放在落地页 Hero 区、支持页 Tab 等固定位置Headless不渲染任何 UI只提供window.DograhWidgetJavaScript API完全自定义 UI 与设计系统① Floating Widget浮动按钮语音点击按钮开始通话按钮文案随生命周期自动变化“Connecting…” → “End Call” → “Retry”聊天点击按钮在角落打开聊天面板关闭面板不会结束会话主页面不需要写任何 JavaScript粘贴嵌入代码就是全部集成工作。② Inline Component内联组件在希望出现组件的位置放一个容器即可Widget 会自动挂载!-- 先粘贴 Dograh 嵌入代码再放这个容器 -- div iddograh-inline-container/div在 React 中则通过window.DograhWidget.initInline({ container })初始化React 挂载可能晚于脚本加载官方文档给出了轮询等待的完整示例。③ Headless无界面模式组件不提供任何 UI你自己画按钮、面板通过 JavaScript API 驱动 Agent核心方法包括语音start()/end()/onStatusChange()/onError()聊天startChat()/sendMessage(text)/onMessage()/onChatStateChange()。⚠️ 注意start()必须在真实用户手势如 click中调用否则浏览器会拒绝授权麦克风。 进阶给语音AI传递访客上下文你的页面通常已经知道访客信息——姓名、套餐、购物车金额。通过data-dograh-context属性生成代码里已预置page_url和today两个字段把任何页面数据传给 Agent即可在任意节点提示词中用模板变量引用Greet {{initial_context.customer_name | there}} and mention their {{initial_context.plan}} plan.页面加载后才获得的信息SPA 中登录、切换路由等调用以下方法即可后续会话自动合并window.DograhWidget.setContext({ customer_name: user.firstName, plan: user.plan });安全提醒上下文来自访客浏览器可被读取和篡改。切勿传递密钥也不要用它作为权限判断的依据需要可信数据时传一个customer_id让 Agent 通过 Pre-Call Data Fetch 从你的 API 拉取真实详情。✅ 上线前检查清单HTTPS 要求语音 Widget 的页面必须用 HTTPS 或localhost服务否则浏览器拒绝麦克风权限Allowed Domains若设置了域名白名单测试环境如localhost也要加进去否则请求会被 403 拒绝回调时机Widget 脚本是异步加载的注册on*回调要等window.DograhWidget可用后再执行Token 管理每个 Workflow 只能有一个激活的 embed token支持设置使用次数上限和过期时间默认 30 天相关端点见 api/routes/workflow_embed.py公开接口安全嵌入组件走的是免登录的公开接口/public/embed内置 Origin 域名校验与 CORS 控制实现见 api/routes/public_embed.py 和 api/routes/public_embed_chat.py。 参考资料资料路径官方嵌入文档含 React / Vanilla JS 完整示例docs/voice-agent/add-to-website.mdxWidget 嵌入配置界面源码ui/src/app/workflow/[workflowId]/components/EmbedDialog.tsx嵌入 Token 与使用量管理api/db/embed_token_client.py通话记录查看docs/images/conversation-history.png 所在文档照着上面的步骤十分钟以内你就能把 Dograh 语音 AI 聊天/通话组件嵌入到任何网站。更多节点级配置提示词、工具、知识库可参考 docs/voice-agent/ 下的官方文档。【免费下载链接】dograhOpen source voice AI platform. Self-hosted alternative to Vapi and Retell. On Prem, BYOK across Speech to Speech or LLM/STT/TTS, with a visual workflow builder, MCP native and telephony support.项目地址: https://gitcode.com/GitHub_Trending/do/dograh创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考