Your AI Connector Docs

聊天小部件

网站聊天小部件集成指南

在您的网站上添加一个用户友好的聊天小部件，使访客能够直接通过您网站的界面进行沟通。集成过程非常简单，并将为您的网站提供内置的消息传递功能。

创建和配置聊天小部件

如何操作：

  1. 点击左侧边栏底部的 Settings（设置）。（在手机上，请先点击角落的菜单图标 ☰ 以打开侧边栏。）
  2. 在“设置”左侧导航栏中，点击 Channels（渠道）下的 Channels（渠道）。
  3. 找到 Website chat widget（网站聊天小部件）卡片。
  4. 如果您还没有小部件，请点击 Connect（连接）以创建一个带有显示名称和欢迎消息的小部件。
  5. 创建完成后，您可以随时点击 Manage（管理）打开完整的配置面板。

您保存的更改会自动应用到您的实时小部件中 — 进行更改后无需重新粘贴安装代码。

设置旁边即是实时预览：一个展示您实际小组件的网页示例，它会显示您的颜色、位置、徽标、启动图标和主动弹窗，效果与访客看到的一模一样。它会跟随您的编辑实时更新，因此您无需保存即可查看颜色或主题更改后的效果。您甚至可以点击预览中的聊天按钮来打开小组件并进行试用。

您可以自定义的内容

“管理”面板分为四个部分。

外观

  • 样式主题： 一键重新设计整个小部件。六种主题分别统一设置外观、颜色、圆角和字体：Classic（原始的纯色外观——扁平面板上的彩色标题栏）、Glass（磨砂半透明面板，可柔和地模糊其后的页面，标题和消息框作为圆角卡片悬浮其中）、Midnight（深色系的 Glass）、Bloom（柔和粉色，超圆角）、Ember（暖橙色 Glass）以及 Mono（黑白配色，锐利直角）。主题只是一个起点——选择主题后，您仍然可以单独更改任何颜色或设置。
  • 圆角和字体： 两个独立的样式调节选项。圆角设置面板、气泡和按钮的圆润程度（圆角、柔和或直角），Font（字体）选择访客看到的字体（默认、衬线体、圆体或等宽体）——字体均来自访客设备上已有的字体，因此不会在您的网站上加载额外资源。
  • 显示名称： 显示在小部件标题中。
  • Logo： 上传一张出现在聊天窗口顶部的图片。可以使用您的公司 Logo 或亲切的头像。
  • 启动图标： 悬浮聊天按钮本身的图标。选择内置图标之一（聊天气泡、纸飞机、问号等），重复使用您上传的 Logo，或者上传一张您自己的独立图片——如果您想用真实团队成员的照片来问候访客，这非常方便。
  • 颜色： 五种颜色，每种颜色对应小部件的不同部分。品牌色用于悬浮按钮、标题和访客自己的消息，品牌文字颜色用于其上的文字。机器人气泡颜色用于机器人回复和输入指示器的背景，机器人气泡文字颜色用于其中的文字和动态输入点。聊天窗口颜色用于所有消息背后的面板。请选择一种与您的品牌色明显不同的机器人气泡颜色——如果两者颜色相同，对话双方的颜色就会一样，访客将无法区分机器人和自己的回复。在品牌色旁边使用浅灰色机器人气泡配深色文字是一个稳妥的组合。
  • 位置： 将悬浮聊天按钮放置在右下角或左下角，如果它遮挡了页面上的其他内容，还可以设置水平和垂直偏移量（以像素为单位）。
  • 引导问题： 聊天中显示的快速回复建议（可点击的卡片），让访客无需打字，只需轻轻一点即可开始——例如“你们的价格是多少？”或“你们提供支持吗？”——最多可设置 10 个。

行为

  • 欢迎消息： 访客打开聊天窗口时看到的第一条消息（例如：“有什么我可以帮您的吗？”）。
  • 声音： 当聊天中收到新消息时播放提示音。
  • 请求通知权限： 可选地提示访客允许浏览器通知，这样即使他们切换了标签页，也能收到回复提醒。
  • 主动弹窗气泡： 一个可选的小气泡，会在聊天按钮旁边弹出以邀请访客。开启此功能可设置其消息内容、接受/拒绝按钮的文本，以及等待多少秒后显示。如果无人点击，气泡会在 20 秒后自动隐藏（该时长固定），一旦访客点击了暂不，在本次访问期间它将不再显示。聊天窗口本身不会自动打开：它只会在访客点击聊天按钮或气泡时打开，并保持开启直到访客将其关闭。
  • AI 响应速度： 一个滑动条，可在较慢（更像人类——AI 回复前会稍作停顿）和最快（更像机器人——以最快速度回复）之间调节。平衡模式位于中间。

