更新记录

1.4.2(2022-01-12)

  • 修复接口bug

1.4.1(2022-01-11)

  • 完善国际化i18n
查看更多

平台兼容性

Vue2 Vue3
×
App 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 快应用
app-vue app-nvue
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

萝卜丝智能客服-uniapp sdk

部分功能

  • 萝卜丝官方技术支持
  • 全部基于vuejs开发,不依赖原生SDK,100%全部开源,支持自定义界面
  • 支持web/h5/小程序/安卓/iOS等全平台
  • 支持人工客服
  • 支持机器人
  • 支持文字、图片、语音
  • 支持消息预知:对方正在输入
  • 支持消息状态:送达、已读
  • 支持消息撤回
  • 支持发送商品信息

Demo下载

配置步骤说明(共两步)

  • 首先:将 bytedesk_kefu 文件夹拷贝到 components 文件夹,
  • 然后:在pages.json中添加此三个页面,具体可参考demo中pages.json文件
{
    "path": "components/bytedesk_kefu/chat-kf",
    "style": {
        "navigationBarTitleText": "萝卜丝智能客服",
        "navigationBarBackgroundColor":"#007AFF",
        "navigationBarTextStyle":"white"
    }
},
{
    "path": "components/bytedesk_kefu/chat-im",
    "style": {
        "navigationBarTitleText": "萝卜丝智能客服",
        "navigationBarBackgroundColor":"#007AFF",
        "navigationBarTextStyle":"white"
    }
},
{
    "path": "components/bytedesk_kefu/rate",
    "style": {
        "navigationBarTitleText": "满意度评价",
        "navigationBarBackgroundColor":"#007AFF",
        "navigationBarTextStyle":"white"
    }
},
{
    "path": "components/bytedesk_kefu/webview",
    "style": {
        "navigationBarTitleText": "萝卜丝H5",
        "navigationBarBackgroundColor":"#007AFF",
        "navigationBarTextStyle":"white"
    }
},
{
    "path": "components/bytedesk_kefu/leavemsg",
    "style": {
        "navigationBarTitleText": "留言",
        "navigationBarBackgroundColor":"#007AFF",
        "navigationBarTextStyle":"white"
    }
}

开发步骤说明(共三步)

bytedesk_demo和bytedesk_demo_i18n的区别仅仅在于后者支持国际化,其他功能没有区别

  • 第0步:支持国际化
- 参照bytedesk_demo_i18n/main.js和官方国际化文档配置:官方文档 https://uniapp.dcloud.net.cn/collocation/i18n
  • 第一步:引入文件。在调用客服的vue页面,如:index.vue,引入
import * as bytedesk from '@/components/bytedesk_kefu/js/api/bytedesk.js'
  • 第二步:初始化。在index.vue页面onLoad函数
// 萝卜丝第二步:初始化
// 获取subDomain,也即企业号:登录后台->客服管理->客服账号->企业号
let subDomain = 'vip'
// 登录后台->渠道管理-》uniapp中创建应用获取
let appKey = 'f4970e52-8cc8-48fd-84f6-82390640549d'
bytedesk.init(subDomain, appKey);
  • 第三步:开始会话
// 第三步:到 客服管理->技能组-有一列 ‘唯一ID(wId)’, 默认设置工作组wid
// 说明:一个技能组可以分配多个客服,访客会按照一定的规则分配给组内的各个客服账号
// workGroupWid: '201807171659201', // 默认人工
// 参数说明:
// nickname 自定义昵称,可设置为非空字符串,如不设置,会系统生成默认昵称
// history 是否显示历史聊天记录,默认为显示,设置history=0,则不显示历史聊天记录
// postscript 附言,在连接成功客服之后,自动将此消息发送给客服
// lang 语言,默认值为lang=cn,显示中文,如需显示英文设置lang=en
// goods 是否显示商品信息,如果要显示,设置为goods=1,设置为其他值,则不显示商品信息
// goods_id 商品信息id,参数goods=1的情况有效
// goods_title 商品信息标题,参数goods=1的情况有效
// goods_content 商品信息详情,参数goods=1的情况有效
// goods_price 商品信息价格,参数goods=1的情况有效
// goods_url 商品信息网址,参数goods=1的情况有效
// goods_imageUrl 商品图片,参数goods=1的情况有效
// goods_categoryCode 可选,商品信息类别,参数goods=1的情况有效
startChat () {
  // console.log('start chat')
  uni.navigateTo({
    url: '../../components/bytedesk_kefu/chat-kf?wid=' + this.workGroupWid + '&type=workGroup&aid=&title=萝卜丝'
  });
}
  • 结束
  • 具体请参考demo中index.vue页面
