Flutter腾讯云客服插件tencent_cloud

Flutter腾讯云客服插件tencent_cloud_customer的使用

Tencent Cloud Desk Customer UIKit 是一个专门为腾讯云桌面客户服务中心设计的Flutter库。通过少量的代码，您可以实现一个专业化的聊天界面，以满足智能客户服务场景的需求。该插件消除了复杂的聊天集成管理需求，提供了可定制且高效的客户交互解决方案。

关键特性

专为客户服务场景设计： 针对UI、交互和功能进行了优化设计，以提升智能客户服务体验。
轻松集成： 只需几行代码即可添加一个功能齐全的客户服务模块。
可配置性： 提供全局和会话级别的配置，以适应您的特定需求。

环境要求

环境

Flutter版本: 3.24及以上
平台支持: 支持模拟器和物理设备

注意： 如果您的项目使用的Flutter版本低于3.24，强烈建议升级。对于较旧的Flutter版本，建议使用IM UIKit和客户服务插件的组合。

前置条件

确保已完成必要的后端设置：

添加客户服务代理。
配置技能组。
创建会话服务流程。

有关这些步骤的更多信息，请参阅腾讯云桌面的快速入门指南。

安装

在项目中添加tencent_cloud_customer包：

flutter pub add tencent_cloud_customer

如何使用

1. 初始化客户服务SDK

调用init方法初始化SDK并配置全局设置。您需要提供腾讯云聊天凭证（SDKAppID、UserID、UserSig）进行身份验证。

示例：

import 'package:tencent_cloud_customer/tencent_cloud_customer.dart';

TencentCloudCustomer.init(
  sdkAppID: "SDKAppID", // 您的SDKAppID来自腾讯云聊天控制台
  userID: "userID", // 用于认证的UserID
  userSig: "userSig", // 用于认证的UserSig
  config: TencentCloudCustomerConfig(), // 可选：默认全局配置，适用于所有客户服务体验
);

2. 打开客户服务聊天界面

使用navigate方法打开客户服务聊天页面。会话特定配置可以覆盖全局默认设置，以便更精细地控制。

示例：

import 'package:tencent_cloud_customer/tencent_cloud_customer.dart';

TencentCloudCustomer.navigate(
  context: context, // Flutter的BuildContext
  customerServiceID: "@customer_service_account", // 要发起聊天的客户服务账号ID
  config: TencentCloudCustomerConfig(), // 可选：此会话特有的附加配置
);

示例工作流

使用聊天凭证初始化SDK。
在应用程序中添加navigate方法以打开聊天页面。
根据客户服务需求，全局或按会话自定义配置。

为什么选择Tencent Cloud Desk Customer UIKit？

这个库专门简化了将客户服务功能集成到Flutter应用的过程。凭借直观的API和强大的自定义选项，Tencent Cloud Desk Customer UIKit 可以减少开发时间，同时为客户提供优质的交互体验。

学习更多

请参阅官方的腾讯云桌面文档，获取详细的指导。

示例代码

import 'package:example/utils/generate_userSig.dart';
import 'package:flutter/material.dart';
import 'package:tencent_cloud_customer/tencent_cloud_customer.dart';

