Exploring Firebase In-App messaging

Earlier today, the awesome team behind Firebase announced In-App Messaging for Android and iOS users.

While in beta, this brand new service essentially allows you to show simple Alert Dialogs on your user’s device while they are using your app to boost user engagement or to guide them towards performing an action.
For example, you could send an In-App Messaging to get users to subscribe, watch a video, complete a level, or buy an item.

You can refer to this video to see a brief overview of the service

Excited to try it out, I decided to use this service in my Pokidex app and create a simple campaign message asking the users to rate the app on Google Play store.

Upon completing the required step and implementing In-App messaging in the app, this is what the messages looked like :

Modal Message, Image Message and a Top Banner Message in action

On clicking the “Rate” button, the user is taken to the Play store listing of the app and asked to submit a review for the app.

If this is something that intrigues you, continue reading on to get a gist of the implementation.

Step 1 : Connect your app

This is a simple one, simply setup firebase in your project. You can find a good tutorial here.

Step 2 : Integrate the SDK

In-App messaging requires you to add the In-App messaging dependency to your app.
So feel free to add the following dependency to your app :

Step 3 : Create your first message

Sending and receiving messages requires no further coding setup.
We can directly start sending and receiving messages on the device from the Firebase Console.
This process is somewhat very similar to sending and receiving Push Messages from the Firebase Console.

You can create a campaign and inside every campaign, there are 3 different kinds of different In-App messages we can create, Modal, Image and a Banner message.
The only difference in these messages is the way how they look and feel, the functionality and behaviour being the same.

Step 3.1 : Create a Modal message

A Modal message is very similar to an AlertDialog and it has the following properties :

1. Background : This defines the background colour for your dialog
2. Text Colour : This field defined the text colour in your dialog
3. Title : The text to be shown as the Title
4. Body (Optional) : The message to be shown as the body of the dialog, this is optional
5. Image URL (Optional) : Image URL if you want to display an image in the dialog
6. Button Text (Optional) : Text for the button if you want to have a button in the first place
7. Button Action (Required if you have the Button Text) : The URL to navigate the user to if the button was clicked

On completing all the fields, you will be able to see a preview of the message in your console.

Step 3.2 : Select the Target for your message

You can select the Target user which the message is to be delivered to.
If you have used Push Messaging earlier, this field should look very much familiar, the properties being :

1. Campaign Name : This is not visible to the users and can be used to track your campaigns.
2. Campaign Description (Optional) : A brief description of the campaign that is again not visible to the users.
3. Target app and other conditions : This defines which all users should see the message

On completing the fields, it should look something like :

Step 3.3 : Scheduling the message

In this section, you can define the start date and the end date for your campaigns along with multiple other options like the trigger condition and number of times the message is to be shown.
The properties available are :

1. Start time : This controls the start time for your campaign and defaults to “Now”
2. End time : The time at which the campaign is supposed to end
3. Trigger : The trigger at which the message is to be displayed. This has some default fields like app_exception, app_clear_data, first_open, app_start and you can also add custom triggers using Firebase Analytics.
4. Frequency Limit : This tells the number of times the message is supposed to be displayed on a single device per day.
   This is defaulted to once per device and you can change this to be displayed multiple times for a device.

Step 3.4 : Conversion events

This is an optional field and you can trigger a conversion event based on the selection so that you can track it later on in your analytics.

You can publish the event and you can see the published, messages on the user’s device.

In order to create a different type of message (Image or Top Text), you can select the type of message in step 3.1 and rest of the steps are very similar as to what we followed while creating the Modal message.

And that’s it!
If you open the app after sending the message, you should be able to see a beautiful message welcoming you as soon as the app is started.

The console also lets you track how many users have seen the message vs how many of them clicked on the action associated with the message.

You can use this dashboard to track the user behaviour based on the type of message sent and in turn optimize your marketing strategy to maximize the conversions.

If you have any questions that were not covered in the blog post above, feel free to comment them down below and I’ll try my best to answer them.

Thanks for reading! If you enjoyed this story, please click the 👏 button and share to help others find it! Feel free to leave a comment 💬 below.
Have feedback? Let’s connect on Twitter.