REVE Chat’s Flutter Android SDK can be seamlessly integrated with your mobile apps and enable your team deliver in-app messaging to your app users for better engagement and customer support.
This documentation shows you how to embed REVE Chat Android SDK in a Flutter based Android application and get started in a few minutes.
Necessary or minimum requirements:
To integrate Flutter Android SDK with your mobile app, please follow the below mentioned steps:
Add the Flutter Android SDK URL in your Project level build gradle file’s repositories section as shown below:
If android studio version less than Android Studio Arctic Fox
In project build.gradle, you can add the repositories
allprojects {
repositories {
…
maven { url 'https://jitpack.io' }
maven { url 'https://maven.google.com' }
maven { url "https://jfrog-artifact.revechat.com/artifactory/artifactory"}
}
}
Otherwise
In settings.gradle, you can add the repositories
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
…
maven { url 'https://jitpack.io' }
maven { url 'https://maven.google.com' }
maven { url "https://jfrog-artifact.revechat.com/artifactory/artifactory"}
}
}
Add Design support library and REVE Chat Flutter Android SDK as dependency in your App level build. Gradle file:
dependencies {
…
implementation('com.revesoft.revechatsdk:revechatsdk:1.0.14.3.1')
}
Note- You can also use Design support library greater then 26 also according to your project build SDK version.
Add proguard-rules.pro. Path → /android/app/proguard-rules.pro
# Add project specific ProGuard rules here.
# By default, the flags in this file are appended to flags specified
# in E:\\Android_Studio\\sdk/tools/proguard/proguard-android.txt
# You can edit the include path and order by changing the proguardFiles
# directive in build.gradle.
#
# For more details, see
# <http://developer.android.com/guide/developing/tools/proguard.html>
# Add any project specific keep options here:
# If your project uses WebView with JS, uncomment the following
# and specify the fully qualified class name to the JavaScript interface
# class:
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
# public *;
#}
-keep class com.revesoft.revechatsdk.** {*;}
-keep interface com.revesoft.revechatsdk.** { *; }
-keep enum com.revesoft.revechatsdk.** { *; }
-dontwarn com.revesoft.revechatsdk.**
-keep class org.webrtc.** { *; }
-keep class org.webrtc.voiceengine.** { *; }
-dontwarn org.webrtc.**
Add following lines from where you want to start the chat. However, this step needs to be done differently for JAVA or KOTLIN in separate ways.
Code for JAVA
//Initializing with account id
ReveChat.init("account id");
//Creating visitor info
VisitorInfo visitorInfo = new VisitorInfo.Builder()
.name("your name")
.email("[email protected]")
.phoneNumber("your number")
.build();
//Set visitor info
ReveChat.setVisitorInfo(visitorInfo);
//Optional
//If want to Receive push notification from Reve Chat.
//Add your device token id(registration Id)
//You also need to do step 4.
ReveChat.setDeviceTokenId("deviceTokenId");
//starting chat window
startActivity(new Intent(this, ReveChatActivity.class));
Code for KOTLIN
//Initializing with account id
ReveChat.init("account id")
//Creating visitor info
val visitorInfo: VisitorInfo = VisitorInfo.Builder()
.name("your name")
.email("[email protected]")
.phoneNumber("your number")
.build()
//Set visitor info
ReveChat.setVisitorInfo(visitorInfo)
//Optional
//If want to Receive push notification from Reve Chat.
//Add your device token id(registration Id)
//You also need to do step 4.
ReveChat.setDeviceTokenId("deviceTokenId")
//starting chat window
startActivity(Intent(this, ReveChatActivity::class.java))
Extra Customization (Optional)
Add primary and primary Dark in your color.xml, if already not defined:
<color name="revechatsdk_colorPrimary">#YourColor</color>
<color name="revechatsdk_colorPrimaryDark">#YourColorDark</color>
To change chat window’s content as per your need:
<!-- screen background color -->
<color name="revechatsdk_layout_bg">#YourColor</color>
<!-- Button color -->
<color name="revechatsdk_btn_text">#YourColor</color>
<color name="revechatsdk_btn_bg">@color/revechatsdk_colorPrimary</color>
<!-- Chat screen colors -->
<color name="revechatsdk_color_chat_background">#YourColor</color>
<color name="revechatsdk_color_sending_msg_bg">#YourColor</color>
<color name="revechatsdk_color_receiving_msg_bg">#YourColor</color>
<color name="revechatsdk_shape_date_bubble_bg">#YourColor</color>
<!-- Chat action bar head text
<string name="revechatsdk_title_chat_window">YOUR MESSAGE TITLE</string>