Booking & Events App

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

Booking & Events App

Features included in the app:

  1. Event List
  2. Booking
  3. My Bookings
  4. Booking Validation
  5. Booking Redemption
  6. Payment Gateway
  7. News Feed
  8. 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.

modules

2.) Drag one of the modules and drop it into your Home Menu's setup area.

searchmodule

3.) That's it! Your module is now installed.

Now we're gonna take one feature at a time and explain it.

Event List

The event 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 event list module in the Booking & Events category.

bookings

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

eventslist

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.

syncevents

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.

icons

2.) Click on the gear icon to configure the settings of the module.

gear

3.) This displays the feature where the event list syncs with the system calendar.

features

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

eventlist

Module Walkthrough

Creating a New Event

1.) From the side menu, click events.

2.) Click on create to create a new event.

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.

eventdetails

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

searchfilter

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

When you are done, click next.

next

Next, add the event image.

image

Once you're done, click finish.

finish

Editing an Event

After you created the event hover over it.

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

edit

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

payments

The third icon will delete the event.

delete

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

Click edit and scroll down to the bottom of the page, 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.

others

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.

others

Setting the Price of the Event

Click on the second icon.

payments

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

price

Creating a New Calendar

Note that any event created in the calendar will be repeated every week.

1.) From the admin menu, click on 'Calendars'.

calendar

2.) Click create to create a new calendar.

createcalendar

3.) Edit the details of the calendar event, for example, this could be the details of an upcoming event.

calendardetails

4.) You will be prompted with the following screen.

maininfo

Here you can set the official and national holidays to let the users know that there will be no event on this particular day.

Open the calendar and select the day.

holidays

Next, you can set the schedule of the event for each day of the week.

So, for example, if your event will last for a couple of days, you can set what will happen each day in detail.

opening

Click the plus icon to add another event on the day.

plusicon

Enter the details of the second event.

opening2

Select the days, when you are done click create.

Booking

The booking module allows your users to reserve tickets to a one-time event, or book tickets to reoccurring sessions.

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 Booking & Events category.

bookings

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, you can rename the module and choose an Android and an iOS icon for it.

icons

2.) Click on the gear icon to configure the settings of the module.

gear

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.

ads

Don't forget to click save.

Must-Have Modules

  • Validation: Allows you to validate tickets generated by nandbox app builder and determine whether they are valid or expired.
  • Redemption: Allows you to redeem tickets generated by nandbox app builder.

Complementary Modules

  • Event List: The events list module displays the list of events that the user accepted the invitation to.
  • My Bookings: Displays a list of bookings that the user booked.

Module Walkthrough

Creating a New Booking Product

1.) From the side menu, click on bookings.

2.) Click create to create a new booking.

createbooking

3.) Firstly, enter the name of your booking and its description.

bookingdetails

4.) Set the location of the booking product, note that once you enter a location a drop-down menu will appear with a list of locations to choose from.

location

5.) Set the duration of the booking product, in minutes, so for example, if your booking product is a yoga session, how long you want your session to be.

duration

6.) Set the booking product gap, which is the time between each booking product and the next one, for example, if you have two successive yoga sessions, this will be the time gap you want between them.

gap

7.) Set the time zone.

timezone

Click next.

next

8.) Set an image for the booking product.

image

9.) Set whether it is cancellable or not.

If you set it as cancellable, you can determine the cancelation window where the user can cancel the booking.

cancel

You can choose from different durations.

cancelduration

10.) The days available allow you to determine when the event will reoccur, so for example, if you have a yoga session every Sunday and Thursday, you can set it accordingly. Set the reoccurring days that the booking product will take place.

daysavailable

Set the time that the booking product will take place and its duration.

workinghours

Set the number of bookings, which is the total number of available bookings for the event, we will set the price at the end of the steps.

nobookings

11.) You can also set your holidays, click on the calendar icon.

holidays

You will be prompted with a calendar, from which you can choose your holidays.

calendar

Once you're finished click create to create the booking.

create

Setting the Price

12.) To set up the pricing for the booking, hover over the booking and click the dollar sign.

price

13.) Set the price per booking and the currency.

payments

The payment type determines if your users will be billed per session or per bundle of sessions.

To charge users per session, select Direct Payment.

To charge users per bundle of sessions, select Balance.

paymenttype

If you set it to Bundle, the user will buy the whole bundle of sessions one time and every time a user attends a session it will be deducted from the total number of sessions of the bundle, so for example, the bundle can consist of four yoga sessions and it will be bought once by the user, when the user attends a session, it will be deducted from the total of four sessions, which means that the remaining available sessions for the user will be three sessions.

