Flutter聊天集成插件chatwoot_client_sdk的使用

在Flutter应用中集成Chatwoot聊天功能，可以帮助您与访客进行实时交流并提供卓越的支持。本文将详细介绍如何通过chatwoot_client_sdk插件实现这一功能。

1. 创建Chatwoot API收件箱

请参考Chatwoot文档创建一个API收件箱。

2. 将包添加到项目中

在终端中运行以下命令：

flutter pub add chatwoot_client_sdk

或者，您可以直接在项目的pubspec.yaml文件中添加依赖项：

dependencies:
  chatwoot_client_sdk: <<version>>

请检查此处获取最新版本号。该库使用Hive进行本地存储，并使用Flutter Chat UI构建用户界面。

3. 如何使用

替换baseUrl和inboxIdentifier为适当的值。更多关于如何获取baseUrl和inboxIdentifier的信息，请参阅Chatwoot文档。

a. 使用ChatwootChatDialog

只需调用ChatwootChatDialog.show方法即可显示聊天对话框。要关闭对话框，请使用Navigator.pop(context)。

示例代码

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  void _showChatwootDialog() {
    ChatwootChatDialog.show(
      context,
      baseUrl: "<<your-chatwoot-base-url-here>>",
      inboxIdentifier: "<<your-inbox-identifier-here>>",
      title: "Chatwoot Support",
      user: ChatwootUser(
        identifier: "john@gmail.com",
        name: "John Samuel",
        email: "john@gmail.com",
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chatwoot Integration'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showChatwootDialog,
          child: Text('Open Chatwoot Dialog'),
        ),
      ),
    );
  }
}

可用参数

b. 使用ChatwootChat小部件

要在您的应用中嵌入ChatwootChat小部件，请使用ChatwootChat小部件。可以通过传递自定义主题颜色和其他参数来自定义聊天UI主题。

示例代码

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ChatwootChat(
      baseUrl: "<<your-chatwoot-base-url-here>>",
      inboxIdentifier: "<<your-inbox-identifier-here>>",
      user: ChatwootUser(
        identifier: "john@gmail.com",
        name: "John Samuel",
        email: "john@gmail.com",
      ),
      appBar: AppBar(
        title: Text(
          "Chatwoot",
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold
          ),
        ),
        backgroundColor: Colors.white,
      ),
      onWelcome: () {
        print("Welcome event received");
      },
      onPing: () {
        print("Ping event received");
      },
      onConfirmedSubscription: () {
        print("Confirmation event received");
      },
      onMessageDelivered: (_) {
        print("Message delivered event received");
      },
      onMessageSent: (_) {
        print("Message sent event received");
      },
      onConversationIsOffline: () {
        print("Conversation is offline event received");
      },
      onConversationIsOnline: () {
        print("Conversation is online event received");
      },
      onConversationStoppedTyping: () {
        print("Conversation stopped typing event received");
      },
      onConversationStartedTyping: () {
        print("Conversation started typing event received");
      },
    );
  }
}

可用参数

c. 使用Chatwoot客户端

您还可以创建一个自定义的聊天UI，并使用ChatwootClient来加载和发送消息。当创建客户端实例时，可以传递ChatwootCallbacks来处理聊天事件。

示例代码

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  ChatwootClient chatwootClient;

  [@override](/user/override)
  void initState() {
    super.initState();

    final chatwootCallbacks = ChatwootCallbacks(
      onWelcome: () {
        print("on welcome");
      },
      onPing: () {
        print("on ping");
      },
      onConfirmedSubscription: () {
        print("on confirmed subscription");
      },
      onConversationStartedTyping: () {
        print("on conversation started typing");
      },
      onConversationStoppedTyping: () {
        print("on conversation stopped typing");
      },
      onPersistedMessagesRetrieved: (persistedMessages) {
        print("persisted messages retrieved");
      },
      onMessagesRetrieved: (messages) {
        print("messages retrieved");
      },
      onMessageReceived: (chatwootMessage) {
        print("message received");
      },
      onMessageDelivered: (chatwootMessage, echoId) {
        print("message delivered");
      },
      onMessageSent: (chatwootMessage, echoId) {
        print("message sent");
      },
      onError: (error) {
        print("Ooops! Something went wrong. Error Cause: ${error.cause}");
      },
    );

    ChatwootClient.create(
        baseUrl: "<<your-chatwoot-base-url-here>>",
        inboxIdentifier: "<<your-inbox-identifier-here>>",
        user: ChatwootUser(
          identifier: "john@gmail.com",
          name: "John Samuel",
          email: "john@gmail.com",
        ),
        enablePersistence: true,
        callbacks: chatwootCallbacks
    ).then((client) {
      setState(() {
        chatwootClient = client;
      });
      chatwootClient.loadMessages();
    }).onError((error, stackTrace) {
      print("chatwoot client creation failed with error $error: $stackTrace");
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chatwoot Integration'),
      ),
      body: Container(),
    );
  }
}