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.

1. Add the package to your project

Run the command below in your terminal

flutter pub add chatwoot_sdk

or

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

2. How to use

a. Using ChatwootWidget

• Create a website channel in chatwoot server by following the steps described here https://www.chatwoot.com/docs/channels/website
• Replace websiteToken prop and baseUrl

import 'dart:io';

import 'package:chatwoot_sdk/chatwoot_sdk.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image/image.dart' as image;
import 'package:image_picker/image_picker.dart' as image_picker;
import 'package:path_provider/path_provider.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
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Chatwoot Example"),
      ),
      body: ChatwootWidget(
        websiteToken: "websiteToken",
        baseUrl: "https://app.chatwoot.com",
        user: ChatwootUser(
          identifier: "test@test.com",
          name: "Tester test",
          email: "test@test.com",
        ),
        locale: "fr",
        closeWidget: () {
          if (Platform.isAndroid) {
            SystemNavigator.pop();
          } else if (Platform.isIOS) {
            exit(0);
          }
        },
        //attachment only works on android for now
        onAttachFile: _androidFilePicker,
        onLoadStarted: () {
          print("loading widget");
        },
        onLoadProgress: (int progress) {
          print("loading... ${progress}");
        },
        onLoadCompleted: () {
          print("widget loaded");
        },
      ),
    );
  }

  Future<List<String>> _androidFilePicker() async {
    final picker = image_picker.ImagePicker();
    final photo =
        await picker.pickImage(source: image_picker.ImageSource.gallery);

    if (photo == null) {
      return [];
    }

    final imageData = await photo.readAsBytes();
    final decodedImage = image.decodeImage(imageData);
    final scaledImage = image.copyResize(decodedImage, width: 500);
    final jpg = image.encodeJpg(scaledImage, quality: 90);

    final filePath = (await getTemporaryDirectory()).uri.resolve(
          './image_${DateTime.now().microsecondsSinceEpoch}.jpg',
        );
    final file = await File.fromUri(filePath).create(recursive: true);
    await file.writeAsBytes(jpg, flush: true);

    return [file.uri.toString()];
  }
}

Horray! You're done.

Available Parameters

Name	Default	Type	Description
websiteToken	-	String	Website inbox channel token
baseUrl	-	String	Installation url for chatwoot
user	-	ChatwootUser	User information about the user like email, username and avatar_url
locale	en	String	User locale
closeWidget	-	void Function()	widget close event
customAttributes	-	dynamic	Additional information about the customer
onAttachFile	-	Future<List> Function()	Widget Attachment event. Should return a list of File Uris Currently supported only on Android devices
onLoadStarted	-	void Function()	Widget load start event
onLoadProgress	-	void Function(int)	Widget Load progress event
onLoadCompleted	-	void Function()	Widget Load completed event

b. Using Chatwoot Client

• Create an Api inbox in Chatwoot. Refer to Create API Channel document.
• Create your own customized chat ui and use ChatwootClient to load and sendMessages. Messaging events like onMessageSent and onMessageReceived will be triggered on ChatwootCallback argument passed when creating the client instance.

NB: This chatwoot client uses Hive for local storage.

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

Name	Default	Type	Description
baseUrl	-	String	Installation url for chatwoot
inboxIdentifier	-	String	Identifier for target chatwoot inbox
enablePersistance	true	bool	Enables 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
user	null	ChatwootUser	Custom user details to be attached to chatwoot contact
callbacks	null	ChatwootCallbacks	Callbacks for handling chatwoot events