Creating a Bundle of Sessions

1.) Go to the Bundles section from the side menu.

bundle

2.) Click create to create a new bundle.

createbundle

3.) Fill in the details of the bundle and click create.

createbundle

The display name is the name of the bundle that will appear to your users, while the max unit is the maximum number of units that a user can order.

4.) Next, you need to link the bundle that you created to the booking product. Hover over the bundle and click edit.

yogasessions

5.) Scroll down, and click on Add Products.

addproducts

6.) Click on Bookings, select the booking product, and click Insert.

insert

7.) Don't forget to save.

save

Checking the Tickets Booked

To check the booked tickets, go back to the booking section from the side menu.

Hover over the booking product and click view tickets.

checktickets

You will be prompted with the list of users who booked this booking product.

Assigning an Admin

After you are done with creating a booking, you need to assign an admin to it.

The admin will receive a notification every time a user books the event.

Hover over the booking and click the edit icon.

editevent

Scroll to the bottom of the page, and click add admin.

admin

Choose your admin and check the box next to the name, and then click add.

addadmin

You can also assign roles from the users tab.

The booking list will be displayed to the admin as follows.

My Bookings

The my bookings module displays to your users the list of bookings that they made on your app.

You can install this module in your app in the following places:

  • App's Home Menu ✓
  • App's Side Menu ✓

You can find the my bookings module in the Booking & Events category.

bookings

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

userbooking

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, 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.

gear

3.) All the users' bookings will be displayed as follows:

bookinglist

Complementary Modules

  • Event List: The events list module displays the list of events that the user accepted the invitation to.
  • My Bookings: Displays a list of bookings that the user booked.
  • Validation: Allows you to validate tickets generated by nandbox app builder and determine whether they are valid or expired.
  • Redemption: Allows you to redeem tickets generated by nandbox app builder.

Validation

The validation module allows you to validate tickets generated by nandbox app builder and determine whether they are valid or expired.

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 ticket validate module in the Booking & Events category.

bookings

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

validation

Duplicability

This module can be duplicated in several sections in your app. ✓

Main Feature

Validation

A feature that allows you to validate the users' tickets.

Each ticket generated by nandbox app builder will have a unique QR code.

patientticket

The ticket is scanned using a built-in QR reader in the module.

scanticket

If the ticket is valid, the validation will be successful and the reader will display that the ticket is valid.

validticket

If the ticket has expired, the validation will fail and the reader will display that it has expired.

validationfailed

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.

icons

2.) Click on the gear icon to configure the settings of the module.

gear

Must-Have Modules

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

  • Booking: Allows you to create events, generate tickets, and create bookings.
  • Redemption: Allows you to redeem tickets generated by nandbox app builder.

Complementary Modules

  • Event List: The events list module displays the list of events that the user accepted the invitation to.
  • My Bookings: Displays a list of bookings that the user booked.

Redemption

The Redemption module allows you to redeem tickets generated by nandbox app builder.

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 ticket redeem module in the Booking & Events category.

bookings

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

redemption

Duplicability

This module can be duplicated in several sections in your app. ✓

Main Feature

Redemption: A feature that allows users to redeem their tickets

Each ticket generated by nandbox app builder will have a unique QR code.

patientticket

The ticket is scanned using a built-in QR reader in the module.

scanticket

If the ticket is valid, the redeeming process will be successful and the reader will display that the ticket is redeemed.

redeemsuccessful

If the ticket was canceled, the redeeming process will fail and the reader will display that it has been canceled.

redeemfailed

The redeeming process will also fail if the ticket has expired

ticketused

Or if the ticket has been used.

ticketused

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.

icons

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

Must-Have Modules

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

  • Booking: Allows you to create events, generate tickets, and create bookings.
  • Validation: Allows you to validate tickets generated by nandbox app builder and determine whether they are valid or expired.

Complementary Modules

  • Event List: The events list module displays the list of events that the user accepted the invitation to.
  • My Bookings: Displays a list of bookings that the user booked.

Payment Gateways

This section will allow you to choose how your customers will pay in your app.

Go to the app settings page, and click on App Settings from the top menu.

appsettings

Scroll down to find the payment options.

payments

Credit Card

Users can pay through credit card using one of the following payment gateways:

Stripe is one of the major payment gateways that will allow your customers to shop and buy your products using their credit or debit card.

Follow the steps in this article to integrate your app with Stripe.

Follow the steps in this article to integrate your app with PayPal.

You can also enable the Cash Option.

cash

In-App Purchases