语言

该小部件本身支持多语言，无需进行任何设置。

  • 自动识别访客语言。 它首先会查看您页面 HTML 中声明的语言（<html lang="it">），如果未找到，则回退到访客的浏览器语言。如果两者都不是我们支持的语言，则显示英语。
  • 或者您可以自行选择。 “行为”部分中的小部件语言字段默认设置为“自动”，即上述的检测方式。在此处选择一种语言，小部件自身的标签（访客表单中的“名字”、“电子邮件”和“电话”字段及其示例文字、隐私声明、按钮）将始终保持该语言，无论页面或浏览器设置如何。当您的网站构建器未声明正确的语言，或者您希望所有访客都使用同一种固定语言时，请使用此选项。
  • 支持的语言： 英语、荷兰语、德语、法语、西班牙语、意大利语、葡萄牙语、罗马尼亚语、波兰语、阿拉伯语、芬兰语和菲律宾语。这是小部件自身按钮和标签支持的语言列表。
  • 您的消息会自动为您翻译。 每次保存时，您的欢迎消息、主动弹窗气泡和引导问题都会被翻译成上述所有十二种语言。您只需用您偏好的语言编写一次即可。
  • 每条消息仅使用一种语言编写。 如果您在同一个字段中放入两种语言（例如一行英语和一行意大利语），整段内容会被视为一条消息并按原样翻译，导致意大利访客最终看到两次相同的句子。请用您偏好的语言编写一次即可。
  • AI 会以访客的语言进行回复。 无论访客输入什么语言，您的智能体都会以相同的语言回答，无论小部件标签显示的是哪种语言。如果您希望它始终以某种固定语言回答，请在智能体的指令中进行说明。

提示： 如果您的网站未在 <html> 标签上设置 lang 属性，请添加一个。这是我们选择正确语言的最强信号，特别是对于在国外浏览的访客而言。

线索捕获与隐私

  • 收集访客信息： 默认关闭。开启后，访客在对话开始前需要提供姓名和电子邮件（可选电话），这样即使他们在聊天中途离开，您也能获取潜在客户信息。
  • 表单标题和表单副标题： 自定义表单上方显示的标题和简短说明。
  • 收集电话号码： 开启后会同时要求提供电话号码；关闭则仅收集姓名和电子邮件。

访客留下了电话号码并离开了您的网站——我可以在 WhatsApp 上继续对话吗？ 可以。打开他们的聊天记录，从三点菜单中选择 在 WhatsApp 上继续（需要连接 WhatsApp Web 或 WhatsApp Business）。Your AI Connector 会为同一个人创建一个关联的 WhatsApp 对话，复制他们的姓名、电子邮件和详细信息，AI 也会延续他们在您网站上所说的话，因此无需重复沟通。网站聊天记录会保留在原处，且两个聊天记录都会在联系人面板的 关联对话 下相互指向。请参阅 聊天界面。

AI 代理可以主动提议切换到 WhatsApp 吗？ 可以，而且不需要额外功能——只需在代理的指令中加入一行即可。为您的 WhatsApp 号码创建一个 短链接，并附带预填信息，例如“您好，我刚才在您的网站上聊天，想在这里继续”，然后告诉代理何时发送该链接，例如：“如果访客需要离开、想稍后继续或询问 WhatsApp，请提议在那里继续并发送此链接：（您的短链接）”。小组件中的链接可点击，因此访客会进入 WhatsApp，选中您的号码并预填好消息，他们的第一条消息就会在您的收件箱中开启一个 WhatsApp 对话。如果访客在小组件表单中留下了他们发送消息时使用的电话号码（含国家代码），Your AI Connector 会自动关联这两个对话，WhatsApp 上的 AI 也会像 在 WhatsApp 上继续 功能一样，直接获知网站上的聊天内容。如果没有收集到电话号码，这两个聊天记录将不会关联，因此请确保预填信息足够具体，以便 WhatsApp 代理知道此人来自何处。

  • 要求确认隐私政策： 可选要求访客在聊天前接受您的隐私政策，并设置其指向的 URL。

