|  开放平台
1
悬浮聊天框效果

客户在原网页上的悬浮框与客服沟通,如下图所示:

悬浮框版在线客服
2
为企业网站添加在线客服入口

复制HTML代码 > 粘贴至企业网站代码中

粘贴在线客服页面代码至网站

假设想要将在线客服放在如下图网页中,只需把复制的HTML代码粘贴至网站代码的任意位置中(推荐置于body标签内的最下方),例如:

<body>
  ……
  <script src="http://ci-ziker.yun.pingan.com:5000/webim/?channel=WEBIM&authorizerAppid=webim2c83aec0a&eid=6581c81b0d13fbb">
  </script>
</body>
粘贴在线客服页面代码至网站
3
自定义样式

悬浮聊天框支持企业自定义样式。在以上代码中写入相关样式属性即可,示例和效果图如下:

<body>
   ……
  <script src="http://ci-ziker.yun.pingan.com:5000/webim/?channel=WEBIM&authorizerAppid=webim2c83aec0a&eid=6581c81b0d13fbb" width="800" height="700" theme="red">
  </script>
</body>
企业可以自定义在线客服悬浮框样式
4
自定义参数

如企业想要在链接中传入业务参数,需按照以下标准开发,在网页IM的链接中传递相关参数。

默认参数:

参数名 描述
eid 企业id
channel 渠道号
authorizerAppid 业务id

自定义参数(非加密版):

参数名 描述 是否必填
cid 企业识别客户的唯一id
headimgurl 头像
nickname 昵称
sex 性别(F/M)
mail 邮箱
tel 电话
msgInfo 首次打开IM发给坐席的inbound消息
entryData 用户标签,小安机器人可以根据此标签同一问题返回不同答案
customerGrade 客户等级只能传A、B、C、D、E大写字母,支持最多五个等级

默认参数为自动生成的url中自带的参数,不可更改或删除。自定义参数为企业选传的参数,不带自定义参数时为匿名客户。自定义参数中cid为必 传项,为该客户在企业系统中的唯一ID,不传该参数将无法识别此客户。

传参示例:

http://ci-ziker.yun.pingan.com:5000/webim/?msgInfo=nihao&channel=WEBIM&authorizerAppid=webim2c83aec44342e0a&eid=6581c81b0d14945da049db5e474d3fbb&cid=100419&headimgurl=http://wx.qlogo.cn/logo.jpg&nickname=weixin008&sex=M&mail=dahuanfu896@pingan.com&tel=1561&entryData=vip&customerGrade=A

自定义参数(加密版):

参数名 描述 是否必填
productInfo 商品信息,示例:{"url":"商品链接","image":"商品图片链接","title":"商品标题","description":"商品描述"}
entryData 用户标签,小安机器人可以根据此标签同一问题返回不同答案
encryptData 对cid,headimgurl,nickname,sex,mail,tel,msgInfo等字段进行加密
customerGrade 客户等级只能传A、B、C、D、E大写字母,支持最多五个等级

加密示例:

node版加密写法:
import crypto from 'crypto';
var data = "cid=10049&nickname=test";
var encipher = crypto.createCipheriv('aes-128-cbc', (secretKey||__secretKey__), __iv__);
var encryptData = encipher.update(data, 'utf8', tp) + encipher.final(tp).toLowerCase();
secretKey为企业管理端中企业中心的secretKey密钥,data包含cid,headimgurl,nickname,sex,mail,tel,msgInfo等参数,利用加密算法得到的encryptData即为加密参数。

传参示例:

http://ci-ziker.yun.pingan.com:5000/chatboard/im.min.js?channel=WEBIM&authorizerAppid=webimoSdhvQQkaXNERdu&eid=6581c81b0d14945da049db5e474d3fbb&theme=ff00ff&style=MINI&language=ZH-CN&guide=1&encryptData=b29302832a0ec841f2d427fa16505974951836438101cffb9b2df3e902bf2130&entryData=vip&customerGrade=A

坐席工作台上相应看到的内容如下图:

客服看到在线客户信息页面展示
5
开放接口

如企业想要传入业务参数,需按照以下标准开发,可往悬浮聊天框中传递相关参数。

  • 传递商品信息

    cikeTalk.api.setProductInfo('{"url":"商品链接","image":"商品图片链接","title":"商品标题","description":"商品描述"}')

    示例:cikeTalk.api.setProductInfo('{"url": "http://kefu.pingan.com/index.html","image": "http://kefu.pingan.com/images/product_04.jpg","title": "平安客服云-在线客服","description": "¥1899.00元/坐席/年"}')