微信小店
微信门店
微信智能接口
微信设备功能

PC客户端自定义插件接口

出自微信公众平台开发者文档
跳转到: 导航, 搜索

目录

PC客户端自定义页面插件接口

在PC多客服客户端中,我们预留了开放能力,您可以在多客服聊天窗口右侧区域添加自己的自定义web页面插件(推荐页面宽度为420px),通过多客服客户端提供的JavaScript接口,您的页面可以与多客服客户端进行交互,实现自己需要的功能,如常用回复、信息查询等。

当需要添加自定义web页面插件时,你需要先进入微信公众平台,“功能-多客服”,选择“客户端高级设置”,选择添加新插件,输入您的页面地址和插件名称,然后重新登录多客服pc客户端,即可在聊天窗口右侧查看到新添加插件页面。(你可以先填写“demo”和http://dkf.qq.com/demopage.html ,使用官方demo进行体验)。

添加插件示意图如下: 1

添加官方demo插件后,效果图如下: 3

多客服客户端提供了一系列JavaScript方法接口,在多客服中加载的插件页面可以通过JavaScript调用客户端提供的方法。下面详细介绍这些接口。

接口调试

当需要调试自定义插件页面时,你可以通过Chrome浏览器中按F12,打开网页调试工具,来对自定义插件页面进行调试。 6

当需要在多客服PC客户端中调试时,你可以在多客服插件页面中按”Ctrl+Alt+0”,即可显示客户端交互信息窗口,窗口中能够显示插件页面与客户端的方法和事件交互日志,方便开发者调试方法调用和事件通知,最后按“Alt+F4”关闭该窗口。 4

向会话窗口输入框中输入一条消息

多客服PC客户端中加载的插件web页面可以调用PutMsg方法向当前聊天的会话窗口输入框中输入一条消息,可以支持文本、图片、图文三种消息类型。使用该接口,可以让客服人员快速从你自定义的插件页面中,选中一条内容到输入框中,便于客服发送。

接口调用说明(JavaScript)

window.external.PutMsg(
    ‘{
      "msg":
         {
            "head": {"random": "123456"}
            "body": [{"type":0, "content":{"text":"你好客服001为您服务"}}]
        }
    }’
)

head中包含一个随机参数random,请传入一个随机数,相同随机数的调用会被抛弃,避免被异常重复调用。body中是消息的具体内容,各消息类型的参数定义不同,具体消息所对应的json参数如下:

推送文本消息

{
    “type”:0,
    “content”:
    {
        “text”:”文本内容”
    }
}

推送图片消息

{
    “type”:1,
    “content”:
    {
        “picUrl”:”图片的url”
    }
}

推送图文消息

{
    “type”:1,
    “content”:[
         {
             “title”:”标题”,
             “digest”:”摘要”,
             “cover”:”封面图片url”,
             “url”:” 要跳转的链接”
         },
         {
             “title”:”标题”,
             “digest”:”摘要”,
             “cover”:”封面图片url”,
             “url”:” 要跳转的链接”
           }
         ]
    }
}

返回说明

正确时的返回如下:

{retCode:0,errMsg:“”}

错误时的返回如下(示例为参数错误):

{"retCode":5,"errMsg":"参数错误"}

高亮自定义插件Tab页

多客服PC客户端以Tab页卡的方式显示多个自定义插件web页面,客服可能会切换到其他插件页面,为了避免客服遗漏非当前显示的插件页面上的重要信息,插件页面可以调用Notice方法使自己的Tab页卡高亮,提示客服切换至您的页面查看信息。

接口调用说明(JavaScript)

window.external.Notice("");

返回说明

正确时的返回如下:

{retCode:0,errMsg:“”}

事件接口 - 切换当前会话用户

多客服客户端定义了一系列的事件,客户端会调用插件页面的MCS_ClientNotify(strParam)方法来通知页面。插件页面实现MCS_ClientNotify(strParam)方法,即可收到来自客户端的事件通知,页面可以通过参数中的event字段来区分具体事件类型。

代码示例(JavaScript)

function MCS_ClientNotify(EventData) {
    EventData = strToJson(EventData);
    switch(EventData['event']){
        case 'OnUserChange':{
            OnUserChange(EventData);
            break;
        }
        case 'OnMapMsgClick':{
            OnMapMsgClick(EventData);
            break;
        }
    }
}
function strToJson(str){
	var json = (new Function("return " + str))();
	return json;
}

为了方便插件页面获取当前会话的用户,当客服切换会话窗口时多客服客户端会通过OnUserChange事件通知页面,并在参数中带上当前用户的OpenId等信息。插件页面可以响应OnUserChange事件,获取并展示当前用户的相关信息。

MCS_ClientNotify参数:

MCS_ClientNotify(
   {
  "event":" OnUserChange ",
  " channeltype ":"1",
  " useraccount ":"OPENID"
  }
)
参数 说明
channeltype 用户渠道号,固定为1,表示微信渠道
useraccount 用户的openID

事件接口 - 客服点击地理消息

客服人员点击用户发送过来的地理位置消息时,客户端会通过OnMapMsgClick事件通知页面,并在参数中带上经纬度等信息。插件页面可以相应OnMapMsgClick事件,为用户提供基于地理信息的服务。

MCS_ClientNotify参数:

MCS_ClientNotify(
   {
  "event":" OnMapMsgClick ",
  " latitude ": latitude,
  " longitude ": longitude,
  " location ": location,
  " scale ": scale
  }
)
参数 说明
latitude 纬度
longitude 经度
location 具体位置文字描述
scale 缩放比例