该小部件在访客的浏览器中存储了什么？我需要将其放在 Cookie 横幅之后吗？ 仅加载页面时不会存储任何内容。在访客选择聊天（发送第一条消息、填写访客信息表单或接受您的隐私政策）之前，该小部件不会写入任何 Cookie 或浏览器存储。从那一刻起，它会将随机的对话 ID 和对话副本保存在该浏览器中，作为您自己域名下的第一方存储，以便访客回来时聊天记录依然存在。它不会加载任何分析或跟踪脚本，也不会设置任何第三方 Cookie。由于在访客主动发起聊天之前不会写入任何内容，因此它属于访客所请求服务严格必需的存储，您可以直接加载它，无需将其放在同意横幅之后。如果您的网站无论如何都在使用同意工具，将其放在该工具之后也是可以的；访客接受后，聊天窗口就会显示出来。

渠道与嵌入

  • 附件按钮： 让访客可以在聊天中发送图片和文件。
  • 表情符号选择器： 在消息框旁边添加一个表情符号选择器。
  • 渠道链接： 可选包含 WhatsApp、Instagram 或 Messenger 链接，以便访客可以在他们偏好的平台上继续对话。此选项仅在您连接了 WhatsApp 号码、Instagram 或 Messenger 后才会显示。
  • 操作按钮： 聊天窗口顶部的一排快捷方式，可将访客引导至其他位置，而非进入对话——请参阅下方的 操作按钮。
  • 域名白名单： 限制允许嵌入您小部件的网站。添加您已安装该小部件的域名（例如 example.com 或 *.example.com）；留空则允许任何域名。
  • 将这些聊天路由至： 选择应处理来自您即将复制的代码的聊天的营销活动或坐席。保留为 账户默认值 以使用您的常规聊天小部件路由。请参阅下方的 将不同页面发送至不同营销活动。
  • 嵌入代码片段： 选择 浮动气泡 或 内嵌 并复制安装代码（见下文）。
  • 客户演示链接： 粘贴任何网站地址以获取一个可共享的链接，该链接会在打开该网站时在其上方运行您的小部件——对方无需安装任何内容。请参阅下方的 在他人网站上显示小部件。

在面板底部，删除聊天组件操作会立即从您的网站上移除该组件——此操作无法撤销，访客将不再看到聊天气泡。

操作按钮

有些访客不想聊天。他们想要您的电话号码、地址或电子邮件，并且希望一键获取。操作按钮就是聊天面板顶部的一排快捷方式，专门用于实现此目的。

最多可添加六个。每个按钮都有一个 标签（按钮上的文字）和一个 目标地址，目标地址取决于您选择的操作：

操作 访客获得的内容 您需要填写的内容
呼叫 打开他们的电话拨号器并准备好您的号码 您的电话号码，例如 +1 555 123 4567
短信 他们的消息应用打开一条发给您的新短信 您的电话号码
WhatsApp WhatsApp 打开与您的聊天窗口 您的 WhatsApp 号码，或您已有的 wa.me 链接
电子邮件 他们的邮件应用打开一封发给您的新邮件 您的电子邮件地址
路线指引 Google 地图打开并显示您的位置 您的地址，或您已有的地图链接
链接 在新标签页中打开页面 任何以 https:// 开头的完整网址

这些按钮不消耗额度。 点击按钮不会发送消息，也不会开始对话——它只是将访客带到他们要求去的地方。只有与您的 AI 坐席进行的实际对话才会消耗额度，与之前完全一样。

几点值得注意的事项：

  • 按钮在访客聊天时保持可见。 访客可以提出两个问题，之后无需重新加载页面即可点击 路线指引。
  • 您的标签将按您书写的原样显示。 与您的开场白和引导问题不同，按钮标签不会自动翻译。因此，如果您为多种语言的访客提供服务，请保持标签简短且直观（或使用您的主要语言书写）。
  • 必须正确填写按钮信息，否则无法保存。 如果电话号码、电子邮件地址或链接无效，面板会提示并阻止 保存更改，而不是发布一个在您的网站上无法使用的按钮。
  • 它们不是常见问题解答。 操作按钮只会将访客引导至其他地方；它们不会回复预设文本。回答问题是您 AI 坐席的工作，它会根据您的知识库进行回答。如果您想建议访客询问什么，请使用“外观”下的 引导问题。

无法自定义的内容

