Flutter客服集成插件zendesk_classic的使用

Flutter客服集成插件zendesk_classic的使用

zendesk_classic

Zendesk 插件。

License: MIT Pub

开始使用

将依赖项添加到您的Flutter项目中
flutter pub add zendesk_classic
SDK Android IOS
支持SDK ✅ ❌
支持聊天 ✅ ✅
支持机器人 ✅ ❌
Zendesk 聊天支持
Future<void> initializeChat() async {
  try {
    await _zendeskClassicPlugin.initZendeskChat('Your Zendesk Account Key',
        barTintColor: 0xFFFF0000, // 状态栏颜色
        tintColor: 0xFFFFFFFF, // 文本和图标颜色
        backgroundColor: 0xFF000000, // 背景颜色
        botName: 'CompanyName'); // 机器人名称
  } on PlatformException {
    _platformVersion = "Failed to get platform version";
  }
}

您可以在Zendesk仪表板中的Dashboard > Simulate Conversation下找到聊天密钥。在URL中，您可以找到如下所示的密钥： https://www.zopim.com/widget/livechat.html?Accountkey= Your Zendesk Account Key

Android

请将以下主题添加到styles.xml文件中，该文件位于Android项目的res/values文件夹中。

<style name="ZendeskSdkTheme" parent="@style/Theme.AppCompat">
    <item name="android:windowBackground">?android:colorBackground</item>
    <item name="colorAccent">@color/zui_color_red_600</item>
    <item name="colorPrimary">@color/zui_color_red_600</item>
    <item name="colorPrimaryDark">@color/zui_color_red_600</item>
</style>

请在android/app/build.gradle的app级别中添加以下代码：

dependencies {
    implementation 'androidx.appcompat:appcompat:1.4.1'
}

iOS

无需额外设置，iOS插件开箱即用。

示例代码

以下是完整的示例代码：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:zendesk_classic/zendesk_classic.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

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

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  final _zendeskClassicPlugin = ZendeskClassic();

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState(); // 初始化平台状态
  }

  // 平台消息是异步的，因此我们在异步方法中初始化。
  Future<void> initPlatformState() async {
    try {
      await _zendeskClassicPlugin.initZendeskChat('Your Zendesk Account Key',
          barTintColor: 0xFFFF0000,
          tintColor: 0xFFFFFFFF,
          backgroundColor: 0xFF000000,
          botName: 'CompanyName');
    } on PlatformException {
      _platformVersion = "Failed to get platform version";
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Text('Running on: $_platformVersion\n'),
        ),
      ),
    );
  }
}

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

1 回复

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


在Flutter应用中集成Zendesk Classic客服插件可以通过使用zendesk_classic包来实现。以下是一个基本的使用案例，展示了如何集成和使用该插件。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加zendesk_classic依赖：

dependencies:
  flutter:
    sdk: flutter
  zendesk_classic: ^最新版本号  # 请替换为最新版本号

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

2. 配置Zendesk

在Flutter应用的入口文件（通常是main.dart）中，你需要配置Zendesk。这通常涉及到设置Zendesk的SDK密钥和其他相关配置。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 配置Zendesk
    final Zendesk zendesk = Zendesk(
      sdkKey: 'your_zendesk_sdk_key',  // 请替换为你的Zendesk SDK密钥
      clientId: 'your_client_id',      // 如果需要的话，提供客户端ID
      serverUrl: 'https://your_zendesk_url.zendesk.com',  // 请替换为你的Zendesk服务器URL
    );

    // 初始化Zendesk（通常在应用启动时执行一次）
    zendesk.init();

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Zendesk Classic Integration'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 打开Zendesk客服聊天界面
              zendesk.showChat();
            },
            child: Text('Open Zendesk Chat'),
          ),
        ),
      ),
    );
  }
}

3. 处理用户身份验证（可选）

如果你的Zendesk实例需要用户身份验证，你可能需要在调用showChat()之前设置用户信息。这可以通过setUserIdentity方法实现：

void setUserIdentity(Zendesk zendesk) {
  final UserIdentity userIdentity = UserIdentity(
    name: '用户姓名',
    email: 'user@example.com',
    // 其他可选字段，如 phone, externalId 等
  );
  zendesk.setUserIdentity(userIdentity);
}

你可以在应用中的适当位置调用setUserIdentity方法，例如在用户登录成功后。

4. 完整示例

将上述所有部分整合到一起，你会得到一个完整的示例应用：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Zendesk zendesk = Zendesk(
      sdkKey: 'your_zendesk_sdk_key',
      clientId: 'your_client_id',
      serverUrl: 'https://your_zendesk_url.zendesk.com',
    );

    // 初始化Zendesk
    WidgetsBinding.instance.addPostFrameCallback((_) {
      zendesk.init();
      // 设置用户身份（可选）
      setUserIdentity(zendesk);
    });

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Zendesk Classic Integration'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              zendesk.showChat();
            },
            child: Text('Open Zendesk Chat'),
          ),
        ),
      ),
    );
  }
}

void setUserIdentity(Zendesk zendesk) {
  final UserIdentity userIdentity = UserIdentity(
    name: '用户姓名',
    email: 'user@example.com',
  );
  zendesk.setUserIdentity(userIdentity);
}

请注意，上述代码中的your_zendesk_sdk_key、your_client_id和https://your_zendesk_url.zendesk.com需要替换为你实际的Zendesk配置信息。

这个示例展示了如何在Flutter应用中集成和使用Zendesk Classic客服插件。根据你的实际需求，你可能需要调整配置和处理更多的边缘情况。

回到顶部