Build Open Source Web Messenger
Estimated reading time: 2 minutes- 1: Preparation
- 2: Android App
- 3: iOS App
- 4: Web Messenger
- 5: Customization and Rebranding
- 6: Hosting Private APIs
- 7: On-Premise Deployment
- 8: Conclusion
Welcome to Part 4 of this tutorial! In this section, we will guide you through downloading the source code for the Web Messenger app and running it on your browser. Let’s get started!
Prerequisites
Before we begin, please make sure you have completed the following:
- Go through Part 1 of this tutorial and fulfill the mentioned prerequisites.
Downloading the Source Code
The latest code for the Web Messenger app is always available and regularly updated on the messenger-javascript repository.
There are multiple ways of “downloading” code from GitHub.
Clone the Repository (Recommended)
If you have Git installed, this is the recommended approach as it allows you to quickly sync and stay up to date with the latest version. It’s also the preferred method if you plan to contribute to the project.
To download, open a terminal and issue following commands:
$ mkdir Messenger
$ cd Messenger
$ git lfs install
$ git clone https://github.com/mesibo/messenger-javascript.git
Download the code as a zip file
Alternatively, you can download the complete source code of the Web Messenger app as a zip file. This method is simpler but requires downloading the full source code whenever updates are made to the repository.
Click on the Download button to start downloading.
Once the download completes, unzip the file 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.
Running the App
Now, let’s proceed with running the Web Messenger app. In the next section, we will cover customization options.
To run the app, follow these steps:
Host it on your web server:
Deploy the Web Messenger app on your preferred web server. You can choose to host it locally on your machine or on a remote server.
Load index.html:
Once the app is hosted, open your web browser and navigate to the URL where you deployed the Web Messenger. The entry point is the index.html file.
That’s it! You should now see the login screen of the Web Messenger app.
Please remember that for this demo, you need to generate the OTP yourself by logging into your [mesibo account]](/console) and following the instructions in the “Demo Apps” menu. In the later part of this tutorial, we will cover how to automatically send OTPs to your users.
Conclusion
Congratulations! In this part, we have successfully run the Web Messenger app on your browser.
In the next part, we will learn about customizing applications.
open, source, whatsapp, mesibo, overview