How to add a Live Chat to your Android App for free in 10 minutes

Let’s face it. Nowdays all people are using some IM service to talk, like WhatsApp, Hangouts, Telegram or Facebook Chat. Users want to communicate in a fast and simple way, instantly. So what if there is a method to integrate a Live Chat into your Android app that allows you to talk with your user and provide support?

You’re right, it exists and it’s called Smooch.

Smooch lets you have rich conversations with your users, right in your app or on your website. If you want to learn more about Smooch, then visit our website at http://smooch.io or sign up here.

In fact, I was looking for a cheap instant chat solution to integrate in Glucosio, a diabetes tracker I’m building, without the need of setting up servers and write the required code from scratch.

Smooch is completely free up to 10,000 monthly active users: an acceptable number for a start-up like us. With its SDK you can build your customized support chat solution to talk with your user in minutes. Let’s see how to do it.

Create a Smooch account

First you need to create a Smooch account here. Then login, and you’ll see your project Dashboard. In settings, copy your App Token, we’ll need it later.

Add Smooch to your Project

Smooch comes as a library hosted on Bintray and available on JCenter.

The minimum supported SDK version is API level 15, and your app must be compiled with at least API version 21.

So you just have to open your build.gradle file and add the following lines:

repositories {
jcenter()
}

plus the required dependencies

compile 'com.google.android.gms:play-services-gcm:7.5.0'
compile 'com.google.code.gson:gson:2.3.1'
compile 'com.squareup.okhttp:okhttp:2.4.0'
compile 'io.smooch:core:latest.release'
compile 'io.smooch:ui:latest.release'

Since Smooch depends on external (and very popular) libraries that you may already use in your project, you can select those dependencies individually.

Note that in Glucosio we’ve activated ProGuard to minify and obfuscate the final apk. If you want to use Smooch with ProGuard you’ll need to add some rules in your proguard-rules.pro file (if you still have problems, the whole file is available here):

## Smooch
-dontwarn okio.**
-keep class okio.**
-keep class com.google.gson.**
I’m also assuming you’re using Gradle for your Android Project. If not, the full guide to add Smooch with Eclipse, Netbeans and the ant build system is available here.

Initialize Smooch

In the onCreate method of your Application class, paste the following line:

Smooch.init(this, "YOUR_APP_TOKEN");

Of course, replace the token with the one you’ve copied before from your Smooch dashboard.

The full class should look something like this:

package org.glucosio.android;
import android.app.Application;
import io.smooch.core.Smooch;
public class GlucosioApplication extends Application {
String APP_TOKEN = "YOUR_APP_TOKEN_HERE";
@Override
public void onCreate() {
super.onCreate();
Smooch.init(this, APP_TOKEN);
}
}

Then, to invoke Smooch UI (for example in the onClick method of a button), you’ll just need this line:

ConversationActivity.show(context);

That’s it! Now, if you do some tests, you’ll notice a nice chat Activity that opens when you invoke Smooch’s ConversationActivity.

But how will you exactly reply to user messages? Well, Smooch has a lot of integrations to get the job done. The simplest one is email. Just login in your Smooch Dashboard and add Email as integration. You’ll receive an email each time someone writes a message though the app. And you’ll simply need to reply to a specific mail to answer the user.

Anyway, I’ve to warm you. We’ve tested this integration in Glucosio and email are not fast enough for Instant Messaging. They can take from 5 to 30 minutes to arrive so the whole “Live” Chat feature would be pointless.

Smooch supports other integrations as well: Slack, Facebook Messenger, HipChat, Zendesk, Telegram and more. Since Slack is very popular with startups, we’ll choose it in this example.

Adding a new integration isn’t difficult at all. Just go to your Smooch Dashboard and click the button “Connect to Slack” in the Integrations section.

Due to a Slack limitation, Smooch can’t create private channels to manage your chats. For this reason I warmly suggest you to create a new Slack account, separate from your primary one (for example you can name it appname-support) and invite only your support guys in it.

Now each time an user contacts you through your app’s chat, a new Slack channel will be created and you’ll be able to reply to him just writing

/sk your_message

For example /sk Hi, how can we help you?

You can also get more information about the user (device model, OS version, network) writing:

/sk !profile

Channel names are generated randomly but you can use Smooch SDK to associate each user with a name or an email account and use it to make channel name relevant. Read more about this on Smooch documentation.

Google Cloud Messaging

Now that you’ve configured how to reply to user messages, you need a way to let the user know that a new message has arrived. In this situation, Google Cloud Messaging is your friend.

Send data from your server to your users’ devices, and receive messages from devices on the same connection. The GCM service handles all aspects of queueing of messages and delivery to client applications running on target devices.

Did I also say it’s completely free? :)

To configure it, simply go to Google’s cloud messaging documentation and click on the button GET A CONFIGURATION FILE. Put the generated file (google-services.json)in the root directory of your project.

Remember to take note of the Server API Key and the Sender ID, we’ll need those later.

Add GCM dependency to your project’s top-level build.gradle:

classpath 'com.google.gms:google-services:1.3.0-beta1'

and the plugin to your app-level build.gradle:

apply plugin: 'com.google.gms.google-services'

Next, add the required permissions and receivers in your AndroidManifest.xml file.

<permission
android:name="<your_application_package>.permission.C2D_MESSAGE"
android:protectionLevel="signature"/>

<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="<your_application_package>.permission.C2D_MESSAGE"/>

<receiver
android:name="com.google.android.gms.gcm.GcmReceiver"
android:exported="true"
android:permission="com.google.android.c2dm.permission.SEND">
<intent-filter>
<action android:name="com.google.android.c2dm.intent.RECEIVE"/>
<category android:name="<your_application_package>"/>
</intent-filter>
<intent-filter>
<action android:name="com.google.android.c2dm.intent.REGISTRATION"/>
</intent-filter>
</receiver>
Remember to replace your_application_package with your real package name.

Finally, in your Smooch Dashboard in the Overview page, select Android and enter your Server API Key and Sender ID.

Optionally, you can also add the Sender ID to your Google Play Developer Console to receive statistics and other relevant data directly in your console.

Go and test your app again. Each time you reply to a message from your Slack account, the user will receive a notification that points directly to the Chat Activity.

Smooch chat is completely customizable. You can change colors, text and even the avatar (creating a new Gravatar account with the same email address of your Smooch account). Of course, we included elements of our brand like colors in our chat activity to make it well integrated with the rest of the app.

Read more about Smooch customization here.

Whispers

Another cool feature that Smooch supports is Whispers. They’re something like Parse Push Notifications (RIP, sob). With Whispers you can send a message to all your users (or target specific people that are using a particular version of your app etc…). You can even include a Call to Action button that redirects to a webpage.

All the Whispers service will run thanks to Google Cloud Messaging integration you’ve added before.

You can add a new Whisper from your Smooch web console.

And this will be the final result.

If you have more questions about Smooch feel free to contact me. Also, if you’re interested joining the Glucosio team, we’re looking for developers and translators to help us with our mission.

Happy Coding :)