支付宝小程序开放组件 智能客服·Contact-button

2020-09-18 11:13 更新

contact-button 智能客服

更新时间:2020-09-07 13:57:58

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

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

唤起智能客服组件,开通智能客服:进入对应小程序管理后台后,点击 用户互动 > 智能客服 > 立即使用 即可打开云客服免费使用。

前提条件

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

示例代码

集成咨询窗(必选)

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

在云客服中进入 设置 > 服务窗配置 > 聊天窗 URL。点击操作栏中的 聊天窗 URL ,获取 tntInstId(企业编码)和 scene(聊天窗编码)。

说明:每个聊天窗编码都是唯一的。

image

自定义咨询按钮(可选)

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

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

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

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

其中 alipay-card-no,ext-info 两个属性的说明详见下方的属性描述表格。

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

提醒一:打开支付宝,中间位置显示提示,点击即进入对话窗。(按一定的频率进行消息提醒,默认30分钟提醒一次)

image.png

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

image.png

提醒三:朋友 > 小程序 > 我的 显示未读的客服消息,点击即进入对话窗。(用户离开聊天窗期间客服发的消息会进行提醒)

image

接入访客名片

通过 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 中提醒客户。 -
ext-info String - 选填。该属性主要用于传递一些扩展信息给组件,以实现一些高级功能。该属性值的生成方式为:encodeURIComponent({"字段名":"字段值"}), 其中,字段名和字段值要根据实际使用的功能进行替换。目前通过传入扩展信息可支持的 3 个功能:1.访客名片。需传 cinfo 和 key 两个扩展字段,代码形如encodeURIComponent({"cinfo":"生成的 cinfo","key":"生成的key"}),cinfo 和 key 的值说明 支付宝小程序接入访客名片;2.聊天窗默认带出用户的小程序订单数据。需传 appId 字段,代码形如encodeURIComponent({"appId":"商户小程序appid"})3.未读客服消息同步至"我的小程序-我的"。同样需传 appId 字段,代码形如 encodeURIComponent({"appId":"商户小程序appid"}) - -

常见问题

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

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

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

进入 小程序控制台 > 设置 > 客服设置,选择是否显示客服图标。

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

进入 支付宝开放平台 > 运营中心 > 用户服务 > 智能客服 > 立即使用 > 在线客服 > 服务窗配置。点击操作栏中的 聊天窗 URL ,获取 tntInstId(企业编码)和 scene(聊天窗编码)。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号