Flutter客服集成插件zendesk_helper的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter客服集成插件zendesk_helper的使用

插件介绍

zendesk_helper 是一个用于集成 Zendesk Chat SDK v2 的的 Flutter 插件。它可以帮助开发者轻松地在 Flutter 应用中实现与 Zendesk 聊天系统的集成。

安装和设置

  1. Android 设置

    • 首先，确保你的项目已经添加了 flutter_plugin_android_lifecycle 和 google_services 插件。
    • 在 AndroidManifest.xml 文件中添加兼容的主题：
      <application
    android:theme="@style/AppTheme"
    ...>
</application>
    • 示例 Android 设置遵循上述描述的模式。

  2. iOS 设置

    • 创建一个新的 “Run Scripts Phase” 在目标的 “Build Phases” 中。
    • 将以下脚本粘贴到脚本文本字段中：
      "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_PATH}/ChatSDK.framework/strip-frameworks.sh"
    • 部署目标版本大于等于 1=1 10.0。

使用示例

import 'package:flutter/material.dart';
import 'package:zendesk_helper/zendesk_helper.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;
    }
    const _accountKey = 'C4NkxGHSTMW3GznZ6AxIqYXWkZ';
    const _appId = 'ff92947363297c35ad960e50edc747e7a19dbbd7235a852e';

    await Zendesk.initialize(_accountKey, _appId);
  }

  [@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(
                  '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);
    } on dynamic catch (ex) {
      print('An error occurred $ex');
    }
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter项目中集成并使用zendesk_helper插件来进行客服集成的代码示例。这个示例将展示如何初始化插件、设置用户信息以及打开一个聊天窗口。

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

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

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

接下来，在你的Flutter项目中，你可以按照以下步骤进行集成：

1. 初始化插件

在你的main.dart文件或适当的初始化位置，初始化ZendeskHelper插件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化ZendeskHelper
    ZendeskHelper.instance.init(
      accountId: "你的Zendesk账号ID",
      appName: "你的应用名称",
      chat: ChatConfiguration(
        key: "你的聊天密钥",
        // 其他可选配置
      ),
      contactUs: ContactUsConfiguration(
        // 可选配置
      ),
      helpCenter: HelpCenterConfiguration(
        // 可选配置
      ),
      requestACallback: RequestACallbackConfiguration(
        // 可选配置
      ),
      // 其他配置...
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Zendesk Helper Example'),
        ),
        body: Center(
          child: ZendeskButtonWidget(),
        ),
      ),
    );
  }
}

class ZendeskButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // 打开聊天窗口
        ZendeskHelper.instance.showChat();
      },
      child: Text('Open Zendesk Chat'),
    );
  }
}

2. 设置用户信息

在实际应用中，你可能需要根据用户登录状态来设置用户信息。你可以在用户登录后调用以下方法来设置用户信息：

void setZendeskUserInfo(String userId, String userName, String userEmail) {
  ZendeskHelper.instance.setUser(
    userId: userId,
    name: userName,
    email: userEmail,
  );
}

你可以在用户登录成功的回调中调用这个函数，例如：

// 假设有一个用户登录函数
void userLogin(String userId, String userName, String userEmail) async {
  // 执行登录逻辑...

  // 登录成功后设置Zendesk用户信息
  setZendeskUserInfo(userId, userName, userEmail);
}

3. 打开聊天窗口

如上面的ZendeskButtonWidget所示，你可以通过调用ZendeskHelper.instance.showChat()来打开一个聊天窗口。

注意事项

  • 确保你已经在Zendesk后台配置了相应的应用和聊天密钥。
  • 根据你的实际需求，你可能需要配置更多的选项，如帮助中心、联系我们等，具体请参考zendesk_helper插件的官方文档。
  • 在实际项目中，处理用户信息和敏感数据时，请确保遵守相关的隐私政策和安全规范。

通过以上步骤，你应该能够在Flutter项目中成功集成并使用zendesk_helper插件来进行客服集成。

回到顶部