Flutter客户服务插件zendesk_plugin的使用

zendesk plugin

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

Getting Started

Android Setup

你必须在AndroidManifest.xml文件中设置一个兼容的主题。例如：

<application
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">

iOS Setup

在你的目标的“Build Phases”中创建一个新的“Run Scripts Phase”。

这个脚本应该是项目“Build Phases”的最后一步。将以下代码片段粘贴到脚本文本字段中：

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

Deployment Target >= 10.0

Usage

初始化插件

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);

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

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用zendesk_plugin：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    initZendesk();
  }

  Future<void> initZendesk() async {
    if (!mounted) {
      return;
    }
    await Zendesk.initialize('<your_account_key>', '<your_application_id>');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Zendesk Chat Plugin'),
        ),
        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,
                ),
              ),
              MaterialButton(
                onPressed: openChat,
                color: Colors.blueGrey,
                textColor: Colors.white,
                child: const Text('Open Chat'),
              )
            ],
          ),
        ),
      ),
    );
  }

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

说明

1. 初始化插件：在initState方法中调用Zendesk.initialize方法，传入你的账户密钥和应用ID。
2. 设置访客信息：在openChat方法中调用Zendesk.setVisitorInfo方法，设置访客的姓名、电子邮件、电话号码和部门。
3. 打开聊天客户端：在openChat方法中调用Zendesk.startChat方法，设置聊天窗口的主题颜色。

通过以上步骤，你可以在Flutter应用中集成并使用Zendesk Chat插件。希望这个示例对你有所帮助！