verloop_flutter_sdk

Description:

verloop flutter sdk

This is a wrapper over native verloop's iOS and Android SDK.
You can checkout sample app for any clarification on the usage of the SDK
Getting Started #
Here we are adding verloop chat button as a floating action button in the app. You can attach the widget at any other place too
On press is internally handled by the VerloopWidget using onTap of GestureDetector widget
const String _clientId = "ClientID"; // You need to use the name of your organisation here

final Map<String,String> userVariableMap = Map();
userVariableMap['key1'] = 'value1';

final Map<String,String> roomVariableMap = Map();
roomVariableMap['key2'] = 'value2';

Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
title: const Text('Plugin example app'),
),
body: Center(
child: Text('Running for client $clientId'),
),
floatingActionButton: FutureBuilder<String?>(
// Initialize FlutterFire
future: FirebaseMessaging.instance.getToken(),
builder: (context, snapshot) {
// Check for errors
if (snapshot.hasError) {
return const Text("Something went wrong");
}
if (snapshot.hasData && snapshot.data != "") {
String token = snapshot.data ?? "";
return VerloopWidget(
clientId: _clientId, // Required
userId: "<user_id>", // Optional: add this if you want to associate all the chats of this user across the platforms
recipeId: "<recipe_id>", // Optional: if you wish to use any other recipe apart from the default one, use this
fcmToken: token, // Optional: this would help us to send the notification on the device. You still need to handle the fcm notifications.
userName: "<user_name>", // Optional: This would populate the system variable for user name which would help you identify the user. else the name of the user would be autogenerated like "guest-123"
userEmail: "<user_email>", // Optional: This would populate the system variable for emails
userPhone: "<user_phone>", // Optional: This would populate the system variable for Phone number
userVariables: userVariableMap, // Optional: These are the global variables of the user which is associated with the given userId. These variables would be used by the recipe. These values would spill over to the another room once the current conversation is over.
roomVariables: roomVariableMap, // Optional: These variables would be used by the recipe and will not spill over another room created by the user once the conversation is over
overrideUrlOnClick: false, // Optional: this is by default false, if you don't want the url to open in the browser, and want to handle internally in the app, make it as false
onButtonClicked: // Optional: Add this function callback as a button click listener
(String? title, String? payload, String? type) {
print("button click title $title");
},
onUrlClicked: // Optional: Add this function callback as a url click listener
(String? url) {
print("url clicked $url");
},
child: const FloatingActionButton(
onPressed: null,
child: Icon(Icons.chat),
),
);
}
return const Text("Loading...");
},
),
),
);
}
copied to clipboard
Button click listeners #
These button are defined as a part of the conversational flow. Once the user clicks the button, you can listen to the events in your flutter app.
A very common use case for this is navigating the user to another section of the app if button is clicked inside the recipe.
Note: Button which contains url would be treated as button instead of the url. Hence, you'll get callback on onButtonClicked if implemented
VerloopWidget(
clientId: <client_id>, // Required
onButtonClicked:
(String? title, String? payload, String? type) {
print("button click title $title");
},
child: <Some Widget>,
);
copied to clipboard
Url click listeners #
These urls are defined as a part of the conversational flow. Once the user clicks the url, you can listen to the events in your flutter app.
You can choose whether to open the url in mobile browser or handle it in the app by setting overrideUrlOnClick field. If overrideUrlOnClick is true, we will not open the url anywhere but you'll get a callback on onUrlClicked function.
VerloopWidget(
clientId: <client_id>, // Required
overrideUrlOnClick: false
onUrlClicked:
(String? url) {
print("url clicked $url");
},
child: <Some Widget>,
);
copied to clipboard
Handling notifications #
follow this https://firebase.google.com/docs/flutter/setup
Once the fcm is setup, just send the fcmToken as a part of VerloopWidget.
NOTE: make sure the server key is added to the verloop's setting page for the same firebase app which is configured in your flutter app.
To Navigate to the verloop's setting page

open https://client_id.verloop.io
go to settings gear icon on the left navigation panel
search for android sdk
add the server key as production
similarly, go to ios sdk
add appropiate files as production configuration