网站聊天小部件允许网站访问者通过实时聊天或通过您已连接的其他消息渠道与您联系。

连接网站聊天小部件

观看下面的视频，了解如何将网站聊天连接到 respond.io 的分步指南。

How to Connect Website Chat to respond.io

步骤 1： 转到 设置 > 频道

第 2 步： 点击 添加频道 > 网站聊天 > 连接

步骤 3： 填写将添加小部件的网站。

请参阅以下内容了解如何将网站列入白名单。

如果用户添加https://app.respond.io，那么只有https://app.respond.io会被列入白名单。任何其他子域或根都不应起作用。
如果用户添加https://*.respond.io，则包括根域在内的所有子域都将被列入白名单。
如果用户添加https://respond.io，则只有根域会被列入白名单。

步骤 4：使用交互式颜色选择器为小部件选择主题颜色。

选择与您的品牌颜色和网站相匹配的颜色。

步骤 5：为小部件选择一个图标以在网站上显示。如果您希望上传自定义图标，您可以上传方形图标，建议尺寸为 256px x 256px。

一旦连接，小部件就可以进一步定制。

第 6 步：单击下一步> 将脚本添加到您喜欢的网站。或者，您可以通过电子邮件将安装说明发送给其他人。

安装聊天小部件

您可能需要网站管理员或技术管理员协助在网站上安装聊天小部件。如有需要，请寻求帮助。

根据您用于创建和管理网站的系统，我们创建了分步指南，指导您在网站上安装聊天小部件。

对于其他平台或服务，请导航至页面的 HTML 源代码。将脚本粘贴到 </body> 标签之前。

<body>
...
...
...
<Paste Script Here>
</body>

如果您需要帮助，您可以选择将脚本连同安装说明一起转发给您的网站管理员。选中相应的复选框并输入可以帮助您安装聊天插件的人的电子邮件地址。

一旦脚本成功安装，respond.io 网站聊天小部件就会出现在您的网站上。

自定义聊天小部件

步骤 1：在您的工作区中，转到设置>频道

第 2 步： 找到网站聊天频道 > 点击 自定义

请自定义网站小部件以匹配网站的外观，这样小部件看起来才能无缝衔接。在页面的右侧，有网站聊天小部件的预览。对小部件进行的任何自定义都将反映在小部件上，以帮助您更好地了解您正在自定义的内容。

显示 & 外观

您可以自定义以下内容来更改网站上小部件的显示外观。

场地	描述
主题颜色	所选颜色将用作小部件的主要颜色。
文本颜色	所选颜色将用作小部件的主要文本颜色。
网站聊天图标	选定的图标与主题颜色一起在小部件气泡内使用。如果需要，您可以上传自定义图标。
弹出消息	弹出消息每天在页面加载 5 秒后向网站访问者显示一次。如果未定义，则网站访问者不会看到任何弹出消息。

网站聊天图标验证：

最大文件大小：1MB
最大文件尺寸：256 x 256 像素
形状：方形

位置

场地	描述
对齐到	用户可以选择指定位置，是否在平台的左侧或右侧显示小部件。
垂直间距	用户可以指定网站聊天小部件和屏幕底部之间的垂直间距量。
水平间距	用户可以指定网站聊天小部件和屏幕侧面之间的水平间距量。
小部件大小	用户可以从小、标准或大中选择小部件的尺寸。
显示选项	用户可以选择在桌面、移动设备或两者上显示此小部件。

标题元素

场地	描述
标题	标题将显示在聊天小部件的顶部。
标语	标语将显示在标题下方。
网站聊天徽标	将您的徽标图像拖放到这里，以便它显示在网站聊天的顶部。格式可以是 PNG、SVG 或 JPG，文件大小不超过 4.0 MB。
频道图标	此选项将使联系人能够通过他们首选的渠道与您联系（提供选项）。您最多可以添加六个频道，它将显示在网站聊天小部件的顶部。
频道图标颜色	频道图标可以在您的聊天小部件上以白色或彩色形式显示。选择白色或彩色以配合聊天小部件的主题颜色。

网站聊天徽标验证：

最大文件大小：4MB
最大文件尺寸：1024 x 1024 像素
形状：方形

频道图标

如果之前从未配置过网站聊天小部件，则具有足够信息的连接频道将默认列为小部件频道链接。

您可以添加小部件频道链接并为所选频道指定必要的信息。

以下是每个支持的频道链接所需的输入字段列表。

频道链接	必填输入字段
WhatsApp	WhatsApp 电话号码
Facebook Messenger	Facebook 主页 ID
电报	电报机器人名称
Twitter	Twitter ID
LINE	LINE ID
Viber	Viber 公共帐户名称
短信	短信电话号码
电子邮件	电子邮件地址
电话	电话号码
自定义链接	URL 地址和图标
自定义二维码	QR 图像和图标

频道图标验证：

最大文件大小：1MB
最大文件尺寸：256 x 256 像素
形状：方形

聊天前表格

