build likes popularity pub points

Integrate Chatwoot with Flutter app

Integrate Chatwoot flutter client into your flutter app and talk to your visitors in real time. Chatwoot helps you to chat with your visitors and provide exceptional support in real time. To use Chatwoot in your flutter app, follow the steps described below.

chatwoot screenshot

1. Create an Api inbox in Chatwoot

Refer to Website Channel document.

2. Add the package to your project

Run the command below in your terminal

flutter pub add chatwoot_client_sdk

or

Add chatwoot_client_sdk:<<version>> to your project's pubspec.yml file. You can check here for the latest version.

NB: This library uses Hive for local storage and Flutter Chat UI for its user interface.

3. How to use

Replace baseUrl and inboxIdentifier with appropriate values. See here for more information on how to obtain your baseUrl and inboxIdentifier

a. Using ChatwootChatDialog

Simply call ChatwootChatDialog.show with your parameters to show chat dialog. To close dialog use Navigator.pop(context).

// Example
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",
  ),
);

Available Parameters

NameDefaultTypeDescription
context-BuildContextCurrent BuildContext
baseUrl-StringInstallation url for chatwoot
inboxIdentifier-StringIdentifier for target chatwoot inbox
enablePersistancetrueboolEnables persistence of chatwoot client instance's contact, conversation and messages to disk
for convenience.
true - persists chatwoot client instance's data(contact, conversation and messages) to disk. To clear persisted
data call ChatwootClient.clearData or ChatwootClient.clearAllData
false - holds chatwoot client instance's data in memory and is cleared as
soon as chatwoot client instance is disposed
Setting
title-StringTitle for modal
usernullChatwootUserCustom user details to be attached to chatwoot contact
primaryColorColor(0xff1f93ff)ColorPrimary color for ChatwootChatTheme
secondaryColorColors.whiteColorSecondary color for ChatwootChatTheme
backgroundColorColor(0xfff4f6fb)ColorBackground color for ChatwootChatTheme
l10nChatwootL10n()ChatwootL10nLocalized strings for ChatwootChat widget.
timeFormatDateFormat.Hm()DateFormatDate format for chats
dateFormatDateFormat("EEEE MMMM d")DateFormatTime format for chats

b. Using ChatwootChat Widget

To embed ChatwootChat widget inside a part of your app, use the ChatwootChat widget. Customize chat UI theme by passing a ChatwootChatTheme with your custom theme colors and more.

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @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
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @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");
      },
    );
  }
}

Horray! You're done.

You also find a sample implementation here

Available Parameters

NameDefaultTypeDescription
appBarnullPreferredSizeWidgetSpecify appBar if widget is being used as standalone page
baseUrl-StringInstallation url for chatwoot
inboxIdentifier-StringIdentifier for target chatwoot inbox
enablePersistancetrueboolEnables persistence of chatwoot client instance's contact, conversation and messages to disk
for convenience.
true - persists chatwoot client instance's data(contact, conversation and messages) to disk. To clear persisted
data call ChatwootClient.clearData or ChatwootClient.clearAllData
false - holds chatwoot client instance's data in memory and is cleared as
soon as chatwoot client instance is disposed
Setting
usernullChatwootUserCustom user details to be attached to chatwoot contact
l10nChatwootL10n()ChatwootL10nLocalized strings for ChatwootChat widget.
timeFormatDateFormat.Hm()DateFormatDate format for chats
dateFormatDateFormat("EEEE MMMM d")DateFormatTime format for chats
showAvatarstrueboolShow avatars for received messages
showUserNamestrueboolShow user names for received messages.

c. Using Chatwoot Client

You can also create a customized chat ui and use ChatwootClient to load and sendMessages. Messaging events like onMessageSent and onMessageReceived will be triggered on ChatwootCallback passed when creating the client instance.

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: widget.baseUrl,
        inboxIdentifier: widget.inboxIdentifier,
        user: widget.user,
        enablePersistence: widget.enablePersistence,
        callbacks: chatwootCallbacks
    ).then((client) {
        client.loadMessages();
    }).onError((error, stackTrace) {
      print("chatwoot client creation failed with error $error: $stackTrace");
    });

Available Parameters

NameDefaultTypeDescription
baseUrl-StringInstallation url for chatwoot
inboxIdentifier-StringIdentifier for target chatwoot inbox
enablePersistancetrueboolEnables persistence of chatwoot client instance's contact, conversation and messages to disk
for convenience.
true - persists chatwoot client instance's data(contact, conversation and messages) to disk. To clear persisted
data call ChatwootClient.clearData or ChatwootClient.clearAllData
false - holds chatwoot client instance's data in memory and is cleared as
soon as chatwoot client instance is disposed
Setting
usernullChatwootUserCustom user details to be attached to chatwoot contact
callbacksnullChatwootCallbacksCallbacks for handling chatwoot events

Libraries

chatwoot_action
chatwoot_action_data
chatwoot_callbacks
chatwoot_chat_dialog
chatwoot_chat_page
chatwoot_chat_theme
chatwoot_client
chatwoot_client_api_interceptor
chatwoot_client_auth_service
chatwoot_client_exception
chatwoot_client_sdk
chatwoot_client_service
chatwoot_contact
chatwoot_contact_dao
chatwoot_conversation
chatwoot_conversation_dao
chatwoot_event
chatwoot_l10n
chatwoot_message
chatwoot_messages_dao
chatwoot_new_message_request
chatwoot_parameters
chatwoot_repository
chatwoot_user
chatwoot_user_dao
local_storage
modules
repository_parameters