The Booking & Events components enable app owners to design their booking layout in order to enhance user experience and make reservations for your services, obtain tickets for bookings and events they have already made, or make bookings and buy tickets for bundles of recurring services.
This component is the best for Service and Entertainment apps.
Included Features
- Manage your booking interface:
Show off all the services you offer, spread out your booking collections, make a layout that fits your business, and keep your booking lists up to date.
- Offer multiple payment options:
You will have multiple payment gateways, including PayPal and Stripe. You only need to set up the payment gateway of your choice, set your credentials, and enjoy tracking your profit.
Components
There are three components included:
- Booking & Events Center: Shows your booking & events workspace interface designed by component elements.
- Category Showcase: Shows a group of bookings or events listed in a certain collection.
- Booking Spotlight: Represents a certain booking on your app.
- Event Spotlight: Represents a certain event on your app.
Category Showcase can display a collection of bookings or events; think about a medical app; Category Showcase will show a list of available doctors. The Booking Spotlight highlights a specific appointment, like a one-on-one consultation with a selected doctor. Meanwhile, the Event Spotlight focuses on a specific medical seminar or health awareness session. For example, a clinic app can use the category component to list all specialists, the single booking component to show a cardiology appointment, and the single event component to feature an upcoming wellness workshop—enhancing user experience without needing a full hospital booking system.
How To Install The Component
This component can be installed in:
- App's Navigation Page ✓
- App's Side Menu ✓
You can find the Booking & Events components in the Booking & Events section. Click or drag and drop the components into your navigation or side menu to install them.
How To Configure The Component: Booking & Events Center
Click the gear icon to configure the component settings.
Rename the component, choose an Android and an iOS icon for it and upload a background image for your booking & events center screens.
In the admin menu, you will find the Booking & Events menu:
- Market: Here, you can add your categories and personalize your own booking center interface.
- Categories: A category is a collection of bookings. For example, you may make a category for teachers who solely teach yoga and another for teachers who teach classes regarding healthy eating.
- Bookings: Make a reservation for any service you offer with fantastic features, including customizable calendars based on the services you offer—hotel, medical, home remodeling, and more!
- Events: Creating events like concerts, festivals, or communities can be organized to boost user engagement with your app.
- Orders: This is where you can monitor your clients' booking orders and payment transactions.
To keep from getting lost, you need to do these steps in order.
Creating A Booking
- From the admin menu, click 'Bookings’.
- Click ‘Add New Booking’.
- A window will appear where you can enter your booking title and description, category, time zone and booking images.
- Organization
Choose your booking vendor, add tags, and add a category.
Note that you need to create a category first!
- Theme:
Choose your theme.
- Location: Add your booking location.
- Time slot duration: Session duration time.
- Gap between time slots: The break time between booking sessions.
- Set ticket purchase deadline before event: Include the time that users have to make their reservations.
- Cancellability: You can activate the option by setting a fixed time for the user to cancel the reservation.
- Holiday: Choose the days of the holidays when your office won't be open. Click the calendar icon to choose your holidays.
- Active Days: Configure the days that your business will run on; this section allows you to determine when the session begins and ends, so, for example, if you provide a yoga class every Sunday and Monday, select the day:
- Set your start time and end time for your working hours for this day.
- Set how many bookings you want your user to make per time slot.
- Set the maximum number you want your user to create.
- Pricing
- Price: Add the selling price you want to use.
- Compare-at price: This section is for you if you want to examine how your reservation appears both before and after a discount. Add your booking price before the discount. The discounted price will be calculated and displayed to users as a percentage.
- Mark 'Charge tax on this product' if you charge tax.
- Cost per item: Add your booking's original price.
- Profit and Margin will be calculated automatically once you add the cost per item.
For instance, if a service costs $85 to produce but costs $100 to sell, the profit and margin will be calculated automatically to demonstrate to the business owner how much progress he has made.
Note that cost per item, Profit, and Margin are only for the business owner, as users won't be able to see these choices as it calculates and tracks how much money you have made with your business.
And when you click ‘Create’, additional options will appear:
- Booking Status & Information
Above the booking image, select the state of your product; if it isn't in stock, select ‘Offline’, and below, you’ll find the booking's created ID and date of creation.
- Inventory
- By adding the quantity of stocks, you can keep track of it. Additionally, you can update it if your service grows.
- If you charge tax on this booking.
- If your booking has a SKU or barcode.
- Variants
This section is about setting up booking options for users, as they can choose from multiple pre-selected items—think of yoga instructors—and the user gets to choose a specific one of them. Click ‘Add options’ and let’s start:
⇒ Option Name: Add the category name of your choices.
⇒ Option Values: Add your choices
⇒ Add another option: You can add another option by clicking ‘Add Options’, and once you're done, click 'Done' to save your settings.
You can delete, add a specific price for certain options, and choose the status of a specific choice: limited or unlimited booking seats; if it’s limited, don’t forget to update how many seats are left of this option.
If you have a certain option that has a different booking location, date or time, click ‘Custom Settings’.
And start customizing the option’s own settings.
And don’t forget to save.
Creating An Event
- From the admin menu, click 'Events'.
- Click ‘Create A New Event’.
- Exactly like booking, enter your event title and description, category, time zone and event images.
Choose event vendor, add tags, add a category and choose a theme.
Set the event’s location, choose the event's date if it falls on a specific day or has a set number of days, together with setting the start and end time (the event's duration time).
Add your available ticket number, maximum reservation for each user, allow purchasing tickets at the event option, and finally add your ticket’s purchase deadline and cancellation timing.
Check the pricing section in booking.
Then, click ‘Create’.
Check the Inventory and Variants section in booking.
Create Categories
- From the admin menu, click 'Categories’.
- Click ‘Add New Category’.
- A window will appear where you can enter your category title and description, click or drag and drop an image, select a category theme and choose if this category will hold created events or bookings.
And when you click ‘Create’, additional options will appear:
- Below the category image, you’ll find the category’s created ID and date of creation.
- Now, it’s time to assign events/bookings to this category. Click ‘Add Product.’
Select the event/booking and click ‘Done’.
If you select Event as your category type, only the events will be shown, and vice versa.
Keep in mind that there are two ways to add an event/booking to a category: you can either add the event/booking to the category section or assign the category to the event/booking section.
Create a Booking & Events Marketplace
Now it's time to design your booking space layout and start assigning your categories. You can use two methods to do so:
- You can access the market section from the admin menu, click ‘Add New Marketplace’ and start designing your booking space.
- Or, you can go back to the booking & event center component and click ‘Setup’.
In the design area, you'll find some elements you can put on the screen to make the shape of your interface:
- Headline
- Buttons
- Cards
- Categories
Make sure to drag and drop the elements into your workspace.
⇒ Category Element:
A category card is an element that you can use to assign your created categories to. Click or drag and drop a category card and click the gear icon to open it’s settings section.
Settings:
The settings for each category card are pretty similar; add a headline, font size, headline alignment and it’s tint. And don’t forget to upload an image if the card has an image-including option.
All Cards differ in style (Square or Wide), whether it has headline option or not, etc.
When you’re done choosing your preferred cards, tap ‘Select’.
And assign the card’s category, and click ‘Done’.
And don’t forget to add your booking center name and click ‘Save App Config’ once done.
Check out this guide to understand how to arrange your elements.
Orders
This is where you can track booking & events orders submitted by your app users.
- From the admin menu, click 'Orders.’
- You will be prompted to the orders page, where you can check all the details of your users' booked orders.
- Click on one of your booking orders to check order transaction details.
Payment Gateways
Remember to enable the payment methods you wish to provide your users with during the booking or event purchase process. Stripe, Cash, and PayPal are your options.
Follow this guide to set up your booking & event's payment gateways.
How To Configure The Component: Category Showcase
Click the gear icon to configure the component setting.
Rename the component, choose an Android and an iOS icon for it and tap ‘Select’ to assign a category to the component.
Choose your collection and click ‘Done’.
How To Configure The Component: Booking Spotlight
Click the gear icon to configure the component setting.
Rename the component, choose an Android and an iOS icon for it and tap ‘Select’ to assign a product to the component.
Choose your product and click ‘Done’.
How To Configure The Component: Event Spotlight
Click the gear icon to configure the component setting.
Rename the component, choose an Android and an iOS icon for it and tap ‘Select’ to assign a product to the component.
Choose your product and click ‘Done’.
Must-Have Components
You must include all your payment components:
- Order Manager Spotlight: It shows all booking & event orders created by the user, including all the order details (date & time of created order, payment method type, status, etc.).
- Shopping Cart Spotlight: It allows users to add, review, and manage scheduled bookings or events before proceeding to checkout.
- My Calendar: Include a calendar component so that customers may track their event schedule throughout the day or at a specific time by creating a complete booking or event calendar (agenda).
Create a calendar for multi-day events; for example, if you have an event spanning several days with a unique program for each day, using a calendar to organize daily schedules would be highly beneficial. It helps users easily track their activities and ensures they don’t miss any scheduled times.
The created calendar can only be posted in a feed center or a channel. Click here to know how.
