Community App

This is a step by step guide to creating a community app.

Features included in the app:

  1. Events List
  2. News Feed
  3. Media Gallery
  4. Channels
  5. Group Chat
  6. Google Ads

Module Installation

1.) In order 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 to 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.

Events List

The events list module displays the list of events that the user accepted the invitation to.

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 events list modules in the Booking & Events 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. ✓

Main Features

1.) Sync with System Calendar

A feature that allows the app to access the device's calendar and sync with it so that it displays the events on the corresponding dates.

synceventssyncevents

Configuration

1.) Once you installed the module, by dragging and dropping it in the home or side menu, click on the gear icon to configure the settings of the module.

2.) Here you can rename the module and choose an Android and an iOS icon for it.

3.) To enable the syncing feature, check the box next to it and click Save.

The list of events will be displayed as follows once you accept the invitations.

eventlisteventlist

Module Walkthrough

Creating a New Event

1.) From the admin menu, click on "Events".

2.) Click on "Create New" button or the small icon at the bottom right side of the page.

3.) Enter the details of the event as follows:

  • The event name.
  • Whether the event is going to be an all-day event or not.
  • Set the start time and the end time of the event.
  • Select the time zone.
  • Select the event location. (Once you type in the location, Google Maps will automatically detect it)
  • Enter the description of the event.

You can also assign a filter so that the event can come up in the search results under the filter that you select.

So if you select "sports event", this event will come up when the user searches for sports events on your app.

When you are done, click Next.

Next, add the event image.

Once you're done, click Finish.

Editing an Event

After you created the event hover over it.

The first icon will allow you to edit the event details.

The second icon will let you set up the pricing of the event.

The third icon will delete the event.

The QR code displayed will allow users to access the event once scanned.

If you click on the first option and scroll down, you will have the option to assign admins to this event, you can also share the event via Facebook, Twitter, or share the invitation link of the event.

In order for your users to view events and calendars, you have to install the module 'Events List'.

Publishing an Event

After you're done with creating the event, you can publish it by copying the invite link and publishing it in the feed module, a chat group, or a channel.

Setting the Price of the Event

Click on the second icon.

Enter the price and the currency that you want, then click Save.

News Feed

Create an active news feed on your community app to keep all your neighbors engaged.

newsfeednewsfeed

News Feed

Where you can announce events and booking schedules.

postpost ## 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 posts/feed module in the social category.

Drag and drop the module into your home to install it.

Duplicability

This module can only be installed in your home menu.

Configuration

1.) Once you installed the module, by dragging and dropping it in the home or side menu, hit the gear icon to configure the settings of the module.

2.) Here you can rename the module and choose an Android and an iOS icon for it.

3.) From the settings, you have the option to include ads in your app, through the Google AdMob Module.

Note that you have to install Google AdMob Module first.

When you enable ads, you can specify the number of posts after which an ad will appear, note that the minimum number of posts after which an ad will appear is five.

Don't forget to click save.

4.) You can also choose the layout of the posts to be either wide or on the left side as shown.

5.) To configure the features, click on "Features".

User Selectable Features

  • Talk to Admin

    For app users to chat directly with the admin, this feature allows your users to share their thoughts and give you instant feedback on your posts.

  • Sticky Note

    Add promo points to your posts for users to collect and redeem, it is displayed as a small bubble that is attached to the bottom right side of the post.

stickynotestickynote
  • You can also choose the background and text color.
  • Post Footer

    Gives your posts the look-and-feel of a Facebook page, you can choose to add the like button, reply button, the number of views, and the share button.

You can also customize the heart color in the like button.

  • Post Filter

    To allow specific users (tags) to see your posts. This feature can be used to target a specific segment of your users.

Click here to know how to create a new tag.

Don't forget to "Save" after you are done with the configuration.

  • Context Menu

    Displays a set of actions to be done to the selected content.

contextmenucontextmenu Scroll down to the bottom of the list.

