Flutter集成Zoho Chat插件desk_zoho_chat的使用

desk_zoho_chat

A flutter implementation of desk.zoho.com In-app support. You need desk.zoho.com widget code to use this plugin.

截图

使用步骤

获取开始

从desk.zoho.com仪表板生成的代码中复制您的appId。

此插件依赖于InappWebView，因此您需要设置必要的权限。

对于Android，在Manifest.xml中添加：

<uses-permission android:name="android.permission.INTERNET"/>

<application
        android:label="desk_zoho_chat_example"
        android:icon="@mipmap/ic_launcher"
        android:usesCleartextTraffic="true"> //添加此行
</application>

对于iOS，在Info.plist中添加：

<key>NSAppTransportSecurity</key>
    <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
      <key>NSAllowsArbitraryLoadsInWebContent</key>
      <true/>
    </dict>
    <key>NSAllowsLocalNetworking</key>
    <true/>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>

获取AppID

从desk.zoho.com获取您的AppID。假设widget代码为xxxxx，将其复制并按以下方式使用：

DeskZohoChat(
  zohoAppID: "xxxxx", //desk.zoho.com聊天AppID
)

完整示例代码

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Zoho Chat Integration'),
        ),
        body: Center(
          child: DeskZohoChat(
            zohoAppID: "xxxxx", // 替换为您从desk.zoho.com获取的实际AppID
          ),
        ),
      ),
    );
  }
}

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

zlyuanteng 1楼•7 天前

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

在Flutter项目中集成Zoho Chat插件（如 desk_zoho_chat）可以帮助你轻松地添加Zoho Desk的实时聊天功能。以下是如何在Flutter项目中集成和使用 desk_zoho_chat 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  desk_zoho_chat: ^1.0.0  # 请确保使用最新版本

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

2. 初始化Zoho Chat

在你的Flutter应用的入口文件（通常是 main.dart）中，初始化Zoho Chat。你需要提供Zoho Desk的 accountKey 和 appId。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化Zoho Chat
  await DeskZohoChat.initialize(
    accountKey: 'YOUR_ACCOUNT_KEY',
    appId: 'YOUR_APP_ID',
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Zoho Chat Demo',
      home: HomeScreen(),
    );
  }
}

3. 启动Zoho Chat

在你希望启动Zoho Chat的地方（例如，点击一个按钮），调用 DeskZohoChat.startChat 方法。

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Zoho Chat Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 启动Zoho Chat
            DeskZohoChat.startChat();
          },
          child: Text('Start Chat'),
        ),
      ),
    );
  }
}

4. 处理用户信息（可选）

你可以选择在启动聊天之前设置用户信息，以便在聊天中识别用户。

DeskZohoChat.setUserInfo(
  name: 'John Doe',
  email: 'john.doe@example.com',
  phoneNumber: '+1234567890',
);

5. 处理回调（可选）

你可以监听聊天的事件，例如聊天开始、结束等。

DeskZohoChat.setCallback(
  onChatStarted: () {
    print('Chat started');
  },
  onChatEnded: () {
    print('Chat ended');
  },
  onChatMissed: () {
    print('Chat missed');
  },
);

6. 处理权限（仅适用于Android）

在Android上，你可能需要请求权限来使用某些功能（例如，发送图片）。你可以在 AndroidManifest.xml 中添加以下权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

7. 运行应用

完成上述步骤后，你可以运行应用并测试Zoho Chat功能。

flutter run