“管理”(Manage) 面板包含了所有的选项。具体来说：

  • 不支持自定义 CSS 或样式表。 样式由主题、角落、字体和颜色选择器提供——您无法将自己的 CSS 注入到小部件中，页面上的规则也无法影响其内部。
  • 消息框中不支持自定义占位符文本。
  • 不支持国家或地理位置限制。 域名白名单仅限制哪些网站可以嵌入该小部件；无法根据访客所在位置来显示或隐藏它。如果您有此需求，请在您不想显示该小部件的页面或针对特定受众自行隐藏嵌入代码片段。
  • 聊天中不支持嵌入视频。
  • 不支持自动隐藏计时器。 邀请气泡会在 20 秒后自动消失，该时长无法更改；打开的聊天窗口永远不会自动关闭。如果气泡遮挡了您的页面内容，请使用位置偏移量移动小部件，或者关闭气泡功能，仅保留启动按钮。

如果其中任何一点对你造成了阻碍，内联嵌入可以为你提供最大的控制权：小部件位于你页面上的一个容器中，其大小和位置均由你自行决定。

安装说明

要将聊天组件添加到您的网站，请在您网站的 HTML 中添加一行代码。

  1. 在文本编辑器中打开您网站的 HTML 文件。
  2. 找到结束的 </body> 标签——这通常位于文件的末尾。
  3. 将此行代码粘贴在 </body> 标签之前，以便页面的其余部分先加载：
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID"></script>
  1. 将 CONFIG_ID 替换为您唯一的配置标识符，该标识符显示在管理面板的渠道与嵌入部分。此标识符特定于您的账户，用于将组件连接到您的消息系统。

该代码片段不会拖慢您的网站速度：它是一个微小的加载器，且小组件本身会在后台下载，不会阻塞页面。如果您仍希望小组件在页面完全加载完成后再显示，可以将相同的 URL 包装成这样：

<script>
window.addEventListener('load', function () {
  var s = document.createElement('script');
  s.src = 'https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID';
  s.async = true;
  document.body.appendChild(s);
});
</script>

如果您想要延迟的是小提示气泡而非小组件的加载，请使用上述“行为”部分中的主动弹出气泡延迟设置——无需编写代码。

以下是实现聊天组件后您的 HTML 文件应呈现的完整示例：

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your existing website content would be here -->

    <!-- Chat Widget Integration -->
    <script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID"></script>
</body>
</html>

在页面中内嵌（高级）

如果您希望聊天作为页面的一部分显示（例如在专门的“联系我们”部分、帮助选项卡或侧边栏中），而不是作为角落里的浮动气泡，请在管理面板中将嵌入代码片段切换为内嵌，并复制内嵌代码片段。

它看起来像这样：

<div data-chat-widget="CONFIG_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

<div> 是挂载点——聊天面板会在其中渲染并填满其尺寸。你可以随意设置该 div 的样式（赋予固定高度、将其放入 flex 容器、放置在网格单元格中等），聊天面板将随之调整。

即使你嵌入了多个聊天小部件，页面上也只需要 一个 <script> 标签。脚本会扫描页面上的每一个 <div data-chat-widget="…">，并在其中挂载一个聊天面板。

何时选择内嵌式与浮动式：

  • 浮动气泡 适合作为全站通用的“需要帮助？”按钮。
  • 内嵌式嵌入 适合聊天窗口需要出现在特定位置（如支持页面、知识库侧边栏、应用内帮助标签页）并作为页面原生部分呈现的情况。

内嵌式嵌入复用了与浮动气泡相同的配置（徽标、开场白、潜在客户捕获、引导问题等），因此你无需重复设置。

在其他人的网站上显示小部件

您可以在您无法控制的网站上显示正在运行的聊天小部件 — 无需代码，也无需访问对方的网站。这是向潜在客户展示助手在他们自己的页面上看起来是什么样子的最快方式。

  1. 打开“管理”面板并滚动到 渠道与嵌入。
  2. 在 客户演示链接 中，输入网站地址（例如 www.theircompany.com）。
  3. 点击 复制 以复制链接，或点击 打开 以便先自行查看。
  4. 将链接发送给您想要展示的对象。

打开该链接会加载目标网站，并将您的聊天小部件悬浮在上方，效果与实际安装时完全一致。任何拥有该链接的人都可以打开它 — 无需登录。

