Build Open Source Web Messenger

• 1: Preparation
• 2: Android App
• 3: iOS App
• 4: Web/Javascript App
• 5: Customization and Rebranding
• 6: Hosting Private APIs
• 7: On-Premise Deployment
• 8: Conclusion

In this part, we will download the source code for Web Messenger, and run it on a browser.

Ready? let’s get started.

Prerequisites

Before we dive into building and running a fully featured Web Messenger, ensure that you’ve read the following.

• The first part of this tutorial and Prerequisites mentioned there.
• Get Started Guide.
• Tutorial on Writing your First mesibo Enabled Application

Downloading the Source Code

The latest code for the Web Messenger is always updated and pushed on messenger-javascript repository.

There are multiple ways of “downloading” code from GitHub.

Clone the Repository (Recommended)

If you have git installed, this is a recommended approach as you can quickly sync and stay up to date with the latest version. This is also a preferred way of downloading the code if you decide to contribute to the project.

To download, open a terminal and issue following commands:

$ mkdir Messenger
$ cd Messenger
$ git clone https://github.com/mesibo/messenger-javascript.git

Download the code as a zip file

You can also download the complete Web Messenger source code as a zip file. Although simple, the downside of this approach is that you will have to download the full source code every time it is updated on the repository.

Click on the Download button to start downloading.

Download

Once the download completes, unzip into a folder.

Stay Up-to-date

Whatever approach you take to download the code, it is important to stay up-to-date with the latest changes, new features, fixes etc. Ensure to Star(*) the project on GitHub to get notified whenever the source code is updated.

Star

Run

In this part, we will run the app. In the next section, we will learn about customizing applications.

Running the code is as simple as:

1. Host it on your web server
2. Load index.html
3. That’s it, you should see the login screen.

Log in using your phone number. Note that, for this demo, you need to generate OTP yourself by log in to your mesibo account and clicking on the Demo Apps menu for instructions. In the later part of this tutorial, you will learn how to send OTP to your users automatically.

Conclusion

In this part, we have run the Web Messenger app.

In the next part, we will learn about customizing applications.

On to Part 5 >>