Flutter Zendesk支持插件zendesk_helper_plus的使用

zendesk plugin

一个用于Zendesk Chat SDK v2的Flutter插件。

开始使用

Android 设置

在AndroidManifest.xml文件中必须设置兼容的主题。

示例的Android设置遵循文章中描述的模式。

iOS 设置

在目标的“构建阶段”中创建一个新的“运行脚本阶段”。

此脚本应为项目“构建阶段”中的最后一步。将以下代码片段粘贴到脚本文本字段中：

"${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/ChatSDK.framework/strip-frameworks.sh"

部署目标 >= 10.0

使用方法

初始化插件

await Zendesk.initialize('<account key>', '<application id>');

设置访客信息（可选）

await Zendesk.setVisitorInfo(
    name: 'Text Client',
    email: 'test+client@example.com',
    phoneNumber: '0000000000',
    department: 'Support',
);

添加和移除标签

await Zendesk.addTags(['tag1', 'tag2', 'tag3']);
await Zendesk.removeTags(['tag1', 'tag3']);

// 结果将是仅保留'tag2'

打开聊天客户端

Zendesk.startChat(primaryColor: Colors.red, isDarkTheme: true);

// 注意：primaryColor 和 isDarkTheme 只会配置iOS。Android的AppBar颜色由应用主题控制。

完整示例代码

以下是一个完整的示例代码，展示了如何使用zendesk_helper_plus插件。

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late final TextEditingController _tokenController;

  [@override](/user/override)
  void initState() {
    super.initState();
    _tokenController = TextEditingController();
    initZendesk();
  }

  [@override](/user/override)
  void dispose() {
    _tokenController.dispose();
    super.dispose();
  }

  Future<void> initZendesk() async {
    if (!mounted) {
      return;
    }
    const _accountKey = String.fromEnvironment(
      'ACCOUNT_KEY',
      defaultValue: 'C4NkxGBoxHSTMW3Gm3gznZ6AxIqYXWkZ',
    );
    const _appId = String.fromEnvironment(
      'APP_ID',
      defaultValue: 'ff92947363297c35ad960e50edc747e7a19dbbd7235a852e',
    );

    await Zendesk.initialize(_accountKey, _appId);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Zendesk Helper Plus - Plugin Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Padding(
                padding: EdgeInsets.all(16),
                child: Text(
                  'Initialize example with proper\nkeys in main.dart',
                  textAlign: TextAlign.center,
                ),
              ),
              Container(
                margin: const EdgeInsets.all(16),
                child: TextField(
                  controller: _tokenController,
                  decoration: const InputDecoration(
                    hintText: 'Enter your token',
                    border: OutlineInputBorder(),
                  ),
                ),
              ),
              MaterialButton(
                onPressed: openChat,
                color: Colors.blueGrey,
                textColor: Colors.white,
                child: const Text('Open Chat'),
              )
            ],
          ),
        ),
      ),
    );
  }

  Future<void> openChat() async {
    try {
      if (_tokenController.text.isEmpty) {
        await Zendesk.setVisitorInfo(
            name: 'Text Client',
            email: 'test+client@example.com',
            phoneNumber: '0000000000',
            department: 'Support');
      } else {
        await Zendesk.setIdentity(_tokenController.text.trim());
      }
      await Zendesk.startChat(primaryColor: Colors.red);
    } catch (ex) {
      print('An error occurred $ex');
    }
  }
}