Flutter客户服务插件zendesk_plugin_plus的使用

Flutter客户服务插件zendesk_plugin_plus的使用

zendesk 插件

这是一个用于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('<账户密钥>', '<应用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_plus插件。

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

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

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

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

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

  [@override](/user/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(
                  '初始化示例，请在main.dart中添加正确的密钥',
                  textAlign: TextAlign.center,
                ),
              ),
              MaterialButton(
                onPressed: openChat,
                color: Colors.blueGrey,
                textColor: Colors.white,
                child: const Text('打开聊天'),
              )
            ],
          ),
        ),
      ),
    );
  }

  Future<void> openChat() async {
    try {
      await Zendesk.setVisitorInfo(
          name: 'Text Client',
          email: 'test+client@example.com',
          phoneNumber: '0000000000',
          department: 'Support');
      await Zendesk.startChat();
    } on dynamic catch (ex) {
      print('发生错误 $ex');
    }
  }
}

更多关于Flutter客户服务插件zendesk_plugin_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter客户服务插件zendesk_plugin_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于如何在Flutter项目中使用zendesk_plugin_plus插件来集成Zendesk客户服务功能，下面是一个简单的代码示例，展示了如何初始化插件并进行一些基本操作。

首先，确保你已经在pubspec.yaml文件中添加了zendesk_plugin_plus依赖：

dependencies:
  flutter:
    sdk: flutter
  zendesk_plugin_plus: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤进行初始化和使用：

  1. 初始化Zendesk插件

在你的主应用入口（通常是main.dart）中，初始化Zendesk插件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Zendesk Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ZendeskExampleHome(),
    );
  }
}

class ZendeskExampleHome extends StatefulWidget {
  @override
  _ZendeskExampleHomeState createState() => _ZendeskExampleHomeState();
}

class _ZendeskExampleHomeState extends State<ZendeskExampleHome> {
  @override
  void initState() {
    super.initState();
    _initializeZendesk();
  }

  Future<void> _initializeZendesk() async {
    try {
      // 替换为你的Zendesk账户信息
      final ZendeskConfig config = ZendeskConfig(
        accountId: 'your_account_id', // 替换为你的Zendesk Account ID
        appId: 'your_app_id',         // 替换为你的Zendesk App ID
        clientId: 'your_client_id',   // 替换为你的Zendesk Client ID
        url: 'https://your_zendesk_url.zendesk.com', // 替换为你的Zendesk URL
      );

      await ZendeskPluginPlus.instance.init(config);
      print('Zendesk initialized successfully');
    } catch (e) {
      print('Failed to initialize Zendesk: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Zendesk Integration'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 打开Zendesk聊天窗口
            ZendeskPluginPlus.instance.showChat();
          },
          child: Text('Open Zendesk Chat'),
        ),
      ),
    );
  }
}
  1. 显示聊天窗口

在上面的代码中，当用户点击按钮时，会调用ZendeskPluginPlus.instance.showChat()方法来显示Zendesk聊天窗口。

  1. 处理其他功能

zendesk_plugin_plus插件还提供了其他功能，比如提交票务、查看知识库等。你可以根据官方文档进一步集成这些功能。例如，提交一个新的支持票务：

Future<void> _submitTicket() async {
  try {
    final Ticket ticket = Ticket(
      subject: 'Test Subject',
      description: 'This is a test description.',
      tags: ['test'],
      // 可以添加更多的字段，如请求者信息、自定义字段等
    );

    await ZendeskPluginPlus.instance.submitTicket(ticket);
    print('Ticket submitted successfully');
  } catch (e) {
    print('Failed to submit ticket: $e');
  }
}

你可以在按钮点击事件中调用_submitTicket()方法来提交一个新的支持票务。

请注意，以上代码示例仅展示了基本的集成方法，实际使用中你可能需要根据自己的需求调整配置和代码。同时，确保你遵循了Zendesk的API使用条款和隐私政策。

回到顶部