idea-kefu

v1.0.9

Published

2 years ago

简单、方便、好用、专业的vue客服组件

Downloads

0High
0Medium
0Low

winlion

简介

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">
    <idea-kefu ref="kefu" :siteid="siteid" @onmsg="onmsg" @version="version"></idea-kefu>
  </div>
</template>

<script>
import IdeaKefu from "idea-kefu"
export default {
  components:{
    IdeaKefu
  },
  name: 'app',
  data () {
    return {
      //siteid 需要去`http://kefu.techidea8.com/`申请
      siteid: 2 
    }
  },
  methods:{
      version(e){
            console.log("version",e)
      },
      onmsg(e){
            console.log("当前新消息条数",e.msgnum,"当前消息内容",e.msg)
      }
  }
}
</script>

<style lang="scss">

</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|audio|video时,对应图片链接地址,media=emoj时对应表情ID(0-40)| |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|audio|video时,对应图片链接地址,media=emoj时对应表情ID(0-40)| |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

隐私、权限声明

本插件需要申请的系统权限列表：无
本插件采集的数据、发送的服务器地址、以及数据用途说明：无
本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：无