Skip to content

Bytedesk/bytedesk-uniapp

Repository files navigation

微语-uniapp sdk

Language

部分功能

  • 微语官方技术支持
  • 全部基于 vuejs 开发,不依赖原生 SDK,100%全部开源,支持自定义界面SS
  • 支持 web/h5/小程序/安卓/iOS 等全平台
  • 支持人工客服
  • 支持机器人
  • 支持文字、图片、语音、表情
  • 支持消息预知:对方正在输入
  • 支持消息状态:送达、已读
  • 支持消息撤回
  • 对接第三方账号系统/多用户切换
  • 支持 vue2/vue3
  • 注意:运行项目 bytedesk_demo_vue3 之前,首先需要进入项目文件夹执行 yarn 或者 npm install 初始化

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 页面
首页 聊天 H5

以下步骤为非必须步骤,开发者可根据需要调用

国际化

对话SDK

Project Description Forks Stars
iOS-swift iOS swift GitHub forks GitHub Repo stars
Android Android GitHub forks GitHub Repo stars
Flutter Flutter GitHub forks GitHub Repo stars
React React GitHub forks GitHub Repo stars
UniApp Uniapp GitHub forks GitHub Repo stars
Web/Vue Web/Vue GitHub forks GitHub Repo stars

客户端

技术栈

联系