跳转到文档内容
进入工作台
文档目录网站组件接入

网站组件接入

将助手接入网站,配置浮动聊天、侧边面板、搜索框或网站自定义按钮入口。

本页目录

获取接入代码#

  1. 打开需要接入的 AI 助手。
  2. 进入聊天组件标签,复制该助手提供的嵌入代码。
  3. 将代码添加到网站页面的结束正文标签之前,或交给网站维护人员加入公共页面模板。
  4. 发布网站并打开页面,测试聊天入口、回答与人工交接。

使用工作台实际生成的代码,其中包含对应助手的标识和服务地址。网站有多个页面时,可放入共用模板,让组件在这些页面上加载。

选择脚本或嵌入框架#

方式 适用情况
脚本嵌入 在现有页面提供浮动气泡、侧边面板等入口
iframe 嵌入 在页面指定区域放置聊天界面

从聊天组件页面复制相应代码。使用 iframe 时,为它设置合适的宽度和高度。

设置入口形式#

浮动气泡

默认显示在右下角,距离侧边和底部各 20 像素。点击后打开聊天窗口。

侧边面板

从左侧或右侧打开面板,适合在保留网页内容的同时进行咨询。

搜索框型

在网站中显示提问入口,打开以问答为中心的面板。该模式由随心问和极光风格支持。

可设置搜索提示文字与宽度。启用快捷键后,可使用 ⌘K 或 Ctrl+K 打开;按 Esc 或点击面板外部关闭。快捷键与网站已有操作冲突时可关闭。

按钮代码型

隐藏默认启动按钮,使用网站自己的按钮或链接唤醒聊天。将接入代码及按钮需求交给网站维护人员连接,无需改变网站按钮的外观。

隐藏默认启动按钮时,其未读数量和主动问候也不会显示。

调整窗口与间距#

在聊天自定义的位置设置中配置窗口。工作台默认值应用于网站;网页接入代码中的单页设置优先。

设置 默认值或范围
侧边 右侧,也可选择左侧
底部间距 20 像素
侧边间距 20 像素
聊天窗口宽度 默认 400 像素,范围 280—800 像素
聊天窗口高度 默认 560 像素,范围 400—900 像素
侧边面板宽度 默认 420 像素,范围 320—640 像素
搜索框提示 最多 80 个字符
搜索框宽度 默认 320 像素

手机上聊天面板使用全屏显示;关闭后的启动按钮仍按设置定位。

品牌、欢迎内容与接待行为#

在聊天自定义设置名称、头像、界面风格、配色和字体,以及主动问候、欢迎语和快捷操作。

可分别选择是否显示引用来源、在开聊前收集邮箱、显示 AI 提醒及允许新建会话。具体说明见助手行为与品牌外观。

在线提示会结合 AI 或纯人工接待模式,以及组织营业时间显示。

客户身份与历史#

组件可以保留会话历史,让客户继续此前的交流。启用邮箱收集或对话中线索收集后,可以通过邮箱关联客户资料。

需要与网站已有登录身份关联时,由网站维护人员对接身份验证。完成身份关联后,对话与附带资料可以跟随该身份继续使用;它不会自动合并客户在不同社交平台上的账号。

网站维护人员应使用工作台提供的接入参数和服务地址。

聊天中的内容与人工接待#

聊天支持实时消息、回复等待提示、基础消息排版、表情和附件。转人工后,团队可以在收件箱阅读已有记录并继续回复。

允许的文件与大小见聊天文件与图片,团队操作见统一收件箱。

接入后的检查#

  • 在电脑和手机上打开网站,检查入口和窗口位置。
  • 检查是否被页面浮层、底部工具栏或其他内容遮挡。
  • 发送问题,核对助手与知识来源。
  • 测试回访历史、附件和人工接管。
  • 使用自定义按钮时,检查按钮是否正常打开聊天。
  • 使用搜索框时,检查界面风格和快捷键。

常见接入问题#

情况 检查内容
没有聊天入口 代码是否加载、助手标识是否正确、是否开启隐藏启动按钮
仅部分域名无法使用 检查助手的允许域名设置
组件被遮挡 请网站维护人员检查页面层级与其他浮层
历史没有保留 检查浏览器存储、隐私限制及使用的客户身份
搜索框未按预期显示 检查所选入口模式与界面风格
消息没有返回 检查助手在线状态与连接,再在工作台预览中测试

网站与助手的对应关系见聊天组件与应用管理。