几点值得注意的事项：

  • 来自演示的聊天是真实的。 访客在演示中发送的消息会到达您的收件箱并由您的坐席回复，并且它们会像任何其他对话一样消耗额度。
  • 页面无品牌标识。 它仅显示对方的网站和您的小部件，不包含其他任何内容。
  • 某些网站无法被嵌入。 一些网站（银行、大型零售商或任何具有严格安全设置的网站）会阻止其他页面显示它们。在这种情况下，链接仍然有效：它会显示一个中性的模拟浏览器窗口，而不是真实的网站，但您的小部件仍会悬浮在上方，因此演示功能依然有效。
  • 它不会更改对方的网站。 没有安装任何内容，也没有修改任何内容 — 演示仅存在于该链接中。

演示链接始终使用您的账户默认路由，无论 将这些聊天路由至 设置为何值。如果您希望演示聊天由特定坐席处理，请先将该坐席设置为您的聊天小部件默认值。

将不同页面发送至不同营销活动

默认情况下，通过你的小部件发起的每次聊天都由同一个营销活动或坐席处理。你可以针对不同页面覆盖此设置，这样访问定价页面的访客会与你的销售营销活动对话，而访问帮助页面的访客则与你的支持坐席对话——所有这些都通过同一个聊天小部件完成。

获取代码有两种方式：

  • 从营销活动或坐席获取。 在 营销活动 (Campaigns) 页面，打开营销活动上的 ⋮ 菜单并选择 添加到网站 (Add to website)。在 坐席 (Agents) 页面，点击行上的 </> 按钮，或打开坐席并转到其 入口点 (Entry points) 选项卡。无论哪种方式，你都会获得一段已指向该营销活动或坐席的即用型代码片段。

    坐席的 入口点 (Entry points) 选项卡还有一个 网站聊天小部件 (Website chat widget) 面板，显示该坐席当前正在处理的网站聊天数量。来自嵌入的聊天会直接到达坐席，因此你不需要为它们创建入口点规则——即使没有任何规则的坐席也能回答其嵌入的聊天。

    添加到网站 (Add to website) 仅出现在已上线并设置为处理传入聊天的营销活动上。草稿状态的营销活动尚无法接收访客，因此该选项在发布前是隐藏的。在“坐席”页面，它出现在活跃坐席上。已暂停的坐席会接收聊天但不会回复，因此该选项在重新开启前是隐藏的。坐席无需设置通道——坐席可以从任何通道接收聊天。

  • 从小部件设置获取。 在聊天小部件的 设置 (Settings) → 通道 (Channels) → 管理 (Manage) 中，设置 将这些聊天路由至 (Route these chats to)，然后复制下方的代码片段。更改下拉菜单会自动重写代码片段。

浮动式代码片段在地址中携带了目标信息：

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID?campaign=CAMPAIGN_ID"></script>

内嵌式代码片段则将目标信息携带在 <div> 上，因此一个页面可以容纳多个指向不同位置的聊天：

<div data-chat-widget="CONFIG_ID" data-campaign="CAMPAIGN_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

对于坐席，措辞会变为 ?agent=AGENT_ID 或 data-agent="AGENT_ID"。

几点值得注意的事项：

  • 请使用复制按钮，而不是手动输入 ID。如果 ID 与您账户中的营销活动或代理不匹配，聊天功能仍可正常使用，但会回退到默认路由。
  • 已经在进行对话的用户将保持与当前对话对象的连接，即使他们随后跳转到指向其他位置的页面。这可以防止对话中途出现“人格”切换。
  • 特定页面的目标设置优先级高于账户默认设置和关键词触发器。

告知小部件访客身份（高级）

如果您将聊天小部件放置在会员专区、客户门户或用户已登录的应用程序中，您的网站已经知道他们的身份。您可以将其传递给小部件，这样访客就不必再次输入他们已经提供过的信息，您的 AI 也可以利用您已掌握的关于他们的信息。