There is one action (delete) that is shown by default and eight actions that are user-selectable which are:

  • Edit
  • Copy
  • Forward
  • Share
  • Save to Gallery
  • Report Abuse
  • Save to Music
  • Save to Downloads

Click on the toggle to activate or deactivate the action.

You can also change the order of the actions, click and hold the move icon and drag up and down to move the action.

You can also disable the feature altogether.

Must-Have Modules

It's better to add these modules to your App's Side Menu (step 3)

  • Active Channels: It shows the user a list of the recently-posting channels they have joined on your app.
  • User Channels: It shows the users a list of all channels they have joined on your app.

Complementary Modules

  • Channels List: It shows a list of all your app's channels for users to join.
  • Calendar: It enables creating timetables/schedules and publishing them attached to posts.
  • Menu: It enables creating polls and attaching them to posts.

Similar Apps

FacebookLinkedInTwitterInstagram
facebookfacebooklinkedinlinkedintwittertwitterinstagraminstagram

Module Walkthrough

Activating the Posts Module

  • Click "Posts" in the admin menu, placed on the left of your nandbox dashboard.
  • Click the "+" button at the bottom right side of the page, to be prompted with a window where you can create your post.
  • You have the option to post a text message and change the background color just like Facebook, just choose the color you want and enter the content of your post.
  • And your post will look like this after editing.
nandboxFacebook
nandboxpostnandboxpostfacebookpostfacebookpost
  • You can also post a photo, video, gif, audio, or a file.
  • And if you want to publish an instant article, or have the platform fetch a URL and publish its content, or even publish a calendar that includes a list of events, you can easily do that through these buttons respectively.
  • You can also attach a sticky post or a menu to create polls, just click on attach and choose either option, (note that you have to create a menu before you are able to attach it to a post, and in order to create a sticky post you have to enable the sticky note feature in the features section of the posts & feed module.)
  • You can assign tags to your users to label them and send a post to this label only.

Create a Scheduled Post

From the admin menu, click on scheduled post.

Click the "+" button at the bottom right side of the page.

Click on the blue calendar icon at the bottom of the screen.

Select the date and click schedule.

Finally, click schedule, and your post is now scheduled!

Create New Tags

Click on "Tags" and then "Add New Tag", enter the tag name and the tag description and choose whether you want it to be a private tag or not, and then click Save.

  • Once you created it, you will be able to add your new tag, just mark it and click "Add".

Create New Segment

You can also segment your users into groups and you can send each segment a targeted post. Follow the same steps when you create a new tag.

Publishing to Groups & Channels

You can also publish your post to certain groups and channels that you created.

1.) Click on Groups

2.) And then click on "Add New" and select either Group or Channel

  • You can also insert emojis in your post.

If you would like to publish a post without sending push notifications to your users, you can enable the silent button.

Finally, when you are ready to publish your post, click on "Send".

Media Gallery

Displays a grid of images and videos where the user can select one photo to view.

mediagallerymediagallery

You can find the page module in the Page category.

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 booking module in the Pages 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 ✓

Configuration

1.) Once you installed the module, by dragging and dropping it in the home or side menu, click on the gear icon to configure the settings of the module.

2.) Here you can rename the module and choose an Android and an iOS icon for it.

Module Walkthrough

Once you click on the gear icon, you will be prompted with the following page.

You can select the image, rename the title of the module, add a description, and add a background photo.

To add images to the media gallery, click on the blue add button.

You can change the order of the pictures by moving the move icon up and down.

You can also add an image carousel.

Finally, you can add a text message.

When you're done, click save.

Channels

Channels will enable you to publish content for users to view and interact with.

channelchannel

There are three modules included:

1.) Channel List: Displays the list of all channels that are available on the app.

2.) User 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, click on the gear icon to configure the settings of the module.

2.) Here you can rename the module and choose an Android and an iOS icon for it.

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.

When you enable ads, you can specify the number of posts after which an ad will appear, note that the minimum number of posts after which an ad can appear is 5.

