vue集成ideakefu组件_vue的客服组件-优快云博客

本文链接：https://blog.youkuaiyun.com/keytounix/article/details/108949230

简介

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{
        /* 处理火狐-moz-focus-inner内默认padding值，导致line-height文字不居中问题*/
        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>

参数说明

属性参数

属性名	类型	是否必须	默认值	说明
siteid	String或Number	是	无	必须后端申请,具体见 1.2. 集成准备工作如何获取siteid
audiourl	String	否	无	收到消息时的系统提示语音地址,必须是可访问的网址,http或https协议。支持.mp3和wav
uid	String	否	无	指定客户端访客的ID,如果不指定,系统将采用uuid算法自动为客户进行分配
kfid	Number	否	0	指定哪一个客服处理,客服编号来自管理后台http://console.kefu.techidea8.com/corp/kefu客服列表ID字段,如果不指定,系统将采用负载均衡算法自动为访客分配
https	Boolean	否	true	默认使用https,如果使用http,则此处为false
showtime	Boolean	否	false	是否显示时间标签,显示时间标签后系统将在会话顶部展示时间标签信息
audioduration	Number	否	60	录音时长,不超过60秒的整数,
logo	String	否	…/static/idea-kefu/logo.jpg	客服的头像,可以为网络图像如http://xxx.jpg
bgcolorl	String	否	#fff	左侧聊天气泡背景色,默认为白色
colorl	String	否	#000	左侧聊天气泡字体颜色,默认为黑色
bgcolorr	String	否	#fff	右侧聊天气泡背景色,默认为白色
colorr	String	否	#000	右侧聊天气泡字体颜色,默认为黑色
btncolor	String	否	#42b8f4	发送按钮背景色
addonfile	PluginAttr	否	{show:true,pic:"/static/idea-kefu/icon/fujian.png",txt:“发文件”}	发送文件按钮
addonimage	PluginAttr	否	{show:true,pic:"/static/idea-kefu/icon/image.png",txt:“发图片”}	发送视频按钮
addonvideo	PluginAttr	否	{show:true,pic:"/static/idea-kefu/icon/video.png",txt:“发视频”}	发送图片按钮
addonform	PluginAttr	否	{show:true,pic:"/static/idea-kefu/icon/shiyong.png",txt:“填表试用”}	发送表单按钮

PluginAttr属性说明

属性名	类型	是否必须	例	说明
show	Boolean	否	true	是否显示该插件,若不配置,则默认为true
pic	String	否	/static/idea-kefu/icon/fujian.png	插件的图标
txt	String	否	`发文件`	插件下的描述性文字,若不配置,则试用默认参数

事件

事件名	类型	说明
version	function(e)=>{}	e表示常见版本
onmsg	function(e)=>{}	e数据格式如下{msgnum:int,msg:Msg},msgnum代表当前已累计新消息条数,msg代表当前消息对象
minimize	function(bool)=>{}	bool=true,界面呈现为btn状态,bool=false界面呈现为聊天状态

Msg属性说明

属性名	类型	是否必须	例	说明
media	string	是	txt	消息meidia类型,支持txt(文本),pic(图片),emoj(表情包),video(视频),audio(音频)
cmd	Number	是	2	2:访客发布消息,1:客服发布消息
content	String	是		对应具体内容,media=txt时,对应文字内容,media=pic
amount	number	否		用于存放数据,media=audio时,对应音频时长(秒)
createat	String	否		消息创建时间,yyyy-MM-dd hh:mm:ss
rid	number	否		会话id
kfid	number	否		会话分配的客服id
uid	string	否		访客标识即访客ID

方法

方法名	类型	说明
createLocalMsg	function(localMsg)=>{}	创建本地消息,即在聊天框中展示一条本地消息,该消息并不发送到客服
minimize	function(bool)=>{}	是否最小化窗口,true最小化,false,最大化
turnon	function()=>{}	打开新消息语音提醒
turnoff	function()=>{}	关闭新消息语言提醒

localMsg属性说明

属性名	类型	是否必须	例	说明
media	string	是	txt	消息meidia类型,支持txt(文本),pic(图片),emoj(表情包),video(视频),audio(音频)
cmd	Number	是	2	此处填写2代表访客发布消息
content	String	是		对应具体内容,media=txt时,对应文字内容,media=pic
amount	number	否		用于存放数据,media=audio时,对应音频时长(秒)
createat	String	否		消息创建时间,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