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.
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.
- 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: "[email protected]",
name: "Tester test",
email: "[email protected]",
),
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.
| 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 |
- Create an Api inbox in Chatwoot. Refer to Create API Channel document.
- Create your own customized chat ui and use
ChatwootClientto load and sendMessages. Messaging events likeonMessageSentandonMessageReceivedwill be triggered onChatwootCallbackargument 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");
});| 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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent