Mesibo Open Source Chat, Voice and Video Calls UI Modules
Estimated reading time: 7 minutesmesibo provides a variety of pre-built UI components that allow you to quickly add messaging, voice & video call graphical user interface in your app in just a few lines of code. mesibo UI components are optional and provided to aid in the app development process. You can completely design your own UI components using mesibo Core APIs.
![]() |
![]() |
![]() |
mesibo UI modules are completely customizable. You can not only customize colors, icons, etc but also customize how each message is rendered. This enables you to create powerful apps, chatbots in no-time. In addition to that, the entire source code of UI modules is available on GitHub if you need to customize them as per your needs
Since each App has different UI requirements, we DO NOT claim that these UI modules will meet all your needs. However, they can get you started quickly and since they are open-source, you can download the entire source code of UI modules and modify it to suit your needs.
Using UI Modules
In this document, we will briefly describe how to use and customize UI modules.
Note that, mesibo UI modules are developed by our partners and hence, unlike mesibo APIs,
- they do not follow the common API signature and other mesibo coding guidelines
- You will find some differences in Android and iOS UI modules. Refer to the source code.
Hence, use this document as high-level reference only. The best way to learn how to use mesibo UI modules is to refer to the open-source messenger app for Android, iOS, and Javascript source code which uses mesibo UI modules for various functionalities like welcome screen, login, media picker, one-to-one and group messaging, user list, group management, showing profiles, etc.
Type of UI Modules
Following are types of UI modules, you can use one or more as required by you:
- Messaging - UI module for entire messaging/chat like WhatsApp/Telegram
- Call and Conferencing - Video and Voice Calls, and Conferencing
- MediaPicker - UI module to select images, video, files, etc. from the phone, and optionally crop, rotate. Messaging module uses MediaPicker module.
- Helper - UI module for login and app welcome screens modules
UI Modules Source Code
You can download the entire source code from GitHub. Refer to the source code page to know about all mesibo source code repositories.
Android UI Modules
iOS UI Modules
Launching Messaging UI
Messaging UI opens up with a screen that shows the last message from each user and group. Clicking on any of the users or the groups will open the screen to chat with that user or a group.
There are primarily two types of Messaging UI components (fragment in Android, UIViewController in iOS):
- User List, which displays a list of users in different modes. The modes are explained below.
- Messaging, which renders all the messages for a particular user or a group and allows users to send messages, images, video, file, etc.
The different modes for User List
are:
MODE_MESSAGELIST
shows a list of latest messages, one per user, sorted by timeMODE_SELECTCONTACT
shows Mesibo Contact List - a list of Mesibo Users in the applicationMODE_SELECTCONTACT_FORWARD
shows a list of users to whom you can forward message(s)MODE_SELECTGROUP
shows UI for selecting and creating a groupMODE_EDITGROUP
shows UI for editing different attributes of a group such as - Group Member List, Group Profile Picture, Group Title or Group Name
The code examples are taken from the first app source code available on GitHub - First Mesibo App for Android and First Mesibo App for iOS
Launching Messaging UI in Android
-
Install Mesibo UI Modules by following Instructions for Android
-
Import the messaging-UI Module.
import com.mesibo.messaging.MesiboUI;
One you have imported, you can either create following fragments and use in your app or use utility functions to launch UI.
MesiboUserListFragment
, User List Fragment as mentioned above.MesiboMessagingFragment
, Messaging Fragment as mentioned above.
Alternatively, you can launch UI by calling:
MesiboUI.launch(this, 0, false, true);
You can also launch chat UI for a particular user or a group directly. For example,
In Java and Kotlin,
MesiboUI.launchMessageView(this, address, 0);
Launching Messaging UI in iOS
-
Install Mesibo UI Modules by following Instructions for iOS
-
Import the Mesibo UI Module.
In Objective-C,
#import "MesiboUi/MesiboUi.h"
In Swift,
import MesiboUI
You can then get User List Controller by
let mesiboController = MesiboUI.getViewController()
You can also launch chat UI for a particular user or a group directly. For example,
To launch the messaging UI for a user, you need to pass the address for that user.
[MesiboUI launchMessageViewController:self profile:mProfile];
MesiboUI.launchMessageViewController(self, profile: mProfile)
Adding Buttons to Messaging UI
You can add buttons (for example, voice and video call buttons) to the top bar in the user list and messaging component by implementing the following listener functions and using Mesibo.addListener
to set the listener.
For Android, defined in Mesibo.UIHelperListner
int Mesibo_onGetMenuResourceId(Context context, int type, MessageParams params, Menu menu);
boolean Mesibo_onMenuItemSelected(Context context, int type, MessageParams params, int item);
For iOS, defined in MesiboDelegate
-(NSArray *) Mesibo_onGetMenu:(id)parent type:(int) type profile:(MesiboProfile *)profile;
-(BOOL) Mesibo_onMenuItemSelected:(id)parent type:(int)type profile:(MesiboProfile *)profile item:(int)item;
Messaging UI will call these functions with type
as 0
for User List and 1
for Messaging component.
For Android, you should return menu resource with buttons. Refer to the messenger code here for usage example.
For Android, you should return Button array. Refer to the messenger code here for usage example.
Changing Default Texts, Colors, and other UI elements
MesiboUI.Config
allows you to change default texts and other UI elements to suit your need.
Below is the example of config. Refer to the source code for the complete definition
public static class Config {
...
public String messageListTitle = "Messages";
public String userListTitle = "Contacts";
public String createGroupTitle = "Create a New Group";
public String modifyGroupTitle = "Modify Group details";
public String selectContactTitle = "Select a contact";
public String selectGroupContactsTitle = "Select group members";
...
}
All you have to do is to get the config instance and change necessary variable.
For Android,
MesiboUI.Config config = MesiboUI.getConfig();
config.messageListTitle = "New Messages";
For iOS,
MesiboUiOptions *ui = [MesiboUI getUiOptions];