Messenger App
This is a step by step guide to creating a messenger app.
Messenger App
Features included in the app:
- Text & Media Messenger
- Audio & Video Calling
- Contacts
- Call Log
- Interactive Channels
- Chat Groups
- Google Ads
Module Installation
1.) To install a module, click on one of the module categories, placed on the right, you can choose from 30+ modules that serve different functions.
2.) Drag one of the modules and drop it into your Home Menu's setup area.
3.) That's it! Your module is now installed.
Now we're gonna take one feature at a time and explain it.
Built-in Messenger
The text and media messenger module allows your users to text and share multimedia files with each other, who also use your app. It shows the users a list of their recent one-to-one chats and the group chats made on your App.
Installation
You can install this module in your app in the following places:
- App's Home Menu ✓
- App's Side Menu ✓
You can find the Messenger module in the Communications category.
Drag and drop the module into your home or side menu to install it.
Duplicability
This module can be duplicated in several sections in your app ✓
Click here to check out the features of the messenger module.
Configuration
1.) Once you installed the module, by dragging and dropping it in the home or side menu, you can rename the module and choose an Android and an iOS icon for it.
2.) Click on the gear icon to configure the settings of the module.
3.) From the settings, you have the option to include ads in your app, using Google AdMob Module.
Note that you have to install Google AdMob Module first.
Don't forget to click save once you are done.
Don't forget to click save.
4.) You can check the features by clicking features.
Module Walkthrough
The module will be installed by dragging and dropping it in the home menu or the side menu.
Calls
One of the best features of nandbox; users can make seamless voice and video calls with their contacts, who also use your app by including this module. That's in addition to sharing text and multimedia files. The Calls module shows the users a list of their recent one-to-one chats as well as the group chats that they made on your App.
This module is the best to use if you want to build a Free Video and Voice Calling App.
Installation
You can install these modules in your App in the following places:
- App's Home Menu ✓
- App's Side Menu ✓
You can find the Calls module in the Communication category.
Drag and drop the module into your home or side menu to install it.
Duplicability
This module can be duplicated in several sections in your app ✓
Click here to check out the module's features.
Configuration
1.) Once you installed the module, by dragging and dropping it in the home or side menu, you can rename the module and choose an Android and an iOS icon for it.
2.) Click on the gear icon to configure the settings of the module.
3.) From the settings, you have the option to include ads in your app, using Google AdMob Module.
Note that you have to install Google AdMob Module first.
Don't forget to click save once you are done.
Don't forget to click save.
4.) To check out the features, click on features.
Module Walkthrough
Once you installed the module by dragging and dropping, your users will be able to make voice and video calls to each other.
Contacts
The contacts module syncs your device contact list with your app so you can invite users to download your app, join groups or channels, or send them media.
Installation
You can install this module in your App in the following places:
- App's Home Menu ✓
- App's Side Menu ✓
You can find the contacts module in the Communications category.
Drag and drop the module into your home or side menu to install it.
Duplicability
This module can be duplicated in several sections in your app. ✓
Click here to check out the module's features.
Configuration
1.) Once you installed the module, by dragging and dropping it in the home or side menu, you can rename the module and choose an Android and an iOS icon for it.
2.) Click on the gear icon to configure the settings of the module.
3.) From the settings, you have the option to include ads in your app, using Google AdMob Module.
Note that you have to install Google AdMob Module first.
Don't forget to click save once you are done.
Don't forget to click save.
4.) You can include the invitation link of your app once you publish it so that when you send it to your contacts, they can download it right away.
5.) To check out the features, click on features.
Call Log
The call log module allows users to see the recent audio and video calls that they made with their timestamps.
Installation
You can install this module in your App in the following places:
- App's Home Menu ✓
- App's Side Menu ✓
You can find the call log module in the Communications category.
Drag and drop the module into your home or side menu to install it.
Duplicability
This module can be duplicated in several sections in your app. ✓
Click here to check out the module's features.
Configuration
1.) Once you have installed the module, by dragging and dropping it in the home or side menu, you can rename the module and choose an Android and an iOS icon for it.
2.) Click on the gear icon to configure the settings of the module.
3.) To check out the features, click on features.
Must-Have Modules
It's better to add these modules to your App's Side Menu (step 3)
- Contacts List: It shows your app users a list of their contacts who also use your app.
- Calls: It shows your app users a list of their contacts who also use your app.
Complementary Modules
- Text and Media Messenger: A messenger that allows your users to chat, and send photos, videos, voice notes, and files to each other.
- Chat: A simple tab will be allocated for a direct, one-to-one chat with the user of your choice.
Interactive Channels
Entertain your audience with interactive content and keep them posted with the latest updates while receiving their feedback privately.
Channels allow you to post messages, images, videos, and files, with the option of targeting and segmentation.
With unlimited subscribers to each channel, you can include multiple channels on your app, to deliver diverse content in each one of them.
You can also include an interactive store to sell products on your channel with the option to have a location visible to your users.
There are three modules included:
1.) Channels: Displays the list of all channels that are available on the app.
2.) My Channels: Show the channels that the user is subscribed to.
3.) Active Channels: Show the channels that the user is active on.
These modules are the best to use if you want to build a Community App.
Installation
You can install these modules in your app in the following places:
- App's Home Menu ✓
- App's Side Menu ✓
You can find the channel modules in the social category.
Drag and drop the modules into your home or side menu to install them.
Duplicability
This module can be duplicated in several sections in your app ✓
Click here to check out the features of the channel module.
Configuration
1.) Once you installed the module, by dragging and dropping it in the home or side menu, you can rename the module and choose an Android and an iOS icon for it.
2.) Click on the gear icon to configure the settings of the module.
3.) From the settings, you have the option to include ads in your app, using Google AdMob Module.
Note that you have to install Google AdMob Module first.
Don't forget to click save once you are done.
4.) To configure the features, click on features.
Module Walkthrough
Create a New Channel
1.) From the side menu, click channels.
2.) To create a new channel, click create.
3.) A window will appear where you can enter your channel name and description.
4.) After you created the channel, you can hover over it and click on the edit button to configure it.
5.) You can edit the channel image, name, and description in the first section.
Splash Screen
You can also add a splash screen to your channel, which includes an image, title, and description, you can also change the button text and colors associated with it.
A splash screen is an introductory graphical screen that shows an explanatory message when you first install an app, it can also be displayed when a user first enters a group or a channel.
Which will look something like this:
Click setup to configure the splash screen.
Users can also join a channel by scanning the QR for your channel.
You can also assign admins to a specific channel.
Invite your users to join the group through Twitter, Facebook, or by sending them a link to join.
Don't forget to save, after you finish the configuration.
You can also set a welcome message to your users when they join the channel, click on "set message" and set it up.
Edit the message and click save.
Set a Store
You can also set up a store on your channel. (Note that you have to include the store module and the map search module in your app)
Note that:
-
The m-Store: This is where you can create your stores, you can have one main store or multiple small stores in your channels.
-
Products: This is the products section where you can create new products to add them to your store.
-
Bundles: A bundle is a group of products that are bought together as one product.
-
Multi-tiered plans: A multi-tiered plan gives your user to choose from multiple pre-selected items, think of small, medium, and large t-shirt sizes and the user gets to choose their size.
-
Product add-on: This feature allows you to add extra items to a product, think of a pizza as a product, and extra olives as the item.
-
Orders: This is where you can monitor your clients' orders and transactions.
Let’s add the store module.
1.) From the categories menu, click on mobile store.
2.) Then drag the store module into your home menu. Note that the store module can only be installed in the home menu.
3.) Don’t forget to save.
4.) From the side menu, click on mstore.
5.) Click on create to create a new store.
6.) Enter the details of your store, and notice if you check the default option, this will become your main store.
7.) Next, hover over the store you created and click the edit button.
8.) Click on edit to assign the channel you created as the owner of the store.
9.) Select the channel, and click insert.
10.) Next, get back to your channel and click set to set the store you created to this channel.
11.) Select the store, and click insert.
Create a Product
1.) To create products to add to the store, click on products from the side menu.
2.) Click on create to create a new product.
3.) Enter your product details.
Note that:
-
The display title is the product name that the users will see.
-
The SKU is a unique code to identify each product based on brand, style, color, or size.
-
The max unit per order is the maximum number that a user can order this product.
4.) Once you created the product, hover over it and click on the edit button.
5.) Here you can add searchable keywords that your product can appear under.
You also have the option to add product add-ons to further customize the product, click here to jump to the adding product add-ons page.
6.) Don't forget to save when you finish.
7.) After you created the product, you can list it in the store you created. Go back to the mStore page, hover over the store you created, and click edit on the store you created.
8.) Click add items.
9.) Select the product you want to add and click insert.
Now your product has been added.
Now your product has been added.
Creating a New Bundle
A bundle is a group of products that are bought together as one product.
1.) From the side menu, click on bundles.
2.) Click create to create a new bundle.
3.) Enter the bundle details and click create.
4.) To add products to the bundle, click on the edit button.
5.) Scroll down to the bottom of the page and click on add products.
6.) Select the products that you want to add and click insert.
Creating a New Multi-tiered Plan
A multi-tiered plan gives your user to choose from multiple pre-selected items, think of small, medium, and large pepperoni pizza and the user gets to choose their size.
1.) From the side menu, click on multi-tiered plans.
2.) Click create to create a new multi-tiered plan.
3.) Enter the multi-tiered plan details and click create.
4.) To add products to the multi-tiered plan, hover over the plan and click on the edit button.
5.) Scroll down to the bottom of the page and click on add products.
6.) Select the products that you want to add and click insert.
Adding Product Add-Ons
This feature allows you to add extra items to a product, think of a pizza as a product, and extra meat as the item.
1.) From the side menu, click on product add-ons.
2.) Click create to create product add-ons.
3.) Enter the product add-on details and click create.
4.) Click on the edit button to assign it to a product or a bundle.
5.) Scroll down till you reach the sub-menu and then click add submenu.
A submenu is a sub-option given to users under the add-on that you created. So, for example, you can create the product add-on to be olives, and you can create three submenus to olives:
-
Extra Olives
-
Regular Olives
-
No Olives
6.) Enter the details of the submenu and click create new.
7.) You can then assign the minimum and the maximum number of items under each submenu.
8.) You can also add another submenu under the main submenu, click on the blue button to do that.
You can create multiple submenus and multiple items under each submenu.
10.) When you're done, click on the green add button to assign the product add-on to the specific submenu you already created, if you didn't create a product yet, create one, so you can assign the product add-ons to it.
11.) Don't forget to save when you finish.
12.) Next, we will add the product add-on that we created to a specific product.
Click edit on the product that you want to add the add-on to.
13.) Scroll down to the bottom and click on assign product add-on.
14.) Select the add-on and click insert.
Checking Your Orders
This is where you can monitor your clients' orders and transactions.
To check your orders' status, click on the orders page.
You can check all the details of your users' orders.
Users can also join a channel by scanning the QR for your channel.
You can also assign admins to a specific channel.
Invite your users to join the group through Twitter, Facebook, or by sending them a link to join.
Don't forget to save, after you finish the configuration.
You can also set a welcome message to your users when they join the channel, click on "set message" and set it up.
Edit the message and click save.
Chat Group
Up to 50,000 members can join your app's chat group and enjoy the seamless features of nandbox, including voice memos, multimedia file sharing, and video streaming. There is no limit to the number of chat groups you can create in your app.
You can create group chats for businesses and individuals. With the ability to personalize each group chat with a name, display picture, description, and category classification. The group chat admin can change these details anytime.
You can configure your chat group to be public or private. A public group is the best option if you want to allow anybody to join the group and have members invite other users to join while in the private group, only the chat admin will be able to invite new members to join, with the option to choose the group admins for each group.
There are three modules included:
1.) Groups: Displays the list of all groups that are available on the app.
2.) My Groups: Show the groups that the user has joined.
3.) Chat Group: Opens a chat group where members of the group can interact with each other.
Once you create a group, it will appear in the groups and users will be able to join it, once they do, it will appear to them in the my groups.
This module is the best to use if you want to build a Messaging App.
Installation
You can install the 'Groups' and the 'Chat Group' module in your App in the following places:
-
App's Home Menu ✓
-
App's Side Menu ✓
-
My Groups can only be installed in the side menu.
1.) You can find the chat group modules in the social category.
2.) Drag and drop the modules into your home or side menu to install them.
Duplicability
This module can be duplicated in several sections in your app. ✓
Click here to check out the module's features.
Configuration
1.) Once you installed the module, (chat group as shown in the image) by dragging and dropping it in the home or side menu, you can rename the module and choose an Android and an iOS icon for it.
2.) Click on the gear icon to configure the settings of the module.
3.) To check out the features, click on features.
Setting a Group
1.) From the settings, you can choose which group to set.
2.) If you do not have a group created, you can create a new one, and click on add new to create a new group.
3.) You can then enter the group name and description.
4.) Once you created the group, you can select it and click on insert.
5.) Don't forget to click save, note that all groups created from the web builder will be public.
Create a Private Group
1.) From a mobile, go to My Groups.
2.) Tap on the ''+'' sign at the top right hand side of the screen.
3.) Tap on Chat Group.
5.) Enter the group name and description.
6.) Select the privacy to private, then tap Done.
Must-Have Modules
It's better to add these modules to your App's Side Menu (step 3)
- My Groups: It shows your app users the chat groups that they have already joined.
- Groups: It shows a list of your app's available chat groups for users to join.
Complementary Modules
- Contacts: It shows your app users a list of their contacts who also use your app.
- Chat: a simple tab will be allocated for a direct, one-to-one chat with the user of your choice.
Similar Apps
| Facebook Messenger | Telegram | ||
|---|---|---|---|
 |  |  |  |
