接入代码

基础用法

<script
  src="https://widget.webnav.ai/widget/chat-widget.js"
  data-base-url="https://yoursite.com"
></script>

前置条件：配置 AI 模型

客服气泡只有在账号完成 AI 模型配置后才会显示。请先到 控制台 → 模型配置，选择供应商（OpenAI 兼容 / Anthropic Claude / Google Gemini）并保存你自己的 API Key。未通过模型连通性验证前，widget 在你的网站上保持隐藏。

完整示例

<script
  src="https://widget.webnav.ai/widget/chat-widget.js"
  data-server="https://widget.webnav.ai"
  data-base-url="https://yoursite.com"
  data-theme="dark"
  data-lang="zh"
  data-logo="https://yoursite.com/logo.png"
  data-exclude="/admin/*,/login"
></script>

本地开发

本地开发时指向本地后端：

<script
  src="http://localhost:8000/widget/chat-widget.js"
  data-server="http://localhost:8000"
  data-base-url="http://localhost:8000"
  data-theme="dark"
></script>

多域名抓取

让 AI 同时学习多个网站的内容：

<script
  src="https://widget.webnav.ai/widget/chat-widget.js"
  data-base-url="https://yoursite.com,https://blog.yoursite.com,https://docs.yoursite.com"
  data-theme="dark"
></script>

第一个 URL 的域名为主域名（缓存目录名），每个域名还会自动发现 docs. 子域名。

注意事项

• 代码放在 </body> 前
• Widget 使用 Shadow DOM，不会影响你的页面样式
• 首次加载会自动爬取网站内容（1-2 分钟），之后从缓存读取
• 对话历史存储在用户浏览器的 IndexedDB 中