Flutter在线客服插件flutter_sobot_client的使用

Flutter在线客服插件flutter_sobot_client的使用

概述

智齿客服全面支持桌面网站、移动网站、微信、微博、APP五种接入方式，只要10分钟就可以将智齿客服嵌入所有营销路径，各渠道用户反馈汇总至智齿客服平台统一轻松管理，企业客服效率提升50%以上。

zhiChi-SobotKit是一款实现手机用户与企业保持随时随地沟通的客服工具。本插件封装了智齿客服的相关接口。使用此插件之前需要先注册智齿获取appkey。

一、使用插件前准备

注册方法如下:

使用管理员账号登录智齿管理后台，在 智齿管理后台 > 设置 > APP > 添加App 创建应用后可得到 appkey 用于配置，安卓和iOS可以共用一个，也可单独配置。

注意：本插件在iOS上支持最低版本为9.0，在Android智齿最低版本为4.4。

二、插件方法介绍

  1. 启动智齿客服
  2. 启动客户服务中心
  3. 获取未读消息数
  4. 注销会话
  5. 启动消息中心（电商版本专用）
  6. 新消息事件和超链接拦截监听
  7. 参数说明
  8. 补充说明

三、添加依赖和导包

dependencies:
  flutter_sobot_client: ^（填写版本号）

// 导包
import "package:flutter_sobot_client/sobotsdk.dart";

// 实例化
final zhiChiSobot = SobotApi();

四、启动智齿客服

示例代码如下：

Future<void> startZhichi() async {
  var params = {
    'app_key': 'your appkey',
    'partnerid': '123456789',
    'isCustomLinkClick': true,
    'user_nick': 'sobot123123123',
    'user_name': '智齿jkhkjhk',
    'user_tels': '18510002000',
    'user_emails': '123@qq.com',
    'qq': '123456789',
    'remark': '好好学习，天天向上',
    'params': {
      'actionType': 'to_group',
      'optionId': '4',
      'deciId': 'a457f4dfe92842f8a11d1616c1c58dc1'
    },
    'service_mode': 0,
    'title_type': 1,
    'custom_title': '自定义标题',
    'is_show_custom_title': true,
    'is_show_custom_title_url': true,
    'showNotification': true,
    'isShowReturnTips': true,
    'isShowClose': true,
    'isShowCloseSatisfaction': true,
    'isCloseAfterEvaluation': true,
    'isOpenEvaluation': true,
    'goodsTitle': '商品名字',
    'goodsLabel': '30.5\$',
    'goodsDesc': '商品描述',
    'goodsImage':
        'https://img.sobot.com/chatres/75574e5fa29a48458d1f57ab5489a4c5/msg/20200612/75574e5fa29a48458d1f57ab5489a4c5123456789/aae707c620744e92bb112de8b67cd3ed.png',
    'goodsLink': 'https://home.firefoxchina.cn/',
    'isSendInfoCard': true,
    'orderStatus': 1,
    'orderUrl': 'https://www.baidu.com',
    'orderCode': 'v2131232132',
    'autoSendOrderMessage': true,
    'goodsCount': 2,
    'totalFee': 3034,
    'createTime': '1569491413000',
    'canSendLocation': true,
    'goods': [
      {
        'name': '商品名称',
        'pictureUrl':
            'https://img.sobot.com/chatres/75574e5fa29a48458d1f57ab5489a4c5/msg/20200612/75574e5fa29a48458d1f57ab5489a4c5123456789/aae707c620744e92bb112de8b67cd3ed.png'
      },
      {
        'name': '商品名称',
        'pictureUrl':
            'https://img.sobot.com/chatres/75574e5fa29a48458d1f57ab5489a4c5/msg/20200612/75574e5fa29a48458d1f57ab5489a4c5123456789/aae707c620744e92bb112de8b67cd3ed.png'
      }
    ]
  };
  final result = await zhiChiSobot.startZhichi(params);
  handleJson(result);
}

相关参数，请参考参数说明。

五、启动客户服务中心

示例代码如下：

Future<void> openSobotHelpCenter() async {
  var params = {
    'app_key': 'your appkey',
    'partnerid': '123456789',
  };
  final result = await zhiChiSobot.openSobotHelpCenter(params);
  print(result);
}

相关参数，请参考参数说明。

六、获取未读消息数

示例代码如下：

Future getUnReadMessage() async {
  var params = {'partnerid': '123456789'};
  var result = await zhiChiSobot.getUnReadMessage(params);
  print(result);
}

七、注销会话

示例代码如下：

Future<void> closeSobotChat() async {
  final result = await zhiChiSobot.closeSobotChat();
  print(result);
}

八、电商版消息中心

示例代码如下：

Future<void> openSobotHelpMallCenter() async {
  var params = {'partnerid': '123456789'};
  final result = await zhiChiSobot.openSobotHelpMallCenter(params);
  print(result);
}

九、事件监听