Module Walkthrough
Activating the Chat Group
1.) From the side menu click chat groups.
2.) You can create a new group by clicking create.
3.) A window will appear where you can enter your group name and description.
4.) After you created the group, you can hover over it and click on the edit button to configure it.
5.) You can enter the group image, group name, and description in the first section.
Search Filters
You can also add a search filter which this group can come up under.
First, you have to include the search module in your app.
1.) Click on your side menu, to open the side menu page.
2.) From the categories section, click on essentials.
3.) Drag the search module and drop it in the side menu section.
4.) Next, click on the gear icon to configure the module.
5.) Scroll down to the bottom of the page and click on setup under the filter option.
6.) You have the option to include up to three filters, these filters can be assigned to any elements like channel, group, booking, or event so that when people search for these filters, the elements can come up.
7.) When you go back to the chat groups from the side menu.
8.) Hover over the group and click edit.
9.) You can assign the filter under which this channel will come up.
Splash Screen
You can also add a splash screen to your group, which includes an image, title, and description, you can also change the button text and colors associated with it.
A splash screen is an introductory graphical screen that shows an explanatory message when you first install an app, it can also be displayed when a user first enters a group or a channel.
Which will look something like this:
Click setup to configure the splash screen.
You can also prevent your users from leaving the group by toggling on this button.
Users can also join a group by scanning the QR for your group.
You can also assign admins to a specific group.
Invite your users to join the group through Twitter, Facebook, or by sending them a link to join.
You can also set a welcome message to your users when they join the channel, click on set message, and set it up.
Edit the message and click save.
Don't forget to save your changes after you finish the configuration
Google Ads
This section will enable you to activate Google Ad Mob in your app.
1.) Firstly, create a Google Ad Mob account.
2.) From the navigation menu, click on apps.
3.) Click on add your first app.
4.) Select the platform of your app.
5.) If your app is published on Google Play Store or App Store, select yes, if not, select no.
6.) Next, enter the app name and click add app.
7.) Click on create ad unit to start creating ads.
8.) Next, select the ad type, currently, nandbox app builder supports the banner and the native advanced format.
The banner type will look like this:
The native advanced type will look like this:
9.) Click on the banner type, enter the ad name and click create ad unit.
You will be prompted with two keys.
10.) Open nandbox app builder.
11.) Go to App settings.
12.) Click on Google ads.
13.) You will be prompted with the following screen.
14.) Copy the first key (Google ad app ID).
15.) Paste it in the Ad Google Key section in nandbox app builder.
16.) Next, copy the second key (banner key).
17.) Paste it in the Ad Banner Key section in nandbox app builder.
18.) Next, click create another ad unit.
19.) Select Native advanced.
20.) Enter the ad name and click create ad unit.
21.) Copy the second key (native key).
22.) Paste it in the Ad Native Key section in nandbox app builder.
23.) Next, select which ad you wish to activate and click save.
24.) You can repeat the same process with the iOS version of your app.
25.) Enter the ad frequency, which is the number of posts after which an ad will appear.
26.) Next, you need to activate the ads in the modules that you installed in your app.
27.) Click on the configuration icon on the installed module.
27.) Toggle the button to enable ads.
Updated 5 months ago