首页 聊天 H5

微信小程序

  • 配置服务器域名:
  • request合法域名添加:https://stomp.bytedesk.com;https://www.bytedesk.com;
  • socket合法域名添加:wss://www.bytedesk.com;
  • uploadFile合法域名:https://stomp.bytedesk.com;https://www.bytedesk.com;
  • downloadFile合法域名:https://stomp.bytedesk.com;https://www.bytedesk.com;

减小体积

  • 第一步:删除 agent-detail.vue、chat-im.vue、chat-scan.vue、cuw.vue、feedback.vue、ticket.vue、user-detail.vue、webview.vue 以及 image/cuw文件夹
  • 第二步:如果上面还不能满足,则可以考虑删除 leavemsg.vue 、rate.vue 和 image/rate文件夹
  • 注意:chat-kf.vue为对话页面,不能删除

点击商品回调

  • 可用于点击商品后,跳转自定义页面
// 具体参考demo中chat_type.vue页面
onLoad(option) {
    // 监听点击商品回调
    uni.$on('commodity',function(content) {
        console.log('点击商品回调:', content);
    })
},
() {
    // 移除点击商品回调监听
    uni.$off('commodity'); 
}

消息推送

客服消息会额外推送到此地址,开发者可据此实现消息存储和App离线推送等。 以http或https开头,GET方式调用,参数名: json。注意: url中不能含有‘?’等字符。 例如:您填写的url为:https://www.example.com/abc, 系统会自动在url末尾添加字符串 ‘?json=’,组成url:https://www.example.com/abc?json=消息内容。 在您服务器,只需要解析json参数内容即可

  • 技能组:登录管理后台-》客服管理-》技能组-》编辑,滚动到最下方,填写webhook URL网址,客服消息会额外推送到此地址
  • 指定客服:登录管理后台-》客服管理-》客服账号-》编辑,滚动到最下方,填写webhook URL网址,客服消息会额外推送到此地址
  • 客服和访客发送的消息均会推送:"extra": "{\"agent\":true}" // 其中:true 为客服发送消息,false 为访客发送消息
  • 推送消息体json格式及说明如下:
{
    "mid": "658835ef-69af-e231-eb3c-4e6685ffc4d3",
    "timestamp": "2021-05-11 17:19:34",
    "client": "web",
    "version": "1",
    "type": "text",
    "user": {
        "uid": "201808221551193",
        "nickname": "客服001",
        "avatar": "https://chainsnow.oss-cn-shenzhen.aliyuncs.com/avatars/admin_default_avatar.png",
        "extra": "{\"agent\":true}" // 说明:true 为客服发送消息,false 为访客发送消息
    },
    "text": {
        "content": "2"
    },
    "thread": {
        "tid": "202105111719261_20210507193724225efbd47566648d1bb1608b4d1f1a3f2", // 格式说明:时间戳_访客uid
        "type": "workgroup",
        "nickname": "局域网7241[172.16.0.75]",
        "avatar": "https://chainsnow.oss-cn-shenzhen.aliyuncs.com/avatars/chrome_default_avatar.png",
        "content": "2",
        "timestamp": "2021-05-11 17:19:34",
        "topic": "201809061716221/20210507193724225efbd47566648d1bb1608b4d1f1a3f2" // 格式说明:技能组wid/访客uid
    }
}

技术支持

其他

隐私、权限声明

1. 本插件需要申请的系统权限列表:

1. 网络权限 2. 上传图片

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问