In-App purchases allow your customers to make additional purchases in your app.

Follow the steps in this article to enable in-app purchases in your app.

News Feed

Where you can announce events and booking schedules.

post

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 channel modules in the social category.

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

postsandfeed

Duplicability

This module can only be installed in your home menu.

Click here to check out the features of the feed module.

Configuration

1.) Once you installed the module, by dragging and dropping it in the home menu, you can rename the module and choose an Android and an iOS icon for it.

icon

2.) Click on the gear icon to configure the settings of the module.

gearicon

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.

enableads

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.

layout

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

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.

    talktoadmin

  • 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.

stickynote
  • You can also choose the background and text color.

sticky

  • Post Footer

    Scroll at the very end of the features, you'll find a post footer that gives your posts the look and feel of a Facebook page, you can choose to add the like button, the reply button, the number of views, and the share button. You can also customize the heart color with the like button.

footer

  • Post Filter

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

filter

Click here to know how to create a new tag.

  • Context Menu

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

contextmenu Scroll down to the bottom of the list.

contextmenu

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.

toggle

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

rearrange

You can also disable the feature altogether.

disablefeature

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

saveprogress

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.
  • My Channels: It shows the users a list of all channels they have joined on your app.

Complementary Modules

  • Channels: 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.
  • Polls: It enables creating polls and attaching them to posts.

Similar Apps

FacebookLinkedInTwitterInstagram
facebooklinkedintwitterinstagram

Module Walkthrough

Activating the Feeds Module

1.) From the side menu click posts.

2.) Click this icon to create a new post.

newpost

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

changebackground

And your post will look like this after editing.

nandboxFacebook
nandboxpostfacebookpost

4.) You can also post a photo, video, gif, audio, or file.

audiogif

5.) You can also publish an instant article, have the nandbox app builder 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.

6.) You can also attach a poll, (note that you have to create a poll before you can attach it to a post).

poll

7.) You can also send this post to multiple destinations, click on the plus icon and choose where you want to send your post.

sendto

8.) Once you selected another destination, it will appear here.

adddestination

9.) You can also deliver the notifications quietly.

quiet

10.) Once you are ready to send your post, click send!

Create a Scheduled Post

1.) From the side menu, click on scheduled post.

schedule

2.) Click the icon below to create a new scheduled post.

newschedule

3.) Click on the schedule icon at the bottom of the screen.

schedulepost

4.) Select the date and time, and click schedule post.

5.) Click send to schedule post.

scheduleposts

6.) Your post is now scheduled!

done

Create New Tags

1.) From the side menu, click tags.

tag

2.) Click create.

createtag

3.) Enter the tag name and description, choose whether you want it to be a private tag or not, and then click save.

tagdetails

4.) Then you can add users to this tag, and from the side menu, click users.

users

5.) Choose a user and click edit.

edituser

6.) Click add a tag.

addtag

7.) Select the tag name and click add.

addtags

8.) Then save.

savetag

9.) Now you can send a post to a specific tag.

choosetag

10.) Select the tag and click add.

choosetag2

  • You can also insert emojis in your post.

emoji

Finally, when you are ready to publish your post, click send.

sendpost

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.

addapp

4.) Select the platform of your app.

platform

5.) If your app is published on Google Play Store or App Store, select yes, if not, select no.

applisted

6.) Next, enter the app name and click add app.

appname

7.) Click on create ad unit to start creating ads.

adunit

8.) Next, select the ad type, currently, nandbox app builder supports the banner and the native advanced format.

adtype

The banner type will look like this:

googlelead The native advanced type will look like this: googlelead2

9.) Click on the banner type, enter the ad name and click create ad unit.

createadunit

You will be prompted with two keys.

keys

10.) Open nandbox app builder.

11.) Go to App settings.

appsettings

12.) Click on Google ads.

googleads

13.) You will be prompted with the following screen.

android

14.) Copy the first key (Google ad app ID).

15.) Paste it in the Ad Google Key section in nandbox app builder.

firstfield

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

bannerkey

17.) Paste it in the Ad Banner Key section in nandbox app builder.

secondfield

18.) Next, click create another ad unit.

anotherad

19.) Select Native advanced.

native

20.) Enter the ad name and click create ad unit.

adunit

21.) Copy the second key (native key).

nativekey

22.) Paste it in the Ad Native Key section in nandbox app builder.

thirdfield

23.) Next, select which ad you wish to activate and click save.

activation

24.) You can repeat the same process with the iOS version of your app.

ios

25.) Enter the ad frequency, which is the number of posts after which an ad will appear.

frequency

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.