Uniapp
部分功能
- 全部基于 vuejs 开发，不依赖原生 SDK，100%全部开源，支持自定义界面
- 支持 web/h5/小程序/安卓/iOS 等全平台
- 支持人工客服
- 支持机器人
- 支持文字、图片、语音、表情
- 支持消息预知：对方正在输入
- 支持消息状态：送达、已读
- 支持消息撤回
- 对接第三方账号系统/多用户切换
- 支持 vue2/vue3
- 注意：运行项目 bytedesk_demo_vue3 之前，首先需要进入项目文件夹执行 yarn 或者 npm install 初始化
SDK源码及Demo下载
- bytedesk_demo_vue2 和 bytedesk_demo_vue3 的分别是vue2和vue3的demo，请选择其中一个即可
- Gitee Demo
- Github Demo
配置步骤说明（共两步）
- 首先：将 components/bytedesk_sdk 文件夹拷贝到自己应用 components 文件夹，
- 然后：在 pages.json 中添加以下几个页面，具体可参考 demo 中 pages.json 文件
{
"path": "components/bytedesk_sdk/chat-kf",
"style": {
"navigationBarTitleText": "微语智能客服",
"navigationBarBackgroundColor":"#007AFF",
"navigationBarTextStyle":"white"
}
},
{
"path": "components/bytedesk_sdk/rate",
"style": {
"navigationBarTitleText": "满意度评价",
"navigationBarBackgroundColor":"#007AFF",
"navigationBarTextStyle":"white"
}
},
{
"path": "components/bytedesk_sdk/webview",
"style": {
"navigationBarTitleText": "微语H5",
"navigationBarBackgroundColor":"#007AFF",
"navigationBarTextStyle":"white"
}
},
{
"path": "components/bytedesk_sdk/leavemsg",
"style": {
"navigationBarTitleText": "留言",
"navigationBarBackgroundColor":"#007AFF",
"navigationBarTextStyle":"white"
}
}
开发步骤说明（共三步）
- 第一步：引入文件。在调用客服的 vue 页面，如：index.vue，引入
import * as bytedesk from "@/components/bytedesk_sdk/js/bytedesk.js";
- 第二步：初始化。在 index.vue 页面 onLoad 函数
// 第二步：初始化
// 获取企业uid，登录后台->客服->渠道->uniapp
// http://www.weiyuai.cn/admin/cs/channel
let orgUid = 'df_org_uid'
bytedesk.init(orgUid);
// 注：如果需要多平台统一用户（用于同步聊天记录等），可使用:
// bytedesk.initWithUidAndNicknameAndAvatar(orgUid, 'myuniappuid', '我是美女', 'https://bytedesk.oss-cn-shenzhen.aliyuncs.com/avatars/girl.png');
// bytedesk.initWithUid(orgUid, 'myuniappuid'); // 其中：uid为自定义uid，可与开发者所在用户系统对接，用于多用户切换
// 具体参数可以参考 @/components/bytedesk_sdk/js/bytedesk.js 文件中接口
- 第三步：开始会话
// 第三步：获取技能组uid，登录后台->客服->渠道->uniapp
// http://www.weiyuai.cn/admin/cs/channel
startChat () {
uni.navigateTo({
url: '../../components/bytedesk_sdk/chat-kf?sid=' + this.workGroupWid + '&type=1'
});
}
- 结束
- 具体请参考 demo 中 index.vue 页面