flutter_chatwoot_sdk 1.0.1 flutter_chatwoot_sdk: ^1.0.1 copied to clipboard
A flutter client sdk for chatwoot. Integrate Chatwoot flutter client into your flutter app and talk to your visitors/users in real time.
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 flutter_chatwoot_sdk
or
Add
flutter_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:flutter_chatwoot_sdk/flutter_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 | 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 likeonMessageSent
andonMessageReceived
will be triggered onChatwootCallback
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 |