diff --git a/bytedesk_demo/README.md b/bytedesk_demo/README.md index 0a458a2..77552b8 100644 --- a/bytedesk_demo/README.md +++ b/bytedesk_demo/README.md @@ -20,6 +20,20 @@ +## 注意 + +- 修改安卓 android/build.gradle + +```bash +# Android +buildscript { + ... + dependencies { + classpath 'com.android.tools.build:gradle:3.5.4' + } +} +``` + ## 集成步骤 ### 第一步 @@ -50,8 +64,10 @@ | image1 | image2 | image3 | | :----------: | :----------: | :----------: | | | | | -| | | | +| | | | +| | || ### 其他 +- [下载 ApkDemo](https://bytedesk.oss-cn-shenzhen.aliyuncs.com/apk/bytedesk-android-sdk-demo.apk) - 技术支持QQ 3群: 825257535 diff --git a/bytedesk_demo/lib/main.dart b/bytedesk_demo/lib/main.dart index 2b4996a..d5fe82f 100644 --- a/bytedesk_demo/lib/main.dart +++ b/bytedesk_demo/lib/main.dart @@ -65,7 +65,7 @@ class _MyAppState extends State with WidgetsBindingObserver { title: Text('联系客服'), trailing: Icon(Icons.keyboard_arrow_right), onTap: () { - // 第三步：联系客服，完毕 + // 第二步：联系客服，完毕 Navigator.of(context) .push(new MaterialPageRoute(builder: (context) { return new ChatTypePage(); @@ -188,6 +188,7 @@ class _MyAppState extends State with WidgetsBindingObserver { nickname: event.message.user.nickname, content: event.message.content, onReply: () { + // OverlaySupportEntry.of(context).dismiss(); // 进入客服页面，支持自定义页面标题 BytedeskKefu.startChatThread(context, event.message.thread, title: '客服会话'); @@ -197,8 +198,12 @@ class _MyAppState extends State with WidgetsBindingObserver { } } else if (event.message.type == BytedeskConstants.MESSAGE_TYPE_IMAGE) { print('图片消息:' + event.message.imageUrl); + } else if (event.message.type == BytedeskConstants.MESSAGE_TYPE_VOICE) { + print('语音消息:' + event.message.voiceUrl); } else if (event.message.type == BytedeskConstants.MESSAGE_TYPE_VIDEO) { - print('视频消息:' + event.message.imageUrl); + print('视频消息:' + event.message.videoUrl); + } else if (event.message.type == BytedeskConstants.MESSAGE_TYPE_FILE) { + print('文件消息:' + event.message.fileUrl); } else { print('其他类型消息'); } @@ -222,6 +227,7 @@ class _MyAppState extends State with WidgetsBindingObserver { // } // } + // 振动 void vibrate() async { if (await Vibration.hasVibrator()) { Vibration.vibrate(); diff --git a/bytedesk_demo/lib/page/chat_type_page.dart b/bytedesk_demo/lib/page/chat_type_page.dart index 05e09de..836f5e9 100644 --- a/bytedesk_demo/lib/page/chat_type_page.dart +++ b/bytedesk_demo/lib/page/chat_type_page.dart @@ -28,102 +28,170 @@ class _ChatTypePageState extends State { elevation: 0, ), body: ListView( - children: ListTile.divideTiles( - context: context, - tiles: [ - ListTile( - title: Text('技能组客服'), - trailing: Icon(Icons.keyboard_arrow_right), - onTap: () { - BytedeskKefu.startWorkGroupChat(context, _workGroupWid, "技能组客服-默认人工"); - }, - ), - ListTile( - title: Text('技能组客服-机器人'), - trailing: Icon(Icons.keyboard_arrow_right), - onTap: () { - BytedeskKefu.startWorkGroupChat(context, _workGroupWidRobot, "技能组客服-默认机器人"); - }, - ), - ListTile( - title: Text('技能组客服-电商'), - trailing: Icon(Icons.keyboard_arrow_right), - onTap: () { - // 商品信息，type/title/content/price/url/imageUrl/id/categoryCode - var custom = json.encode({ - "type": BytedeskConstants.MESSAGE_TYPE_COMMODITY, - "title": "商品标题", - "content": "商品详情", - "price": "9.99", - "url": "https://item.m.jd.com/product/12172344.html", - "imageUrl": "https://bytedesk.oss-cn-shenzhen.aliyuncs.com/images/123.webp", - "id": 123, - "categoryCode": "100010003", - "client": "flutter" - }); - BytedeskKefu.startWorkGroupChatShop(context, _workGroupWid, "技能组客服-电商", custom); - }, - ), - ListTile( - title: Text('技能组客服-附言'), - trailing: Icon(Icons.keyboard_arrow_right), - onTap: () { - BytedeskKefu.startWorkGroupChatPostscript(context, _workGroupWid, "技能组客服-附言", "随便说点什么吧，我会自动发送给客服"); - }, - ), - Container( - height: 20, - ), - ListTile( - title: Text('指定一对一客服'), - trailing: Icon(Icons.keyboard_arrow_right), - onTap: () { - BytedeskKefu.startAppointedChat(context, _agentUid, "指定客服"); - }, - ), - ListTile( - title: Text('指定一对一客服-电商'), - trailing: Icon(Icons.keyboard_arrow_right), - onTap: () { - // 商品信息，type/title/content/price/url/imageUrl/id/categoryCode - var custom = json.encode({ - "type": BytedeskConstants.MESSAGE_TYPE_COMMODITY, - "title": "商品标题", - "content": "商品详情", - "price": "9.99", - "url": "https://item.m.jd.com/product/12172344.html", - "imageUrl": "https://bytedesk.oss-cn-shenzhen.aliyuncs.com/images/123.webp", - "id": 123, - "categoryCode": "100010003", - "client": "flutter" - }); - BytedeskKefu.startAppointedChatShop(context, _agentUid, "指定客服", custom); - }, - ), - ListTile( - title: Text('指定一对一客服-附言'), - trailing: Icon(Icons.keyboard_arrow_right), - onTap: () { - BytedeskKefu.startAppointedChatPostscript(context, _agentUid, "指定客服", "随便说点什么吧，我会自动发送给客服"); - }, - ), - Container( - height: 20, - ), - ListTile( - title: Text('H5网页会话'), - trailing: Icon(Icons.keyboard_arrow_right), - onTap: () { - print('h5 chat'); - // 注意: 登录后台->客服管理->技能组(或客服账号)->获取客服代码 获取相应URL - String url = "http://www.bytedesk.com/chat?sub=vip&uid=201808221551193&wid=201807171659201&type=workGroup&aid=&hidenav=1&ph=ph"; - String title = 'H5在线客服演示'; - BytedeskKefu.startH5Chat(context, url, title); - }, - ), - ] - ).toList(), + children: ListTile.divideTiles(context: context, tiles: [ + ListTile( + title: Text('技能组客服'), + trailing: Icon(Icons.keyboard_arrow_right), + onTap: () { + BytedeskKefu.startWorkGroupChat( + context, _workGroupWid, "技能组客服-默认人工"); + }, + ), + ListTile( + title: Text('技能组客服-机器人'), + trailing: Icon(Icons.keyboard_arrow_right), + onTap: () { + BytedeskKefu.startWorkGroupChat( + context, _workGroupWidRobot, "技能组客服-默认机器人"); + }, + ), + ListTile( + title: Text('技能组客服-电商'), + trailing: Icon(Icons.keyboard_arrow_right), + onTap: () { + // 商品信息，type/title/content/price/url/imageUrl/id/categoryCode + // 注意：长度不能大于500字符 + var custom = json.encode({ + "type": BytedeskConstants.MESSAGE_TYPE_COMMODITY, // 不能修改 + "title": "商品标题", // 可自定义, 类型为字符串 + "content": "商品详情", // 可自定义, 类型为字符串 + "price": "9.99", // 可自定义, 类型为字符串 + "url": + "https://item.m.jd.com/product/12172344.html", // 必须为url网址, 类型为字符串 + "imageUrl": + "https://bytedesk.oss-cn-shenzhen.aliyuncs.com/images/123.webp", //必须为图片网址, 类型为字符串 + "id": 123, // 可自定义 + "categoryCode": "100010003", // 可自定义, 类型为字符串 + "client": "flutter" // 可自定义, 类型为字符串 + }); + BytedeskKefu.startWorkGroupChatShop( + context, _workGroupWid, "技能组客服-电商", custom); + }, + ), + ListTile( + title: Text('技能组客服-电商-回调'), + trailing: Icon(Icons.keyboard_arrow_right), + onTap: () { + // 商品信息，type/title/content/price/url/imageUrl/id/categoryCode + // 注意：长度不能大于500字符 + var custom = json.encode({ + "type": BytedeskConstants.MESSAGE_TYPE_COMMODITY, // 不能修改 + "title": "商品标题", // 可自定义, 类型为字符串 + "content": "商品详情", // 可自定义, 类型为字符串 + "price": "9.99", // 可自定义, 类型为字符串 + "url": + "https://item.m.jd.com/product/12172344.html", // 必须为url网址, 类型为字符串 + "imageUrl": + "https://bytedesk.oss-cn-shenzhen.aliyuncs.com/images/123.webp", //必须为图片网址, 类型为字符串 + "id": 123, // 可自定义 + "categoryCode": "100010003", // 可自定义, 类型为字符串 + "client": "flutter", // 可自定义, 类型为字符串 + // 可自定义添加key:value, 客服端不可见，可用于回调原样返回 + "other1": "", // 可另外添加自定义字段，客服端不可见，可用于回调原样返回 + "other2": "", // 可另外添加自定义字段，客服端不可见，可用于回调原样返回 + "other3": "", // 可另外添加自定义字段，客服端不可见，可用于回调原样返回 + }); + BytedeskKefu.startWorkGroupChatShopCallback( + context, _workGroupWid, "技能组客服-电商-回调", custom, (value) { + print('value为custom参数原样返回 $value'); + // 主要用途：用户在聊天页面点击商品消息，回调此接口，开发者可在此打开进入商品详情页 + }); + }, + ), + ListTile( + title: Text('技能组客服-附言'), + trailing: Icon(Icons.keyboard_arrow_right), + onTap: () { + BytedeskKefu.startWorkGroupChatPostscript( + context, _workGroupWid, "技能组客服-附言", "随便说点什么吧，我会自动发送给客服"); + }, + ), + Container( + height: 20, + ), + ListTile( + title: Text('指定一对一客服'), + trailing: Icon(Icons.keyboard_arrow_right), + onTap: () { + BytedeskKefu.startAppointedChat(context, _agentUid, "指定一对一客服"); + }, + ), + ListTile( + title: Text('指定一对一客服-电商'), + trailing: Icon(Icons.keyboard_arrow_right), + onTap: () { + // 商品信息，type/title/content/price/url/imageUrl/id/categoryCode + // 注意：长度不能大于500字符 + var custom = json.encode({ + "type": BytedeskConstants.MESSAGE_TYPE_COMMODITY, + "title": "商品标题", + "content": "商品详情", + "price": "9.99", + "url": "https://item.m.jd.com/product/12172344.html", + "imageUrl": + "https://bytedesk.oss-cn-shenzhen.aliyuncs.com/images/123.webp", + "id": 123, + "categoryCode": "100010003", + "client": "flutter" + }); + BytedeskKefu.startAppointedChatShop( + context, _agentUid, "指定一对一客服-电商", custom); + }, + ), + ListTile( + title: Text('指定一对一客服-电商-回调'), + trailing: Icon(Icons.keyboard_arrow_right), + onTap: () { + // 商品信息，type/title/content/price/url/imageUrl/id/categoryCode + // 注意：长度不能大于500字符 + var custom = json.encode({ + "type": BytedeskConstants.MESSAGE_TYPE_COMMODITY, + "title": "商品标题", + "content": "商品详情", + "price": "9.99", + "url": "https://item.m.jd.com/product/12172344.html", + "imageUrl": + "https://bytedesk.oss-cn-shenzhen.aliyuncs.com/images/123.webp", + "id": 123, + "categoryCode": "100010003", + "client": "flutter", + // 可自定义添加key:value, 客服端不可见，可用于回调原样返回 + "other1": "", // 可另外添加自定义字段，客服端不可见，可用于回调原样返回 + "other2": "", // 可另外添加自定义字段，客服端不可见，可用于回调原样返回 + "other3": "", // 可另外添加自定义字段，客服端不可见，可用于回调原样返回 + }); + BytedeskKefu.startAppointedChatShopCallback( + context, _agentUid, "指定一对一客服-电商-回调", custom, (value) { + print('value为custom参数原样返回 $value'); + // 主要用途：用户在聊天页面点击商品消息，回调此接口，开发者可在此打开进入商品详情页 + }); + }, + ), + ListTile( + title: Text('指定一对一客服-附言'), + trailing: Icon(Icons.keyboard_arrow_right), + onTap: () { + BytedeskKefu.startAppointedChatPostscript( + context, _agentUid, "指定一对一客服-附言", "随便说点什么吧，我会自动发送给客服"); + }, + ), + Container( + height: 20, + ), + ListTile( + title: Text('H5网页会话'), + trailing: Icon(Icons.keyboard_arrow_right), + onTap: () { + print('h5 chat'); + // 注意: 登录后台->客服管理->技能组(或客服账号)->获取客服代码 获取相应URL + String url = + "http://www.bytedesk.com/chat?sub=vip&uid=201808221551193&wid=201807171659201&type=workGroup&aid=&hidenav=1&ph=ph"; + String title = 'H5在线客服演示'; + BytedeskKefu.startH5Chat(context, url, title); + }, + ), + ]).toList(), ), ); } -} \ No newline at end of file +} diff --git a/bytedesk_demo/lib/page/history_thread_page.dart b/bytedesk_demo/lib/page/history_thread_page.dart index 02dccd4..48ed2f1 100644 --- a/bytedesk_demo/lib/page/history_thread_page.dart +++ b/bytedesk_demo/lib/page/history_thread_page.dart @@ -10,7 +10,9 @@ class HistoryThreadPage extends StatefulWidget { _HistoryThreadPageState createState() => _HistoryThreadPageState(); } +// TODO: 点击thread会话直接进入对话页面 class _HistoryThreadPageState extends State { + // int _page = 0; int _size = 20; List _historyThreadList = []; @@ -20,7 +22,6 @@ class _HistoryThreadPageState extends State { _getVisitorThreads(); super.initState(); } - // @override Widget build(BuildContext context) { @@ -36,6 +37,10 @@ class _HistoryThreadPageState extends State { leading: Image.network(_historyThreadList[index].avatar), title: Text('${_historyThreadList[index].nickname}, ${_historyThreadList[index].timestamp}'), subtitle: Text('${_historyThreadList[index].content}'), + onTap: () { + // 进入客服页面 + BytedeskKefu.startChatThread(context, _historyThreadList[index]); + }, ), itemCount: _historyThreadList.length, ), @@ -52,7 +57,7 @@ class _HistoryThreadPageState extends State { } Future _onRefresh() async { - _page++; _getVisitorThreads(); + _page++; } } diff --git a/bytedesk_demo/postscript.png b/bytedesk_demo/postscript.png new file mode 100644 index 0000000..97a2858 Binary files /dev/null and b/bytedesk_demo/postscript.png differ diff --git a/bytedesk_demo/pubspec.yaml b/bytedesk_demo/pubspec.yaml index d3c442b..110fe90 100644 --- a/bytedesk_demo/pubspec.yaml +++ b/bytedesk_demo/pubspec.yaml @@ -28,7 +28,7 @@ dependencies: # https://pub.dev/packages/event_bus event_bus: ^1.1.1 # toast https://pub.dev/packages/fluttertoast - fluttertoast: ^7.1.1 + fluttertoast: ^7.1.4 # 消息设置switch https://pub.dev/packages/list_tile_switch list_tile_switch: ^0.0.2 # 应用内-顶部通知栏 https://pub.dev/packages/overlay_support/ @@ -40,7 +40,7 @@ dependencies: # 请在ios/Podfile中添加：use_frameworks! vibration: ^1.7.2 # https://pub.dev/packages/bytedesk_kefu - bytedesk_kefu: ^0.3.1 + bytedesk_kefu: ^0.3.8 # The following adds the Cupertino Icons font to your application. diff --git a/bytedesk_demo/shop.png b/bytedesk_demo/shop.png new file mode 100644 index 0000000..0759613 Binary files /dev/null and b/bytedesk_demo/shop.png differ