vue整合ideakefu元件

imwinlion發表於2020-10-07
VueIdea元件

簡介

idea-kefu 號稱是為vue使用者接入客服提供快速、方便、穩定的解決方案。

效果如下

vue整合ideakefu元件

官網地址

http://kefu.techidea8.com/
開發文件地址

http://kefu.techidea8.com/html/wiki

主要功能說明

本元件支援小程式、H5、和APP。坐席端支援app/微信公眾號/windows系統，功能強大

  • 支援文字訊息
  • 支援圖片訊息
  • 支援客戶表單
  • 支援emoj鬥圖
  • 客服數目不受限制
  • 支援模板訊息提醒
  • 支援簡訊提醒
  • 支援APP提醒
  • 支援關鍵字回覆
  • 支援後臺統計
  • 支援語音訊息

微信體驗地址

關注公眾號->點選購買諮詢選單->售前諮詢,即可體驗H5版本,小程式版本和APP版本可匯入示例專案體驗。
詢單管理介面

沒錯,這個諮詢用的是我們自己的外掛產品!我們自己也在用自己的產品！

介面展示

本系統包括訪客元件和客服應用倆部分。其中訪客元件支援小程式、app、公眾號。客服工作臺程式為我們提供的工作臺，包括公眾號、APP、客服端，商戶可以自選一種。

訪客元件介面展示

  • 訪客介面,普通圖文訊息,表情包,語音
vue整合ideakefu元件 vue整合ideakefu元件 vue整合ideakefu元件

坐席端下載

商戶可以使用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>

引數說明

屬性引數

屬性名型別是否必須預設值說明
siteidString或Number是無必須後端申請,具體見 1.2. 整合準備工作 如何獲取siteid
audiourlString否無收到訊息時的系統提示語音地址,必須是可訪問的網址,http或https協議。支援.mp3和wav
uidString否無指定客戶端訪客的ID,如果不指定,系統將採用uuid演算法自動為客戶進行分配
kfidNumber否0指定哪一個客服處理,客服編號來自管理後臺http://console.kefu.techidea8.com/corp/kefu客服列表ID欄位,如果不指定,系統將採用負載均衡演算法自動為訪客分配
httpsBoolean否true預設使用https,如果使用http,則此處為false
showtimeBoolean否false是否顯示時間標籤,顯示時間標籤後系統將在會話頂部展示時間標籤資訊
audiodurationNumber否60錄音時長,不超過60秒的整數,
logoString否…/static/idea-kefu/logo.jpg客服的頭像,可以為網路影像如http://xxx.jpg
bgcolorlString否#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是否顯示該外掛,若不配置,則預設為true
picString否/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=pic
amountnumber否用於存放資料,media=audio時,對應音訊時長(秒)
createatString否訊息建立時間,yyyy-MM-dd hh:mm:ss
ridnumber否會話id
kfidnumber否會話分配的客服id
uidstring否訪客標識即訪客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=pic
amountnumber否用於存放資料,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>

最後效果

vue整合ideakefu元件
header插槽

插槽效果如下

vue整合ideakefu元件

該插槽用來修飾頂部選單欄

<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

相關文章