Don't forget to click save.

4.) To configure the features, click on features.

Must Have Modules

(You can add these to your App's main menu):

  • Post/Feed Module: Allows you to post messages, images, videos, GIFs, and files to your different channels, you can also add segments and tags to your audience for targeted posts.

It's better to add these modules to your App's Side Menu (step 3)

  • Active Channels: It shows the user which channels they are active on.
  • Channel List: It shows a list of your app's chat channels for users to join.

Complementary Modules

  • Store/Shop: If you're interested to set up an online store on your channel.
  • Map Search: You can include a location for your physical store, you can also include up to two other markers (buttons).

Module Walkthrough

Create a New Channel

Click "Channels" in the admin menu, placed on the left-hand side of your nandbox dashboard.

Hit the "Create New" button.

Or the small icon at the bottom right side of the page, to be prompted with a pop-up window where you can create a new group.

A window will appear where you can enter your channel name and description.

You will also find a video below explaining the process.

After you created the channel, you can hover over it and click on the edit button to configure it.

You can edit the channel image, name, and description in the first section.

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 a 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:

splashexamplesplashexample

You can also include a search filter in your channel:

Note that you have to include the search module in your app first.

Configuring Your Channel

1.) Click on the gear icon to configure it.

2.) Scroll down until you reach "Filter" and then click on setup.

3.) A screen will appear which you can tick multiple filters, you can name the filter, and assign the search criteria for each filter.

4.) After you're done, don't forget to tick the filter and click save.

5.) Get back to the channel settings, you will find your filters there, and you can assign each channel to come up with a selected search filter.

You can also set a welcome message to your users when they join the channel, click on "set message" and set it up.

Users can also join a channel by scanning the QR for your group.

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-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 mStore: 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.

Setting Up a Store

This is where you can create your stores, you can have one main store or multiple small stores in your channels.

1.) To set it up, click on "Set".

2.) And then add a new location to the store.

3.) Add the image for the location, icon, title, description, and enter the location, a drop-down menu will appear from which you can choose the location, you can also include your website in the web URL.

4.) Choose the store and click "Insert".

5.) Head to the mStore section on the left-hand side of the page.

6.) Click on "Create New".

Or the small icon at the bottom right side of the page.

7.) Enter the details of your store, notice if you check the default option, this will become your main store.

Creating a New Product

This is the products section where you can create new products to add them to your store.

1.) Now head on to the products section.

2.) Click on "Create New".

Or the small icon at the bottom right side of the page.

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, and 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, and click edit on the store you created.

8.) Scroll down and click on "Add Item".

9.) Tick the product that you want to add and then click "Insert".

10.) Note that you can insert bundles, multi-tiered plans, and mini stores the same way.

Creating a New Bundle

A bundle is a group of products that are bought together as one product.

1.) Head to the Bundles page.

2.) Click on the "Create New" button.

Or the small icon at the bottom right side of the page.

3.) Fill in the details of the bundle and click "Create".

4.) To add products to the bundle, click on the edit button.

5.) Scroll down, and click on "Add Product".

6.) Select the product that you want to add and then 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 t-shirt sizes and the user gets to choose their size.

1.) Head to the Multi-tiered Plan section.

2.) Click the "Create New" button.

3.) Or the small icon at the bottom right side of the page.

4.) Enter the details and click "Create", you can also choose the display style of the products inside the multi-tiered plan.

5.) After you created the plan, click on edit.

6.) You can then add products or bundles to your plan.

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.

androiddisplayandroiddisplay

1.) Head to the Product add-ons page.

2.) Click on "Create New" button.

Or the small icon at the bottom right side of the page.

3.) Fill in the details of the product add-on, and click "Create New".

4.) Click on the edit button once you created the add-on.

5.) Scroll down till you reach the sub-menu and then click "Add Submenu".

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.) Click on the blue Add button to start adding submenus under the main submenu you created.

9.) 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.

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.

