Customization and Rebranding Android, iOS and Web Messenger

Estimated reading time: 3 minutes

In this part, we will briefly touch upon customizing and rebranding Android, iOS and Web messenger we just built.

Let’s get started.

What can be customized?

Everything! that’s true! Since the entire source code is available, you can customize each and everything in these apps to suit your requirements and branding. Not only you can customize the look and feel of the app but even how each and every message is rendered (covered in our upcoming chatbot tutorial).

However, we will not cover all the customizations in this tutorial. Instead, we will focus on a few very important ones as follow.

  • User Verification
  • OTP Generation
  • Geolocation support by configuring Google Maps and Google Places API key
  • Files/Media handler to store files on your own server(s)/cloud
  • Welcome screen and other miscellaneous customizations

Customizations

User Verification

For these demo apps, we have chosen to use a phone number for login. We verify the user by sending an OTP to the user phone number, which the user can enter to confirm the phone number.

It is not necessary to use the phone number; you can use anything you prefer, for example, email address, user account id, your organization id, etc. You can customize the entire login as you prefer. All you need to do is that you generate a mesibo user token using your secret App Token only after your user passed your authentication.

These are two places where you need to make changes:

  • your own login screens so that your users can enter the required credentials, for example, email, user-id, or the password.
  • Private APIs which we will explain in the next section. You can change it to whatever authentication check your App does. For example, checking your own database for a valid user.

OTP Generation

In these demo apps, we used mesibo console to generate OTPs. However, for a real deployment, you need to send OTP to the user for them to enter it on the login screen. You can use any SMS provider to send the OTP to the user. Refer to the next section for details.

Geolocation - Google Maps and Google Places

Mesibo Messenger allows you to select and send the location to your friends and family. Mesibo Messenger uses Google Maps and Google Places SDK for this functionality. Hence, you must add Google Maps and Google Places API Key into the project for it to work.

For instructions to get API key and configure it, visit

  • For Android, https://developers.google.com/maps/documentation/android-sdk/signup
  • For iOS, https://developers.google.com/maps/documentation/ios-sdk/get-api-key

Media/File Storage

Just like text messages, mesibo allows you to send and receive any arbitrary file (image, video, doc, etc) in real-time. Sending and receiving file is no different from sending and receiving text messages. All an application has to do is to first upload the file to a server and then send the URL and thumbnail [optional] using mesibo in real-time. The receiver then downloads it using that URL. This out-of-band mechanism ensures that no real-time messages are blocked waiting for a large file to be uploaded or downloaded.

Mesibo Messenger offers you the flexibility to store all files on your own servers including private servers or cloud services like Amazon Web Services, Google Cloud Storage, Microsoft Azure, etc. All you have to do is to configure the upload and download URL.

Mesibo Messenger source code has been configured with upload and download URLs that only stores your files for a few hours. Also, the quota is limited for demo purpose. Hence, you must provide your own upload and download URLs.

Conclusion

In this part, we have learnt about customizing Mesibo Messenger. So far, you have used the backend which we already hosted for you so that you can quickly play with the apps. In the next part, we will learn about hosting the backend on your infrastructure.

On to Part 6 >>

open, source, whatsapp, mesibo, ios, overview