import 'config.dart';

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

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

  // 这个小部件是您的应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '腾讯云桌面演示',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF0052D9)),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _userIdController = TextEditingController();
  bool _isLoggedIn = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('腾讯云桌面'),
      ),
      body: GestureDetector(
        onTap: (){
          FocusScope.of(context).unfocus();
        },
        child: Container(
          color: Colors.transparent,
          padding: const EdgeInsets.all(32.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // Logo
              Image.asset(
                'assets/logo.png', // 替换为您自己的logo路径
                height: 48,
                width: 48,
              ),
              const SizedBox(height: 32),

              // 介绍文本
              Text(
                '利用我们的桌面解决方案提供世界一流的客户服务，旨在快速解决客户问题并提高您平台上的满意度。',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 14, color: Theme.of(context).colorScheme.onSurfaceVariant),
              ),
              const SizedBox(height: 62),

              // 用户ID输入框
              TextField(
                controller: _userIdController,
                decoration: InputDecoration(
                  labelText: '输入UserID',
                  labelStyle: const TextStyle(fontSize: 14),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  prefixIcon: const Icon(Icons.person),
                ),
                style: const TextStyle(fontSize: 14),
              ),
              const SizedBox(height: 12),

              // 第一阶段按钮：初始化和登录
              ElevatedButton(
                onPressed: _isLoggedIn ? null : () async {
                  final userId = _userIdController.text.trim();
                  if (userId.isNotEmpty) {
                    final res = await TencentCloudCustomer.init(
                      sdkAppID: TencentCloudDeskCustomerDemoConfig.sdkAppID,
                      userID: userId,
                      userSig: GenerateDevUsersigForTest(
                        sdkappid: TencentCloudDeskCustomerDemoConfig.sdkAppID,
                        key: TencentCloudDeskCustomerDemoConfig.secret,
                      ).genSig(identifier: userId, expire: 999999),
                      config: TencentCloudCustomerConfig(
                        useMessageReadReceipt: true,
                      ),
                    );
                    if (res.code == 0) {
                      setState(() {
                        _isLoggedIn = true;
                      });
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text('登录成功！')),
                      );
                    } else {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text('登录失败: ${res.desc}')),
                      );
                    }
                  } else {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('请输入有效的UserID')),
                    );
                  }
                },
                style: ElevatedButton.styleFrom(
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12.0),
                  ),
                ),
                child: const Text(
                  '第一阶段：初始化和登录',
                  style: TextStyle(fontSize: 14),
                ),
              ),
              const SizedBox(height: 8),
              const Text(
                '使用`TencentCloudCustomer.init`来初始化客户服务UIKit，配置全局选项，并登录。',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 12, color: Colors.grey),
              ),
              const SizedBox(height: 48),

              // 第二阶段按钮：开始聊天
              ElevatedButton(
                onPressed: _isLoggedIn
                    ? () {
                  TencentCloudCustomer.navigate(
                    customerServiceID: TencentCloudDeskCustomerDemoConfig.customerServiceID,
                    context: context,
                  );
                }
                    : null,
                style: ElevatedButton.styleFrom(
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12.0),
                  ),
                ),
                child: const Text(
                  '第二阶段：开始聊天',
                  style: TextStyle(fontSize: 14),
                ),
              ),
              const SizedBox(height: 8),
              const Text(
                '使用`TencentCloudCustomer.navigate`来与特定的客户服务账号开启聊天，并配置单独的会话设置。',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 12, color: Colors.grey),
              ),
            ],
          ),
        ),
      ),
    );
  }

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

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

ionicwang 1楼•1 天前

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

当然，以下是一个关于如何在Flutter项目中使用tencent_cloud_customer插件的示例代码。这个插件假设是用于集成腾讯云客服服务的。请注意，具体实现可能会根据插件的更新和腾讯云客服API的变化有所不同。以下代码仅作为示例，用于展示基本的集成流程。

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

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

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

接下来，我们需要在Flutter应用中初始化并使用这个插件。以下是一个简单的示例：

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

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

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

class _MyAppState extends State<MyApp> {
  late TencentCloudCustomer _tencentCloudCustomer;

  @override
  void initState() {
    super.initState();
    // 初始化TencentCloudCustomer
    _tencentCloudCustomer = TencentCloudCustomer(
      // 请替换为您的腾讯云客服SDK的相关配置信息
      secretId: 'your_secret_id',
      secretKey: 'your_secret_key',
      sdkAppId: 'your_sdk_app_id',
      region: 'your_region', // 例如：ap-guangzhou
    );

    // 初始化完成后，可以调用登录或其他相关方法
    _tencentCloudCustomer.initSDK().then((result) {
      if (result) {
        print('SDK 初始化成功');
        // 可以在这里调用登录方法，假设有一个登录按钮触发了这个函数
        // _tencentCloudCustomer.login(userId: 'user_id');
      } else {
        print('SDK 初始化失败');
      }
    }).catchError((error) {
      print('SDK 初始化出错: $error');
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tencent Cloud Customer Service Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 打开客服聊天窗口
              _tencentCloudCustomer.startChat().then((result) {
                if (result) {
                  print('聊天窗口已打开');
                } else {
                  print('打开聊天窗口失败');
                }
              }).catchError((error) {
                print('打开聊天窗口出错: $error');
              });
            },
            child: Text('Start Chat'),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

在pubspec.yaml中添加了tencent_cloud_customer依赖。
在MyApp的initState方法中初始化了TencentCloudCustomer实例，并调用了initSDK方法来初始化SDK。
在UI中添加了一个按钮，当用户点击按钮时，会调用startChat方法来打开客服聊天窗口。

请注意，这里的secretId、secretKey、sdkAppId和region等信息需要替换为你自己的腾讯云客服SDK配置信息。此外，根据腾讯云客服插件的API文档，可能还需要处理登录、用户信息等其他逻辑。

由于我无法直接访问最新的插件文档和API，以上代码仅作为一个基本的集成示例。在实际项目中，请务必参考最新的插件文档和API说明来进行开发。