Flutter集成Zendesk客服插件zendesk_flutter_combination的使用

Zendesk Flutter支持

• Native UI
• 聊天历史
• 答案机器人
• 工单列表

如何使用？

初始化

@Override
void initState() {
  super.initState();
  ZendeskFlutterCombination.initialize(
    appId: "{zendeskApplicationId}",
    clientId: "{zendeskMobileClientId}",
    nameIdentifier: "{customerNameIdentifieer}",
    urlString: "{yourCompanyzendeskDomain}"
  );
}

只需调用一次 initialize() 方法

显示帮助中心

ZendeskFlutterCombination.showHelpCenter();

您可以在 onTap() 中使用

显示工单/请求列表

ZendeskFlutterCombination.showRequestList();

您可以在 onTap() 中使用

显示新请求/工单屏幕

ZendeskFlutterCombination.showRequest();

您可以在 onTap() 中使用

示例代码

以下是一个完整的示例代码，展示如何在Flutter应用中集成Zendesk客服插件。

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:zendesk_flutter_combination/zendesk_flutter_combination.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = '未知';
  final _zendeskFlutterCombinationPlugin = ZendeskFlutterCombination();
  final List<String> channelMessages = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();

    ZendeskFlutterCombination.setMessageHandler((type, arguments) {
      setState(() {
        channelMessages.add("$type - args=$arguments");
      });
    });
  }

  // 平台消息是异步的，所以我们初始化在一个异步方法中。
  Future<void> initPlatformState() async {
    String platformVersion;
    // 平台消息可能会失败，所以我们使用一个try/catch来捕获PlatformException。
    // 我们也处理了消息可能返回null的情况。
    try {
      platformVersion = 
          await _zendeskFlutterCombinationPlugin.getPlatformVersion() ?? '未知平台版本';
    } on PlatformException {
      platformVersion = '获取平台版本失败。';
    }

    // 如果小部件从树中被移除，而异步平台消息正在飞行中，我们希望丢弃回复而不是调用setState来更新我们的非存在的外观。
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Column(children: [
            Text('运行在: $_platformVersion\n'),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(6), // -- 半径
                ),
                elevation: 0,
                primary: Colors.pink,
                minimumSize: const Size.fromHeight(
                    40), // fromHeight 使用double.infinity作为宽度和40作为高度
              ),
              onPressed: () {
                ZendeskFlutterCombination.initialize(
                  appId: "{zendeskApplicationId}",
                  clientId: "{zendeskMobileClientId}",
                  nameIdentifier: "{customerNameIdentifieer}",
                  urlString: "{yourCompanyzendeskDomain}"
                );
              },
              child: Text(
                '初始化',
              ),
            ),
            SizedBox(height: 20,),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(6), // -- 半径
                ),
                elevation: 0,
                primary: Colors.pink,
                minimumSize: const Size.fromHeight(
                    40), // fromHeight 使用double.infinity作为宽度和40作为高度
              ),
              onPressed: () {
                ZendeskFlutterCombination.showHelpCenter();
              },
              child: Text(
                '帮助中心',
              ),
            ),
            SizedBox(height: 20,),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(6), // -- 半径
                ),
                elevation: 0,
                primary: Colors.pink,
                minimumSize: const Size.fromHeight(
                    40), // fromHeight 使用double.infinity作为宽度和40作为高度
              ),
              onPressed: () {
                ZendeskFlutterCombination.showRequestList();
              },
              child: Text(
                '请求列表',
              ),
            ),
            SizedBox(height: 20,),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(6), // -- 半径
                ),
                elevation: 0,
                primary: Colors.pink,
                minimumSize: const Size.fromHeight(
                    40), // fromHeight 使用double.infinity作为宽度和40作为高度
              ),
              onPressed: () {
                ZendeskFlutterCombination.showRequest();
              },
              child: Text(
                '请求',
              ),
            ),
          ]),
        ),
      ),
    );
  }
}