Get Started: UI Modules

Estimated reading time: 5 minutes

In this part, we will cover how to use mesibo in your UI apps and mesibo UI modules.

Prerequisites

Read the First App Guide.
Read one of the Android, iOS, JS section of this tutorial.
Install Mesibo UI Modules by following Instructions for Android and Instructions for iOS

Ready to use UI Modules

Mesibo provides a variety of pre-built UI components that allow you to quickly add messaging, voice & video call graphical user interface in your app. 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 chatbots in no-time.

Mesibo UI modules are available as:

Fragment (Android)
ViewController (iOS)
Individual Views (android and ios)

One of the key advantages of Mesibo UI modules is that they are well tested and you only need to write minimal code to create fully-functional UIs. Any future enhancements are also automatically available to you.

To use mesibo UI modules, you need to perform the following steps:

Add UI modules in your project
Initialize mesibo API with access token as described in the Android, or iOS section
Launch mesibo UI modules, for example,

     MesiboUI.launch(context, 0, false, true);

That’s it.

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.

Source Code of mesibo UI modules

You can also access the complete source code of UI modules here:

Android UI modules Source Code

https://github.com/mesibo/ui-modules-android/

iOS UI modules Source Code

https://github.com/mesibo/ui-modules-ios/

Mesibo Messaging UI module uses Google Map SDK for location. Hence, you’ll need to get your own Google Map Key to use location features. Refer to Mesibo installation instruction for your platform to learn more.

In the following sections, we will explain how you can launch mesibo UI modules for messaging and calls. The code examples are taken from source code available on GitHub - First Mesibo App for Android andFirst 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;
```
In the case of one-to-one messaging, you will need to launch the message UI for each user. For example, if there is a user named User2, you will need to launch the messaging UI like below

To launch the messaging UI for a user, you need to pass the address for that user.

Here, is an example in Java

public void onLaunchMessagingUi(View view) {
        MesiboUI.launchMessageView(this, mRemoteUser.address, 0);
}

Here, is an example in Kotlin

fun onLaunchMessagingUi(view: View?) {
        MesiboUI.launchMessageView(this, mRemoteUser!!.address, 0)
}

If you want to learn more about messaging UI modules and how you can customize it see Using Mesibo Messaging UI Modules

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
```
In the case of one-to-one messaging, you will need to launch the message UI for each user. For example, if there is a user named User2, you will need to launch the messaging UI like below

To launch the messaging UI for a user, you need to pass the address for that user.

Here, is an example in Objective-C

- (IBAction)onLaunchMessagingUIModule:(id)sender {
    //requires pod mesibo-ui
    [MesiboUI launchMessageViewController:self profile:mProfile];
}

Here, is an example in Swift

@IBAction func onLaunchMessagingUIModule(_ sender: Any) {
     //requires pod mesibo-ui
     MesiboUI.launchMessageViewController(self, profile: mProfile)
}

Launching Calls UI in Android

Install Mesibo UI Modules by following Instructions for Android

In Andoid, Mesibo Call UI modules are available as fragments. Import the fragments for audio call and video call.

import com.mesibo.calls.MesiboAudioCallFragment;
import com.mesibo.calls.MesiboCall;
import com.mesibo.calls.MesiboVideoCallFragment

Refer to Using Mesibo UI Modules for Android - Voice and Video Calls to learn about launching custom audio call & video call UI.

Launching Calls UI in iOS

Install Mesibo UI Modules by following Instructions for iOS
Import the modules for audio call and video call.
In Objective-C,
```
#import "MesiboCall/MesiboCall.h"
```
In Swift,
```
import MesiboCall
```
Refer to the source code for UI Modules in iOS, which is self-explanatory to learn about launching custom audio and video call UI.

mesibo, android, ios