• 下载
  • 社区

contact-button 智能客服

智能客服能力由蚂蚁金服零号云客服提供。

版本要求:基础库 1.14.1 或更高版本;支付宝客户端 10.1.10 或更高版本,若版本较低,建议做 兼容处理

唤起智能客服组件,开通智能客服:进入小程序管理后台后,点击 运营中心 > 用户服务 > 智能客服 > 立即使用 即可打开云客服免费使用。详情请见 智能客服

前提条件

智能客服仅支持企业用户。

示例代码

集成咨询窗(必选)

<contact-button tnt-inst-id="企业编码" scene="聊天窗编码"/>

进入 支付宝小程序官网 > 运营中心 > 用户服务 > 智能客服 > 立即使用 > 服务配置 > 聊天窗管理
说明:如果云客服控制台中没有 服务配置,请在页面左下方点击 切换至全量菜单

TB1Og6DdAxz61VjSZFrXXXeLFXa.png

点击操作栏中的 聊天窗 URL ,获取 tntInstId(企业编码)和 scene(聊天窗编码)。
说明:每个聊天窗编码都是唯一的。

image.png

自定义咨询按钮(可选)

<contact-button tnt-inst-id="企业编码" scene="聊天窗编码" size="咨询按钮大小" color="咨询按钮颜色" icon="咨询按钮图片url" />

默认咨询按钮如下:
image.png

修改后咨询按钮如下:
image.png

支付宝端内消息提醒(可选)

<contact-button tnt-inst-id="企业编码" scene="聊天窗编码" alipay-card-no="2088用户ID"/>

提醒一:打开支付宝,中间位置显示提示,点击即进入对话窗。
image.png

提醒二:服务提醒中显示客服回复的消息内容,点击即进入对话窗。
image.png

接入访客名片

通过 Java SDK 可以将零号云客服访客名片功能添加至支付宝小程序中。
具体介绍,见 支付宝小程序接入访客名片

属性

属性 类型 默认值 描述 使用场景 最低版本
tnt-inst-id String - 必填。企业唯一编码,一个企业支付宝账号对应一个编码。 - -
scene String - 必填。聊天窗编码,每个聊天窗的唯一编码 - -
size Number/String 25 选填。咨询按钮大小,正方形设置边长(如25*25 px) - 1.9.0 , 1.12.0 开始支持 rpx 单位
color String #00A3FF 选填。咨询按钮颜色,默认白底蓝色 - 1.9.0
icon ImgUrl - 选填。咨询按钮头像 - 1.9.0
alipay-card-no String - 选填。支付宝访客用户ID(2088开头) 客服回答问题时,如客户已离开咨询窗口,则通过推送消息到支付宝 card 中提醒客户。 -

常见问题

contact-button 组件写了没展示,如何查看聊天记录?

首先检查基础版本库是否匹配,然后在 支付宝 APP > 朋友 >服务提醒 中查看消息记录。

如何自定义 contact-button 智能客服 组件的样式?

可通过 button 按钮 组件设置自定义咨询按钮。

开通云客服没有加 contact-button 智能客服代码,为何有的手机上显示有的不显示客服图标?

进入 小程序开发中心 > 设置 > 客服设置,选择是否显示客服图标。

如何获取 tntInstId(企业编码)和 scene(聊天窗编码)?

进入 支付宝小程序官网 > 运营中心 > 用户服务 > 智能客服 > 立即使用 > 服务配置 > 聊天窗管理 。点击操作栏中的 聊天窗 URL ,获取 tntInstId(企业编码)和 scene(聊天窗编码)。详情请见 智能客服