安装指南
为网站添加 AI 客服聊天窗口
本指南适用于能够修改网站代码，或通过建站工具添加脚本的商家。完成安装后，需要验证会话连接和回答内容，仅看到聊天按钮还不够。
Ouviro · 发布于
1. 准备网站与账号
准备好网站公共布局或自定义代码设置的编辑权限、注册邮箱，以及一份可用于测试的现行客服政策。在 app.ouviro.com 注册并完成邮箱验证，再按引导创建店铺。
渠道和知识库配置需要店主或管理员账号。为现有资料无法回答的问题保留人工客服入口。
2. 配置网站渠道
进入「渠道」，使用建店时创建的网站渠道，或为目标网站新建渠道。核对网站地址、显示名称、语言和外观，然后复制该渠道的安装代码。
websiteToken 用于标识渠道，会出现在网页源码中。它不是私密 API 凭证，也不代表读取客户订单的权限。
3. 加载 SDK 并启动组件
把代码添加到网站的公共布局中，只安装一次。如果使用 window.aiSupportSettings 配置可选设置，请在加载脚本之前定义。SDK 异步加载；只有加载完成后才能调用 window.aiSupportSDK.run。
下方是带有示例渠道令牌的安装示例。请替换为自己渠道提供的代码，再发布网站修改。
<script>
(function (d) {
var g = d.createElement("script");
g.src = "https://app.ouviro.com/sdk.js";
g.async = true;
g.onload = function () {
window.aiSupportSDK.run({
websiteToken: "YOUR_WEBSITE_TOKEN",
baseUrl: "https://app.ouviro.com"
});
};
d.head.appendChild(g);
})(document);
</script>4. 在 CSP 中允许必要连接
如果网站配置了 Content Security Policy，请将下列来源权限合并到现有策略中。聊天面板会另行加载脚本，因此需要允许整个脚本来源。内联启动代码还需按网站现有规则获得 nonce 或 hash 授权；仅添加这些来源不会自动允许内联代码。
当前组件会向 Shadow DOM 插入内联样式，因此还需要下面的样式权限。启动脚本的 nonce 或 hash 不会授权这些样式。请保留原策略中的其他来源。如果你的网站安全策略不允许这些内联样式（例如只允许带 nonce 的样式），当前组件尚不兼容；安装前应先核对这一限制。
只有在已审核并允许内联样式时，才合并该样式权限。现有的 style-src-elem 指令或样式 nonce/hash 限制仍可能阻止组件，复制这三行不会覆盖这些限制。
script-src https://app.ouviro.com;
connect-src https://app.ouviro.com wss://app.ouviro.com;
style-src 'unsafe-inline';5. 打开窗口并检查连接
重新加载已发布的页面，点击聊天按钮。在浏览器开发者工具中确认 sdk.js 和聊天分包加载成功、/widget/ 请求成功，并已连接 wss://app.ouviro.com/ws/。
按钮出现不代表会话已经能够连接。也请在较窄的手机视口下检查一次。
6. 验证第一条有用的回答
在「知识库」中添加一份简短、现行的政策，等待索引和发布完成。提出一个可以据此核对答案的问题，确认回答正确，并检查客服收件箱中是否出现该会话。
再问一个资料未覆盖的问题，并尝试人工客服按钮。邀请客户使用前，确认实际转人工流程和座席在线状态。
7. 排查加载失败与重复安装
如果启动按钮显示「重试」，先检查被拦截的脚本请求、CSP 报错和网络故障，再重试。如果面板能打开但无法连接，分别检查 HTTP 与 WebSocket 请求。
网站模板中只保留一处安装代码，移除标签管理器或主题中的重复插入。单页应用在移除或替换集成时调用 window.aiSupportSDK.destroy()，然后用目标配置重新 run。重复调用 run 不会更新已经运行的组件。