启用此选项将向您的网站聊天添加预聊天表单。如果启用，您的网站访问者将在开始聊天前填写一份表格。

启用此选项后，您可以在必要时包含其他自定义字段。除此之外，您还可以自定义默认字段的标签，以决定它们在联系人中的显示方式。

字段标签可以自定义为不同的语言以匹配网站的语言。

其他设置

场地	描述
输入栏文本	此文本将作为打字区域中的占位符。
文本字体	将用于在网站聊天小部件中显示字体的字体。

限制传入附件

选中此选项后，网站访问者将无法在网站聊天小部件中附加附件。

保持网站聊天隐藏

使用此选项时，小部件将被完全隐藏。直到单击“锚点引用”或通过编程 API 打开聊天。

#webchat_widget

使用上述锚点，您可以在页面上创建一个按钮，单击后即可打开小部件。

隐藏 Respond.io 品牌

使用此选项，您可以从小部件中删除 respond.io 品牌。

通道配置

步骤 1： 单击设置 > 频道

第 2 步： 找到网站聊天 > 点击管理

步骤 3： 在 网站聊天配置页面 您将看到以下配置：

聊天链接 - 您的联系人访问您的频道的 URL 链接。
频道名称 - 频道名称可以更改，并在内部用于识别频道。
网站域名 - 与您的小部件相连的网站。
网站聊天代码 - 如果您需要检索生成的代码片段，可以将此代码粘贴到您网站的 HTML 源代码中。

如果您没有在此列表中包含您的网站，您的小部件将无法加载。如果您'在多个网站上使用该插件，则可以添加多个 URL。

步骤 4：单击 保存更改 以更新网站聊天配置页面

识别登录用户

通过在您的网站代码中添加简单的JavaScript代码，即可识别您网站的登录用户。一旦传递的标识符与现有联系人匹配，当前对话就会恢复。

术语“用户”是在您的网站上下文中使用的。在 respond.io 平台中，我们继续将它们称为“联系人”。

window.__respond_settings = {
  标识符： "customer@example.com"，
  名字： "Jane"，
  姓氏： "Doe"，
  电话： "60123456789"，
  电子邮件： "customer@example.com"，
  个人资料图片： "https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/07/08/14/pic.jpg",
  countryCode: "MY",
  language: "en",
  // 自定义字段
  custom_fields: {
    // 自定义字段的 slug
    number: 123,
    description: "some text",
  },
};

代码使用指南

编辑代码（如下所示）以向 respond.io 发送当前登录用户的标识符。这可以是电子邮件地址或联系人 ID，也可以基于任何其他联系人字段。请注意， 标识符 是必填字段。
将代码直接粘贴到您希望网站聊天出现的每个页面的 head 标签中。
- 用于识别登录用户的脚本必须放在网站聊天代码上方，该代码可以在网站聊天配置对话框中找到。
您还可以发送与您的联系人相关的 respond.io 联系人字段，以便我们在联系人创建过程中存储联系人字段。字段名称（或 slug）可以在联系人字段模块中找到。
请注意，如果您使用此功能，聊天前表格将被忽略，这意味着联系人不需要在开始对话之前填写他们的信息。

上面的例子是传递一个电子邮件地址作为标识符，并且在联系人创建过程中，传递的所有联系人字段都将被存储。

程序控制（用户 API）

网站聊天小部件可以通过您的网站 JavaScript 代码打开和关闭。这使您可以在您的网站上创建自定义的 "与我们聊天" 按钮，并在访问者单击该按钮时触发网站聊天小部件打开。

行动

打开聊天
1. 描述：打开聊天小部件。
2. 语法： $respond.do("chat:open")
关闭聊天
1. 描述：关闭聊天小部件。
2. 语法： $respond.do("chat:close")

事件监听器

聊天框已打开
1. 描述：处理聊天小部件打开事件（触发您的 回调 函数）。
2. 语法：$respond.on("chat:opened",callback)
聊天框已关闭
1. 描述：处理聊天小部件关闭事件（触发您的 回调 函数）。
2. 语法：$respond.on("chat:closed",callback)

状态检查方法

聊天功能开放吗？
1. 描述：如果聊天小部件打开，则返回 true ，否则返回 false。
2. 语法： $respond.is("chat:open")
聊天关闭了吗？
1. 描述：如果聊天小部件已关闭，则返回 true ，否则返回 false。
2. 语法： $respond.is("chat:closed")

常见问题和疑难解答

为什么我的消息没有发送到联系人？

邮件未送达可能有以下几个原因：

联系人已离开网站。
联系人的不活跃可能会超过超时时间。
联系人的客户端可能会有网络连接问题。

为什么我的小部件没有出现在我的网站上？

确保代码安装正确。请参阅此处的说明，以了解如何安装网站聊天小部件。
确保将要安装小部件的网站列入白名单。请参阅连接网站聊天小部件的第三步，了解如何将您的域名加入白名单。

网站聊天小工具快速入门