Flutter即时通讯插件crisp_chat_sdk的使用

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

Flutter即时通讯插件crisp_chat_sdk的使用

crisp_chat_sdk 是一个用于在 Flutter 应用中集成 Crisp 即时通讯服务的插件。它支持 Android 和 iOS 平台，并提供了丰富的 API 来配置和管理聊天会话。

预览

Screen Shot 2022-02-07 at 6 26 09 PM

视频预览

安装和配置

Android 实现

  1. 在 build.gradle 文件中添加 multidex 依赖：

    dependencies {
    ...
    implementation 'androidx.multidex:multidex:2.0.1'
}

  2. 启用 multiDexEnabled：

    defaultConfig {
    ...
    multiDexEnabled true
}

  3. 设置最小 SDK 版本为 19：

    defaultConfig {
    ...
    multiDexEnabled true
    minSdkVersion 19
}

iOS 实现

  1. 在项目根目录下运行以下命令：

    cd ios
pod install

方法说明

属性 描述
configure 配置 Website ID（在 Crisp Dashboard 中获取）此方法必须先调用
setTokenID 为下一个会话分配一个 tokenID
resetChatSession 重置会话
setUserAvatar 设置用户头像
setUserCompany 设置用户公司
setUserEmail 设置用户邮箱（注意：如果邮箱无效，此方法将返回 false 并且值不会被设置）
setUserNickname 设置用户名
setUserPhone 设置用户电话（注意：如果电话无效，此方法将返回 false 并且值不会被设置）
setSessionBool 设置会话数据布尔值
setSessionInt 设置会话数据整数值
setSessionString 设置会话数据字符串值
setSessionSegment 设置会话数据段
openChat 打开聊天视图（此方法打开聊天页面）

使用示例

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:crisp_chat_sdk/crisp_chat_sdk.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              initPlatformState();
            },
            child: const Text('Open crisp chat'),
          ),
        ),
      ),
    );
  }

  Future<void> initPlatformState() async {
    final sdk = CrispChatSdk();
    await sdk.configure(websiteId: "Your WebsiteId");
    await sdk.setUserEmail(email: "mohammad.mohammady.73@gmail.com");
    await sdk.setSessionString(key: "f1KEY", value: "f1value");
    await sdk.setSessionString(key: "f2KEY", value: "f2value");
    await CrispChatSdk().openChat();
  }
}

示例代码

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:crisp_chat_sdk/crisp_chat_sdk.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              initPlatformState();
            },
            child: const Text('Open crisp chat'),
          ),
        ),
      ),
    );
  }

  Future<void> initPlatformState() async {
    final sdk = CrispChatSdk();
    await sdk.configure(websiteId: "Your WebsiteId");
    await sdk.setUserEmail(email: "mohammad.mohammady.73@gmail.com");
    await sdk.setSessionString(key: "f1KEY", value: "f1value");
    await sdk.setSessionString(key: "f2KEY", value: "f2value");
    await CrispChatSdk().openChat();
  }
}

以上代码展示了如何在 Flutter 应用中集成 crisp_chat_sdk 插件，并配置和打开聊天会话。希望对您有所帮助！


更多关于Flutter即时通讯插件crisp_chat_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter即时通讯插件crisp_chat_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中集成和使用crisp_chat_sdk插件的示例代码。crisp_chat_sdk是一个用于Flutter的即时通讯插件，允许你在你的应用中集成Crisp聊天功能。

第一步：添加依赖

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

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

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

第二步：配置Crisp

在Crisp管理后台，为你的应用创建一个新的网站或应用，并获取Crisp的website_id和configuration_key。

第三步：初始化Crisp Chat

在你的Flutter应用的主文件中（通常是main.dart），初始化Crisp Chat。

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

void main() {
  // 初始化Crisp Chat
  CrispChat.init(
    websiteId: "你的website_id",
    configurationKey: "你的configuration_key",
    inAppMessageEnabled: true, // 是否启用应用内消息
    chatBubbleEnabled: true,   // 是否启用聊天气泡
    chatButtonEnabled: true,   // 是否启用聊天按钮
  );

  runApp(MyApp());
}

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Crisp Chat Example'),
      ),
      body: Center(
        child: Text('Crisp Chat is initialized and ready to use!'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 打开Crisp Chat窗口
          CrispChat.showChat();
        },
        tooltip: 'Open Chat',
        child: Icon(Icons.chat),
      ),
    );
  }
}

第四步：运行应用

确保你的设备或模拟器已经连接，然后运行flutter run来启动你的应用。

注意事项

  1. 权限：确保你的应用有适当的权限，如互联网访问权限，以便Crisp Chat能够正常工作。
  2. Crisp管理后台：你可以在Crisp管理后台配置更多的设置，如代理、消息模板、自动消息等。
  3. 错误处理：在实际应用中，建议添加错误处理逻辑，以处理初始化失败或网络错误等情况。

以上就是在Flutter项目中集成和使用crisp_chat_sdk插件的基本步骤。希望这个示例代码对你有所帮助！

回到顶部