Chat Groups

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.) Group List: Displays the list of all groups that are available on the app.

2.) User Groups: Show the groups that the user has joined.

3.) Chat Group: Opens a chat group that members of the group can interact with each other.

Once you create a group, it will be appear in the group list and users will be able to join it, once they do, it will appear to them in the user group.

This module is the best to use if you want to build a Messaging App.

Installation

You can install the 'Group list' and the 'Chat Group' module in your App in the following places:

  • App's Home Menu ✓
  • App's Side Menu ✓
  • User Groups can only be installed in the side menu.

You can find the chat group 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 module's features.

Configuration

1.) Once you installed the module, by dragging and dropping it in the home or side menu, click on the gear icon to configure the settings of the module.

2.) Here you can rename the module and choose an android and an iOS icon for it.

3.) From the settings, you can choose which group to set.

4.) Click on "Add" to create a new group and then create "Add New".

5.) You can then enter the group name and description.

6.) Once you created the group, you can select it and click on "Insert".

7.) Don't forget to click "Save", note that all groups created from the web builder will be public.

8.) To check out the features, click on "Features".

9.) You can also set a welcome message to your users when they join the group, click on "Set Message" and set it up.

10.) Users can also join a channel by scanning the QR for your group.

11.) You can also assign admins to a specific channel.

12.) Invite your users to join the group through Twitter, Facebook, or by sending them a link to join.

13.) Don't forget to save after you finish the configuration.

Create a Private Group

From a mobile go to User Groups.

createprivategroupcreateprivategroup

Tap on the ''+'' sign at the top right hand side of the screen.

createprivategroupcreateprivategroup

Tap on Chat Group.

createprivategroupcreateprivategroup

Enter the group name and description.

createprivategroup2createprivategroup2

Select the privacy to private, then tap Done.

createprivategroup2createprivategroup2

Must-Have Modules

It's better to add these modules to your App's Side Menu (step 3)

  • User Groups: It shows to your app users the chat groups that they have already joined.
  • Groups List: It shows a list of your app's available chat groups for users to join.

Complementary Modules

  • Contacts List: It shows to your app users a list of their contacts who also use your app.
  • Direct Chat Module: a simple tab will be allocated for a direct, one-to-one chat with the user of your choice.

Similar Apps

Facebook MessengerTelegramWhatsAppWeChat
messengermessengertelegramtelegramwhatsappwhatsappwechatwechat

Module Walkthrough

Activating the Chat Group

1.) Click "Chat Groups" in the Admin menu, placed on the left of your nandbox dashboard.

2.) Click on the "Create New" button or the small icon at the bottom right side of the page, to be prompted with a pop-up window where you can create a new group.

3.) A window will appear where you can enter your group name and description.

You will also find a video below explaining the process.

4.) After you created the group, you can hover over it and click on the edit button to configure the group.

5.) You can enter the group image, group name, and description in the first section.

6.) 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 a 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:

splashexamplesplashexample

7.) You can also include a search filter in your group:

Note that you have to include the search module in your app first, here are the steps to do that:

Adding a Search Filter

1.) After you installed the Search module, click on the gear icon to configure it.

2.) Scroll down until you reach "filter" and then click on setup.

3.) You will be prompted with a screen where you can tick multiple filters, you can name the filter, and assign the search criteria for each filter.

4.) After you're done, don't forget to tick the filter and click save.

5.) Go back to the group settings, you will find your filter there, and you can assign each group to come up with a selected search filter.

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:

googleleadgooglelead The native advanced type will look like this: googlelead2googlelead2

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.) And paste it in the Ad Google Key section in nandbox app builder.

16.) Next, copy the second key (banner key).

17.) And 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.) And 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.) Next, you need to activate the ads in the modules that you installed in your app.

26.) Click on the configuration icon on the installed module.

27.) Toggle the button to enable ads.

28.) When you enable ads, you can specify the number of posts after which an ad will appear, note that the minimum number of posts after which an ad can appear is 5.


Did this page help you?