在小部件脚本之前添加一个小的设置代码块：

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      name: "Maria",
      email: "maria@example.com",
      phone: "+391234567890"
    },
    data: {
      plan: "Professional",
      customer_since: "2024",
      last_order: "A-2291"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID"></script>

您的页面应在服务器端填充这些值，具体取决于当前登录的用户。

会发生两件事：

  • 跳过“开始之前…”表单。 提供姓名和电子邮件后，访客将直接进入对话，这些详细信息将保存到他们的联系人信息中，就像他们自己输入的一样。
  • data 下的所有内容都会传递给您的 AI。 您在此处放入的任何内容（如套餐、订单号、续订日期、信用余额、席位数量等）都将成为 AI 对该用户了解的一部分，因此它可以回答“我的套餐什么时候续订？”之类的问题，而无需先询问他们的身份。使用对您有意义的任何字段名称；它们会显示在联系人的“自定义字段”下。最多支持 20 个值，随每条消息实时发送，因此如果套餐在对话中途发生变更，AI 也能看到新的信息。

对于内嵌式嵌入，您可以将相同的信息放在 <div> 上，这在单个页面包含多个聊天窗口时非常方便：

<div data-chat-widget="CONFIG_ID"
     data-visitor-name="Maria"
     data-visitor-email="maria@example.com"
     data-visitor-data='{"plan":"Professional"}'
     style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

如果您的网站仅在页面加载后才知道访客是谁（例如，登录无需重新加载页面的单页应用程序），请在获取详细信息时调用此方法，小部件会自动更新：

<script>
  window.chatWidget.setVisitor({
    visitor: { id: "12345", name: "Maria", email: "maria@example.com" },
    data: { plan: "Professional" }
  });
</script>

几点值得注意的事项：

  • 如果两个不同的人在同一台计算机上登录，第二个人将开始新的对话，而不是看到第一个人的聊天记录。小部件会注意到人员变更并自行重置。
  • 这仅用于提供上下文，而非用于登录。对话仍按原样保持独立，因此传递 id 不会让任何人打开他人的聊天记录，而在不同设备或浏览器上使用的人员也会开启新的对话。
  • 这是可选的。普通公共页面上的小部件不需要这些设置，其行为与之前完全相同。

通过您自己的代码更改小部件设置 (API)

小部件 管理 (Manage) 面板上的所有内容也可以通过 REST API 进行更改，如果您管理多个网站或希望自动为客户关闭附件按钮，这将非常方便。发送 PATCH 到 https://api.youraiconnector.com/v1/chat-widget-configs/CONFIG_ID，并在其中包含您的 API 密钥以及您想要更改的字段——例如 {"show_upload_button": false} 可隐藏附件按钮，{"show_emoji_button": false} 可隐藏表情符号选择器，{"launcher_icon": "chat-dots"} 可更换启动器图标。CONFIG_ID 是与您的嵌入脚本中相同的标识符。可接受字段的完整列表（名称、开场消息、颜色、启动器图标、允许的域名、访客信息表单、隐私声明、主题、圆角和字体样式）位于 API 参考 的 聊天小部件 (Chat Widget) 下。网站会在下次页面加载时获取这些更改。

安装后的预期效果

将脚本添加到您的网站后，聊天小部件会自动在网站角落（默认在右下角）创建一个聊天按钮。当用户滚动页面时，该小部件会保持固定位置，确保始终可以访问。

当访客点击此按钮时，它会展开为一个完整的聊天窗口，访客可以在其中开始对话，并显示您的开场白。如果开启了“收集访客信息”，则在访客输入内容前，会先弹出一个小表单，要求他们提供姓名和电子邮件（以及可选的电话）。

聊天界面会自动适应不同的屏幕尺寸，因此在桌面端和移动端设备上都能无缝运行。

测试您的实现

将小部件添加到您的网站后，请测试其是否正常工作：

  1. 在浏览器中打开您的网站。
  2. 点击聊天按钮以打开小部件。
  3. 发送一条测试消息，并确认您收到了回复。
  4. 在不同的设备或浏览器上重复此操作，以确认它在任何地方都能正常工作。

如果聊天小部件未在您的网站上显示，请检查以下内容：

  1. 确保您已将 CONFIG_ID 替换为您实际的配置标识符。
  2. 确保脚本标签放置在结束的 </body> 标签之前。
  3. 检查代码是否存在拼写错误。

在企业防火墙后

如果小部件在公共网络下可以加载，但在办公网络下的员工端无法加载，那么几乎可以确定是网络屏蔽了其加载来源的域名。请要求你的 IT 团队在 443 端口通过常规 HTTPS 协议允许以下内容：

  • 嵌入代码片段中的域名 —— 即你从“管理”面板复制的 <script src="..."> 行中的地址。
  • api.youraiconnector.com —— 小部件也会向此处发送消息。

无需开放其他任何内容：不需要额外的端口，也不需要入站规则。如果在此之后小部件仍然无法显示，请在页面上打开浏览器的开发者控制台并将报告内容发送给我们——被拦截的请求会指明被拒绝的域名，这通常就是问题的全部答案。