易维帮助台 Web SDK

简介

易维客服 Web SDK 可以帮助第三方网站及应用快速构建一个完善的客服系统生态圈，SDK 提供较为完善的客服应用功能，及简洁的API 接口。

注意：某些功能与授权版本相关，同时随着易维帮助台在客服应用场景或业务的不断拓展，Web SDK也会相应的推出与之相适配的功能

接入流程

基本接入配置

提供了一种企业快速接入易维帮助台客服系统的途径

第一步：创建网页组件渠道，系统设置>多渠道接入>新建渠道>网页组件

第二步：配置网页组件渠道，按照渠道配置说明配置相应的功能和UI，如入口标签的文字、位置、颜色以及功能、表单等

第三步：系统根据渠道配置信息自动生成JS代码、网页外链和二维码，第三方可根据具体应用场景选择相应的接入方式，

接入方式１：代码植入

复制相应的JS代码嵌入到你的网站html代码的</body>标签前面即可

示例：

<html>

<head>

<title>易维帮助台webSdk接入示例</title>

</head>

<body>

</body>

</html>

接入方式2：网页外链

直接打开网页外链地址

示例：

https://XXXX.XXXX.XXXX/#client/?provider_id=11&uid=3C7we7zbcEKhatittJSe

接入方式３：二维码

二维码适用场景：印刷品或网站

把二维码作为图片使用即可，用户通过微信扫码即可触发客服业务

用户服务

获取用户token 点击查看api文档

外链url传token参数

https://XXXX.ewei.com/#client/?provider_id=11&uid=3C7we7zbcEKhatittJSe&_token=fdsds7we7zbcEKhatittJSe

Web SDK传token参数

需在初始化sdk时候通过参数传入，参数可为空

var token = 'XXXXXXXXXXXXXXXXXXXXXXXXXXX';

window.ewei_web_sdk.init(token,function () {

});

自定义外观

企业可参考以下方法个性定制Web SDK外观样式，以下方法实现需在Web SDK之前初始化

外观样式设置

若某个参数为空，则默认以控制台渠道设置的样式显示

示例：

var config = {

"buttonBackgroundColor": "#ccc",

"buttonTitle": "在线交谈",

"position": "right",

"style": "fillet",

"windowTitle": "",

"windowTitleColor": "",

"iconSrc": ""

}

window.ewei_web_sdk.setConfig(config);

// 初始化sdk

var token = 'XXXXXXXXXXXXXXXXXXXXXXXXXXX';

window.ewei_web_sdk.init(token,function () {

// 可在此实现消息监听

});

自定义入口图标

企业可以选择是否使用易维帮助台提供的默认的服务入口按钮，若不使用，可以自己实现服务入口，下面是实现方法。

方法：可在自己页面中任意定义一个元素，在插入的js代码之后调用初始化方法即可，点击当前元素即唤醒在线交谈窗口。在线交谈窗口位置，颜色及标题可通过参数传递完成设置。注：若需要显示消息通知，需要调用“获取未读消息通知”的方法

示例：

Html:

这是一个示例入口组件，按照服务商自己需要完成自定义

</div>

JS:

var setting = {

"position": "right",

"windowTitle": "33333333",

"windowTitleColor": "#ccc"

}

// 原生的dom元素

var container = document.getElementById('eweiWeb');

// 初始化sdk

window.ewei_web_sdk.initContainer(container,setting);

var token = 'XXXXXXXXXXXXXXXXXXXXXXXXXXX';

window.ewei_web_sdk.init(token,function () {

// 可在此实现消息监听

});

参数说明：

名称	类型	说明	描述
buttonBackgroundColor	String	入口标签颜色	非必填，若不填以系统设置的颜色显示
buttonTitle	String	入口标签文字	非必填，若不填以系统设置的标签文字显示
position	String	入口标签位置	非必填，可支持四个方向：right：右侧居中，bottom_right：右侧底部，left：左侧居中，bottom_left：左侧底部
style	String	入口标签样式	非必填，支持三种样式roundness，fillet，square（注：当前属性值为fillet时，标签文字才会显示）
windowTitle	String	弹出窗口标题	非必填，若不填以系统设置的窗口标题显示
windowTitleColor	String	弹出窗口颜色	非必填，若不填以系统设置的窗口颜色显示
iconSrc	String	入口图标地址	非必填，必须是完整的URL地址，不支持防盗链图片地址，若不填以系统设置的图标显示

获取未读消息通知

监听是否有新的消息到达，返回一条消息提示，必须在Web SDK初始化后调用

示例：

// 初始化sdk

var token = 'XXXXXXXXXXXXXXXXXXXXXXXXXXX';

window.ewei_web_sdk.init(token,function () {

// 可在此实现消息监听

window.ewei_web_sdk.addListener('ewei_chat_unread',function(data){

// 您有一条新消息

console.log(data);

});

自动邀请

实现企业对在线网站访客的自动邀请，仅针对企业版，可支持“自动邀请”功能，请见系统设置>多渠道接入>网页组件中的自动邀请

用户浏览轨迹

企业接入sdk系统默认会采集访客的访问信息，在客户发起聊天时可通过控制台的聊天查看，具体包括以下信息：

访问渠道、当前页地址、停留时间、来源页地址、使用终端、浏览器、操作系统、地理位置、IP地址等

其他自定义参数

易维网页组件支持通过参数自定义语言、字段值等各类业务参数。

参数说明

名称	类型	说明	描述
lang	String	语言（中/英文）	非必填，en：英文版，zh：中文版。不填则默认为中文版
hidden_fields	String	隐藏提交工单表单字段	非必填，隐藏提交工单表单字段，多个字段请用逗号","分隔
customInfo	String	自定义信息透传	非必填，UrlEncode编码，编码前示例：[{"title":"title-1","content":"content-1"}]，严格模式检查
chatServiceCatalogId	String	会话服务目录id	非必填，传入服务目录 id

参数传递方法

外链 url 参数传递

外链方式接入可将参数直接以 http get 请求参数形式直接跟在 url 后面。

https://XXXX.ewei.com/#client/?provider_id=11&uid=3C7we7zbcEKhatittJSe&lang=en

JS 嵌入参数传递

// 可以与外观参数一起，放入config。

var config = {

"lang": "",

"hidden_fields": "",

"customInfo": "",

"chatServiceCatalogId": ""

}

window.ewei_web_sdk.setConfig(config);

表单字段值参数传递

工单及会话表单参数可以直接跟在外链 url 后面以 get 形式传递。如果是 JS 嵌入方式则需要通过 “window._ewei_auto_fill_webchat_in_data_” 方法传入，详情及参数名称说明请阅读网页组件渠道配置页面上的开发者文档页签，请在初始化方法之前调用此方法填入参数。