简介
idea-kefu 号称是为vue用户接入客服提供快速、方便、稳定的解决方案。
效果如下
官网地址
http://kefu.techidea8.com/
开发文档地址
http://kefu.techidea8.com/html/wiki
主要功能说明
本组件支持小程序、H5、和APP。坐席端支持app/微信公众号/windows系统，功能强大
支持文字消息支持图片消息支持客户表单支持emoj斗图客服数目不受限制支持模板消息提醒支持短信提醒支持APP提醒支持关键字回复支持后台统计支持语音消息
微信体验地址
关注公众号->点击购买咨询菜单->售前咨询,即可体验H5版本,小程序版本和APP版本可导入示例项目体验。
没错,这个咨询用的是我们自己的插件产品!我们自己也在用自己的产品！
界面展示
本系统包括访客组件和客服应用俩部分。其中访客组件支持小程序、app、公众号。客服工作台程序为我们提供的工作台，包括公众号、APP、客服端，商户可以自选一种。
访客组件界面展示
访客界面,普通图文消息,表情包,语音
坐席端下载
商户可以使用APP或者EXE回复访客信息
坐席下载地址http://kefu.techidea8.com/html/wiki/part1/kfapp.html
坐席app界面
当前咨询界面,支持视频、图片、表情和文字
坐席EXE客户端展示
示例和参数
安装
用户需要通过如下指令安装客服组件
npm install idea-kefu
使用
<template>
<div id="app">
<div :class="{kefuwdget:true,min:ismin,max:!ismin}">
<idea-kefu ref="kefu" :siteid="2" @minimize="onminimize">
<div slot="footer" class="footer">
<button class="btn" @click="showprice">产品定价
</button>
<button class="btn btn-info" @click="showwx">微信号码
</button>
</div>
</idea-kefu>
</div>
</div>
</template>
<script>
import IdeaKefu from "idea-kefu"
export default {
components:{
IdeaKefu
},
name: 'app',
data () {
return {
ismin:true
}
},
methods:{
onminimize(s){
this.ismin = !!s
console.log("min")
},
showprice(){
let msg = {}
msg.cmd = 2
msg.media = "txt"
msg.content = "普通版免费,至尊豪华定制版10000起订!"
this.$refs.kefu.createLocalMsg(msg)
},
showwx(){
let msg = {}
msg.media = "pic"
msg.content = "http://kefu.techidea8.com/html/wiki/assets/image/kf1.jpg"
this.$refs.kefu.createLocalMsg(msg)
}
}
}
</script>
<style lang="scss">
@charset "utf-8";
$height:22;
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.kefuwdget{
position: absolute;
right: 0px;
bottom: 0px;
min-width: 200px;
min-height:80px;
max-width: 640px;
max-height: 480px;
&.min{
width: 200px;
height: 80px;
}
&.max{
width: 640px;
height: 480px;
}
}
.footer{
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.btn{
height:$height + px;
line-height:$height + px;
padding: 0 0.3em;
margin: 5px 5px 5px 5px;
font-size: 14px;
box-sizing:content-box;//重置input submit、buttonbox-sizing border-box 为content-box。做到一致的表现 //ie7手动添加border高度
vertical-align: text-top;
display: inline-block;
*display: inline;
*zoom:1;
border:1px solid #ddd;
background-color: #ddd;
border-radius: 3px;
overflow: visible;//IE7下文字表现左右空格
color: #333;
cursor: pointer;
input[type="submit"]{//IE7下黑色边框问题，采用label包裹input[type="submit"]方式
background:transparent;
border:none;
line-height:$height + px;
height:$height + px;
display: block;
vertical-align: text-top;
font-size:14px;
margin:0 -6px;
*overflow: visible;
*margin:0;
color: #fff
}
&:hover{
opacity: 0.8;
filter:alpha(opacity=80);
}
&:active{
opacity:1;
filter:alpha(opacity=100);
}
&:focus{
outline: 0;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
&:visited{
opacity:1;
filter:alpha(opacity=100);
}
@at-root{
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
border:none;
padding:0 inherit;
}
input[type="submit"].btn,
input[type="button"].btn,
input[type="reset"].btn,
button.btn{
*height:($height + 2) + px;//处理IE7 box-sizing问题。submit,button,reset表现为border-box问题
*line-height:($height - 2) + px;
}
a.btn{
color:inherit;
text-decoration:none;
}
}
}
.btn-default{
color: #333;
background-color: #fff;
border-color: #ccc;}
.btn-danger{
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;}
.btn-warning{
color: #fff;
background-color: #f0ad4e;
border-color: #eea236;}
.btn-info{
color: #fff;
background-color: #5bc0de;
border-color: #46b8da; }
.btn-success{
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c; }
.btn-primary{
color: #fff;
background-color: #428bca;
border-color: #357ebd;}
</style>
参数说明
属性参数
属性名类型是否必须默认值说明
siteidString或Number是无必须后端申请,具体见 1.2. 集成准备工作 如何获取siteidaudiourlString否无收到消息时的系统提示语音地址,必须是可访问的网址,http或https协议。支持.mp3和wavuidString否无指定客户端访客的ID,如果不指定,系统将采用uuid算法自动为客户进行分配kfidNumber否0指定哪一个客服处理,客服编号来自管理后台http://console.kefu.techidea8.com/corp/kefu客服列表ID字段,如果不指定,系统将采用负载均衡算法自动为访客分配httpsBoolean否true默认使用https,如果使用http,则此处为falseshowtimeBoolean否false是否显示时间标签,显示时间标签后系统将在会话顶部展示时间标签信息audiodurationNumber否60录音时长,不超过60秒的整数,logoString否…/static/idea-kefu/logo.jpg客服的头像,可以为网络图像如http://xxx.jpgbgcolorlString否#fff左侧聊天气泡背景色,默认为白色colorlString否#000左侧聊天气泡字体颜色,默认为黑色bgcolorrString否#fff右侧聊天气泡背景色,默认为白色colorrString否#000右侧聊天气泡字体颜色,默认为黑色btncolorString否#42b8f4发送按钮背景色addonfilePluginAttr否{show:true,pic:"/static/idea-kefu/icon/fujian.png",txt:“发文件”}发送文件按钮addonimagePluginAttr否{show:true,pic:"/static/idea-kefu/icon/image.png",txt:“发图片”}发送视频按钮addonvideoPluginAttr否{show:true,pic:"/static/idea-kefu/icon/video.png",txt:“发视频”}发送图片按钮addonformPluginAttr否{show:true,pic:"/static/idea-kefu/icon/shiyong.png",txt:“填表试用”}发送表单按钮
PluginAttr属性说明
属性名类型是否必须例说明
showBoolean否true是否显示该插件,若不配置,则默认为truepicString否/static/idea-kefu/icon/fujian.png插件的图标txtString否发文件插件下的描述性文字,若不配置,则试用默认参数
事件
事件名类型说明
versionfunction(e)=>{}e表示常见版本onmsgfunction(e)=>{}e数据格式如下{msgnum:int,msg:Msg},msgnum代表当前已累计新消息条数,msg代表当前消息对象minimizefunction(bool)=>{}bool=true,界面呈现为btn状态,bool=false界面呈现为聊天状态
Msg属性说明
属性名类型是否必须例说明
mediastring是txt消息meidia类型,支持txt(文本),pic(图片),emoj(表情包),video(视频),audio(音频)cmdNumber是22:访客发布消息,1:客服发布消息contentString是对应具体内容,media=txt时,对应文字内容,media=picamountnumber否用于存放数据,media=audio时,对应音频时长(秒)createatString否消息创建时间,yyyy-MM-dd hh:mm:ssridnumber否会话idkfidnumber否会话分配的客服iduidstring否访客标识即访客ID
方法
方法名类型说明
createLocalMsgfunction(localMsg)=>{}创建本地消息,即在聊天框中展示一条本地消息,该消息并不发送到客服minimizefunction(bool)=>{}是否最小化窗口,true最小化,false,最大化turnonfunction()=>{}打开新消息语音提醒turnofffunction()=>{}关闭新消息语言提醒
localMsg属性说明
属性名类型是否必须例说明
mediastring是txt消息meidia类型,支持txt(文本),pic(图片),emoj(表情包),video(视频),audio(音频)cmdNumber是2此处填写2代表访客发布消息contentString是对应具体内容,media=txt时,对应文字内容,media=picamountnumber否用于存放数据,media=audio时,对应音频时长(秒)createatString否消息创建时间,yyyy-MM-dd hh:mm:ss
调用案例
let msg = {}
msg.cmd = 2
msg.media = "txt"
msg.content = "这是测试文字"
this.$refs.kefu.createLocalMsg(msg)
slot
系统支持slot插槽
btnkefu插槽
该插槽用来修饰最小化时的窗口样式
<div slot="btnkefu">
<img src="../assets/icon/zixun.png"/>
<div class="right">
<code v-text="''+msgnum" v-if="msgnum>0">12
</code>
<span>快捷咨询
</span>
</div>
</div>
最后效果
header插槽
插槽效果如下
该插槽用来修饰顶部菜单栏
<div slot="header">
<div class="header">
<div>
<img src="../assets/icon/down.png" />
</div>
</div>
</div>
welcome插槽
该插槽用来修饰首次进入欢迎语
<div slot="welcome" >你好!
</div>
footer插槽
该插槽用来修饰底部自定义区域,该区域可以定义一些常用的问题,然后调用createLocalMsg方法显示
<div slot="footer" >
<button @click="showprice">产品定价
</button>
<button @click="showwx">微信号码
</button>
</div>
showprice(){
let msg
= {}
msg
.media
= "txt"
msg
.content
= "普通版免费,至尊豪华定制版10000起订!"
this.$refs
.kefu
.createLocalMsg(msg
)
}
showwx(){
let msg
= {}
msg
.media
= "pic"
msg
.content
= "http://kefu.techidea8.com/html/wiki/assets/image/kf1.jpg"
this.$refs
.kefu
.createLocalMsg(msg
)
}
如何获取siteid
前往kefu.techidea8.com注册即可获得siteid,具体请前往开发文档申请客服帐号
http://kefu.techidea8.com/html/wiki/part1/prepare.html
如何绑定公众号开头消息推送功能
系统支持公众号模板消息推送,关注下列公众号,并在http://console.kefu.techidea8.com/corp/kefu页面扫描二维码,即可开通微信客服
公众号推送展示
如何下载客服APK或者桌面EXE程序?
参考 http://kefu.techidea8.com/html/wiki/part1/kfapp.html
