Flutter在线客服插件bytedesk_kefu的使用

1. 功能特性

• 支持 Android、iOS 和 Web
• 与客服人员聊天
• 购物聊天，发送商品信息
• 发送附言消息
• 检查在线状态
• 获取历史对话
• 消息语音和震动设置
• 与机器人聊天
• 发送和播放视频消息
• 聊天通知

2. 开始使用

2.1 准备工作

2.1.1 复制资源文件夹并添加到 pubspec.yaml

dependencies:
  bytedesk_kefu: ^1.6.0

flutter:
  assets:
    - assets/audio/
    - assets/images/chat/
    - assets/images/feedback/

2.1.2 iOS 配置

在 ios/Runner/Info.plist 文件中添加以下键值：

<key>NSLocalNetworkUsageDescription</key>
<string>Looking for local tcp Bonjour service</string>
<key>NSBonjourServices</key>
<array>
  <string>mqtt.tcp</string>
</array>

2.1.3 Android 配置

在 android/app/src/main/AndroidManifest.xml 文件中添加以下权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

2.2 注册账号

请前往 ByteDesk 官网 注册账号，并获取企业 UID。

2.3 初始化插件

在 main.dart 文件中初始化插件：

import 'package:bytedesk_kefu/bytedesk_kefu.dart';

void main() {
  runApp(const MyApp());

  // 获取企业uid，登录后台->客服->渠道->flutter
  String orgUid = "df_org_uid";
  // 第一步：初始化
  BytedeskKefu.init(orgUid);
  // 如果需要多平台统一用户（用于同步聊天记录等），可使用:
  // BytedeskKefu.initWithUidAndNicknameAndAvatar(orgUid, 'myflutteruid', '我是美女', 'https://bytedesk.oss-cn-shenzhen.aliyuncs.com/avatars/girl.png');
  // BytedeskKefu.initWithUid(orgUid, 'myflutteruid'); // 其中：uid为自定义uid，可与开发者所在用户系统对接，用于多用户切换
}

2.4 启动客服聊天

在需要启动客服聊天的地方调用以下方法：

BytedeskKefu.startWorkGroupChat(context, workGroupWid, "title");

3. 完整示例代码

以下是完整的 main.dart 示例代码：

// ignore_for_file: avoid_print, prefer_interpolation_to_compose_strings

import 'package:bytedesk_kefu/bytedesk_kefu.dart';
import 'package:bytedesk_kefu/util/bytedesk_utils.dart';
import 'package:get/get.dart';
import 'package:flutter/material.dart';

import 'l10n/translations.dart';

void main() {
  runApp(const MyApp());

  // 获取企业uid，登录后台->客服->渠道->flutter
  String orgUid = "df_org_uid";
  // 第一步：初始化
  BytedeskKefu.init(orgUid);
  // 如果需要多平台统一用户（用于同步聊天记录等），可使用:
  // BytedeskKefu.initWithUidAndNicknameAndAvatar(orgUid, 'myflutteruid', '我是美女', 'https://bytedesk.oss-cn-shenzhen.aliyuncs.com/avatars/girl.png');
  // BytedeskKefu.initWithUid(orgUid, 'myflutteruid'); // 其中：uid为自定义uid，可与开发者所在用户系统对接，用于多用户切换
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  static const _mobileWidthThreshold = 500;
  static const _mobileWidth = 420.0;
  static const _mobileHeight = 900.0;
  final _appKey = GlobalKey();
  bool _hasFrame = false;
  bool get _checkSize => BytedeskUtils.isWeb;
  bool _mobileStyle = true;

  @override
  void initState() {
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      key: _appKey,
      debugShowCheckedModeBanner: false, // 去除右上角debug的标签
      home: const ExamplePage(),
      translations: AppTranslations(),
      supportedLocales: AppTranslations.supportedLocales,
      locale: AppTranslations.fallbackLocale,
      fallbackLocale: AppTranslations.fallbackLocale,
      localizationsDelegates: AppTranslations.localizationsDelegates,
      builder: (context, widget) {
        if (_checkSize) {
          final size = Get.size;
          final hasFrame = size.width > _mobileWidthThreshold;
          if (hasFrame) {
            return _buildFrame(widget!);
          }
        }
        return widget!;
      },
    );
  }

  @override
  void didChangeMetrics() {
    if (_checkSize) {
      final size = Get.size;
      final hasFrame = size.width > _mobileWidthThreshold;
      if (_hasFrame != hasFrame) {
        setState(() {
          _hasFrame = hasFrame;
        });
      }
    }
  }

  // 主要用于在web端调试，右上角添加一个按钮，切换宽窄页面
  Widget _buildFrame(Widget app) {
    return Builder(builder: (context) {
      return Scaffold(
        backgroundColor: Theme.of(context).colorScheme.onInverseSurface,
        body: _mobileStyle
            ? Center(
                child: Card(
                  elevation: 10,
                  margin: const EdgeInsets.symmetric(vertical: 16),
                  clipBehavior: Clip.hardEdge,
                  child: SizedBox(
                    height: _mobileHeight,
                    width: _mobileWidth,
                    child: app,
                  ),
                ),
              )
            : app,
        floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _mobileStyle = !_mobileStyle;
            });
          },
          child: Icon(_mobileStyle ? Icons.computer : Icons.phone_android),
        ).marginOnly(top: 16),
      );
    });
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
}

class ExamplePage extends StatelessWidget {
  const ExamplePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ByteDesk 客服示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 启动客服聊天
            BytedeskKefu.startWorkGroupChat(context, "workGroupWid", "标题");
          },
          child: const Text('启动客服聊天'),
        ),
      ),
    );
  }
}

4. 图片展示

图片1	图片2	图片3

5. 自定义UI

如果您需要自定义 UI，可以按照以下步骤操作：

1. 创建一个新的文件夹 vendors。
2. 下载最新源码并放入 vendors 文件夹中。
3. 在 pubspec.yaml 中集成源码：

   bytedesk_kefu:
     path: ./vendors/bytedesk_kefu