class ZCSobotWidgeState extends State<ZCSobotWidge> {
  String newmesaage = "";
  final zhiChiSobot = SobotApi();
  var sobotMethodChannel = MethodChannel('flutter_sobot');

  [@override](/user/override)
  void initState() {
    super.initState();
    // 安卓
    sobotMethodChannel.setMethodCallHandler((call) {
      setState(() {
        if (call.method == 'flutterSobotHandle') {
          print(call.arguments);
          if (call.arguments['type'] == '1') {
            // 点击返回按钮回掉
          } else if (call.arguments['type'] == '4') {
            // 未读消息回掉
            final unreadNumber = call.arguments['value'];
            print(unreadNumber);
          } else if (call.arguments['type'] == '2') {
            var linkStr = call.arguments['value'];
            // 超链url
            print('url===' + linkStr);
          }
        }
      });
    });

    // iOS
    static const EventChannel eventChannel = EventChannel('sobot');
    void _onEvent(Object event) {
      print('zhichi> on Event....1 $event');
    }
    void _onError(Object error) {
      print('zhichi> on Error.... $error');
      print(error);
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('文本'),
      ),
      body: Container(
        padding: EdgeInsets.all(32.0),
        child: Center(
          child: Column(
            children: <Widget>[
              MaterialButton(
                color: Colors.blue,
                child: Text('启动智齿'),
                onPressed: () {
                  startZhichi();
                },
              ),
              MaterialButton(
                color: Colors.blue,
                child: Text('启动客户服务中心'),
                onPressed: () {
                  openSobotHelpCenter();
                },
              ),
              MaterialButton(
                color: Colors.blue,
                child: Text('关闭智齿'),
                onPressed: () {
                  closeSobotChat();
                },
              ),
              MaterialButton(
                color: Colors.blue,
                child: Text('电商版消息中心'),
                onPressed: () {
                  openSobotHelpMallCenter();
                },
              ),
              MaterialButton(
                color: Colors.blue,
                child: Text('获取未读消息'),
                onPressed: () {
                  getUnReadMessage();
                },
              ),
              MaterialButton(
                color: Colors.blue,
                child: Text('关闭智齿页面'),
                onPressed: () {
                  closeSobotChatPage();
                },
              ),
              MaterialButton(
                color: Colors.blue,
                child: Text('发送商品卡片'),
                onPressed: () {
                  sendProductInfo();
                },
              ),
              MaterialButton(
                color: Colors.blue,
                child: Text('发送订单卡片'),
                onPressed: () {
                  sendOrderGoodsInfo();
                },
              ),
              MaterialButton(
                color: Colors.blue,
                child: Text('关闭智齿页面'),
                onPressed: () {
                  closeSobotChatPage();
                },
              ),
              MaterialButton(
                color: Colors.blue,
                child: Text('关闭通道移除IM监听'),
                onPressed: () {
                  closeIMCommectionAndRemoveObserver();
                },
              ),
              MaterialButton(
                color: Colors.blue,
                child: Text('添加IM监听并检查IM通道'),
                onPressed: () {
                  checkIMConnectedAndAddObserver();
                },
              ),
              MaterialButton(
                color: Colors.blue,
                child: Text('发送自定义卡片'),
                onPressed: () {
                  sendCustomCard();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  Future<void> sendCustomCard() async {
    var params = {
      'custom_card': {
        'cardId': 86,
        'cardStyle': 1,
        'cardType': 1,
        'customCards': [
          {
            'customCardDesc': '型号：J2SN码：sn5',
            'customCardName': '测服yyyyyyy',
            'customCardThumbnail':
                'https://narwal-test-public.oss-cn-shenzhen.aliyuncs.com/default/1669954871449/J2.png',
            'customMenus': [
              {'menuName': '发送', 'menuType': 2}
            ]
          },
        ],
        'customField': {
          'actionType': 'to_group',
          'optionId': '4',
          'deciId': 'a457f4dfe92842f8a11d1616c1c58dc1'
        },
        'cardGuide': '请问您要咨询的设备是？',
        'cardDesc': '选择设备'
      }
    };

    final result = zhiChiSobot.sendCustomCard(params);
    handleJson(result);
  }

  Future<void> closeSobotChatPage() async {
    var params = {};
    final result = zhiChiSobot.closeSobotChatPage(params);
    handleJson(result);
  }

  Future<void> sendProductInfo() async {
    var params = {
      'goodsTitle': '商品名字',
      'goodsLabel': '30.5',
      'goodsDesc': '商品描述',
      'goodsImage':
          'https://img.sobot.com/chatres/75574e5fa29a48458d1f57ab5489a4c5/msg/20200612/75574e5fa29a48458d1f57ab5489a4c5123456789/aae707c620744e92bb112de8b67cd3ed.png',
      'goodsLink': 'https://home.firefoxchina.cn/'
    };
    final result = zhiChiSobot.sendProductInfo(params);
    handleJson(result);
  }

  Future<void> sendOrderGoodsInfo() async {
    var params = {
      "orderStatus": "0",
      "statusCustom": "自定义状态",
      "createTime": "",
      "goodsCount": "1",
      "orderUrl": "https://www.sobot.com",
      "orderCode": "1000234242342345",
      "totalFee": "4980",
      "goods": [
        {
          "name": "商品名称",
          "pictureUrl":
              "http://pic25.nipic.com/20121112/9252150_150552938000_2.jpg"
        }
      ]
    };
    final result = zhiChiSobot.sendOrderGoodsInfo(params);
    handleJson(result);
  }

  Future<void> startZhichi() async {
    var params = {
      "app_key": "1ed2d54fee1143ef9985875cd342f03f",
      "api_host": "https://sg.sobot.com",
      "showNotification": true,
      "navcBarHidden": true,
      "partnerid": "1554309398961004545",
      "user_nick": "ZY_34079077",
      "user_name": "ZY_34079077",
      "service_mode": 4,
      "orderStatus": 1,
      "orderCode": "240110033056N60133",
      "autoSendOrderMessage": true,
      "goodsCount": 4,
      "totalFee": 37624,
      "createTime": '1704828656000',
      "absolute_language": "en",
      "orderUrl": "/orderDetail?orderSn=240110033056N60133",
      "isEveryTimeAutoSend": true,
      "isDebugMode": true,
      "sobotColor_title_bar_left_bg": "#123456",
      "sobot_color_title_bar_right_bg": "#000000",
      "goods": [
        {
          "name": "White / S",
          "pictureUrl":
              "https://dev-zhiyi-foreign-ec-1319975145.cos.ap-hongkong.myqcloud.com/ec/sku/img/shopify/1507336675259453440.jpg"
        },
        {
          "name": "Black / M",
          "pictureUrl":
              "https://dev-zhiyi-foreign-ec-1319975145.cos.ap-hongkong.myqcloud.com/ec/sku/img/2022-08-15/zyScale133zyScale20228215105125_1660547451025.jpg"
        }
      ]
    };
    final result = await zhiChiSobot.startZhichi(params);
    handleJson(result);
  }
}

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

1 回复

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


flutter_sobot_client 是一个用于集成在线客服功能的 Flutter 插件，基于 Sobot 的客服系统。通过该插件，开发者可以轻松地在 Flutter 应用中集成在线客服功能，方便用户与客服人员进行实时沟通。

1. 安装插件

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

dependencies:
  flutter:
    sdk: flutter
  flutter_sobot_client: ^1.0.0  # 请使用最新版本

然后，运行 flutter pub get 来安装插件。

2. 初始化插件

在使用 flutter_sobot_client 之前，你需要在应用的入口处初始化插件。通常，你可以在 main.dart 中进行初始化：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 Sobot 客户端
  SobotClient.init(
    appKey: 'your_app_key',  // 替换为你的 Sobot AppKey
    appId: 'your_app_id',    // 替换为你的 Sobot AppId
    domain: 'your_domain',   // 替换为你的 Sobot 域名
  );

  runApp(MyApp());
}

3. 启动在线客服

在需要启动在线客服的地方，你可以调用 SobotClient.startCustomerService 方法。例如，你可以在一个按钮的点击事件中启动客服：

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

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('在线客服示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 启动在线客服
            SobotClient.startCustomerService(
              context: context,
              userInfo: SobotUserInfo(
                userId: 'user_id_123',  // 用户唯一标识
                nickName: '用户昵称',    // 用户昵称
                phone: '13800138000',   // 用户手机号
                email: 'user@example.com', // 用户邮箱
              ),
            );
          },
          child: Text('联系客服'),
        ),
      ),
    );
  }
}

4. 配置用户信息

在启动客服时，你可以通过 SobotUserInfo 类传递用户信息，以便客服人员更好地为用户提供服务。SobotUserInfo 支持以下字段：

  • userId: 用户的唯一标识。
  • nickName: 用户的昵称。
  • phone: 用户的手机号。
  • email: 用户的邮箱。
  • avatarUrl: 用户头像的 URL。

5. 其他功能

flutter_sobot_client 还支持其他一些功能，例如：

  • 自定义配置: 你可以通过 SobotConfig 类来自定义客服界面的样式、语言等。
  • 消息推送: 你可以集成消息推送功能，以便在用户离线时接收客服消息。

6. 示例代码

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

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 Sobot 客户端
  SobotClient.init(
    appKey: 'your_app_key',
    appId: 'your_app_id',
    domain: 'your_domain',
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Sobot Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('在线客服示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 启动在线客服
            SobotClient.startCustomerService(
              context: context,
              userInfo: SobotUserInfo(
                userId: 'user_id_123',
                nickName: '用户昵称',
                phone: '13800138000',
                email: 'user@example.com',
              ),
            );
          },
          child: Text('联系客服'),
        ),
      ),
    );
  }
}
回到顶部