Flutter即时通讯插件zoho_chat的使用

Flutter即时通讯插件zoho_chat的使用

简介

zoho_chat 是一个用于在 Flutter 应用中实现 Zoho SaleIQ 即时通讯功能的插件。你需要从 Zoho SalesIQ 控制台获取小部件代码才能使用此插件。

截图

开始使用

首先，从 Zoho SalesIQ 控制台复制小部件代码（通常是一串十六进制值）。

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

Android 权限设置

在你的 AndroidManifest.xml 文件中添加以下内容：

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

<application
    android:label="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/>

使用示例

假设从 Zoho SalesIQ 控制台复制的小部件代码是 xxxxx，你可以通过以下方式使用 zoho_chat 插件：

import 'package:flutter/material.dart';
import 'package:zoho_chat/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 Example'),
        ),
        body: Center(
          child: ZohoChat(
            zohoWidgetCode: "xxxxx", // Zoho SalesIQ 聊天小部件代码
            chatPreloaderSize: 100.0, // 预加载器大小
            chatPreloaderWidth: 3, // 预加载器边框大小
            chatPreloaderColorHexString: "#2196f3", // 预加载器颜色代码
            showMinimizeChatWidget: true, // 是否显示最小化聊天窗口
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


zoho_chat 是一个用于在 Flutter 应用中集成 Zoho SalesIQ 即时通讯功能的插件。Zoho SalesIQ 是一款客户互动和聊天工具，允许企业在他们的网站或移动应用中与客户进行实时聊天。通过 zoho_chat 插件，你可以轻松地在 Flutter 应用中集成 Zoho SalesIQ 的聊天功能。

1. 添加依赖

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

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

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

2. 初始化 Zoho Chat

在你的 Flutter 应用中，你需要在应用启动时初始化 Zoho Chat。通常，你可以在 main.dart 文件中进行初始化。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 Zoho Chat
  await ZohoChat.init(
    appKey: 'YOUR_APP_KEY',
    accessKey: 'YOUR_ACCESS_KEY',
    department: 'YOUR_DEPARTMENT',
  );

  runApp(MyApp());
}

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

3. 启动聊天界面

你可以在应用的任何地方启动 Zoho Chat 的聊天界面。例如，在按钮的点击事件中调用 ZohoChat.startChat 方法：

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

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

4. 设置用户信息（可选）

你可以通过 ZohoChat.setUserInfo 方法来设置用户的信息，例如姓名、电子邮件等。这可以帮助 Zoho SalesIQ 更好地识别用户并提供个性化的服务。

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

5. 处理回调（可选）

你可以监听 Zoho Chat 的事件，例如聊天开始、结束等。通过 ZohoChat.setCallback 方法可以设置回调函数。

ZohoChat.setCallback(
  onChatStarted: () {
    print('Chat started');
  },
  onChatEnded: () {
    print('Chat ended');
  },
);
回到顶部