Appointment Scheduling & Payment Processing App Blueprint
Scheduling appointments or meetings using a custom calendar widget can be invaluable for all kinds of businesses. Whether you’re running a shop, salon, or consulting firm, adding an easy-to-manage calendar to your app or website can be highly valuable.
App Blueprints are more than just templates from which to build a specific type of application. We design all of our free App Blueprints to provide one or more key functions that a developer would want to add to their application, regardless of the app’s business use.
The Small Business Booking App Blueprint was designed to enable Backendless users to see how to configure a scheduling tool for their apps. The entirety of this app blueprint was built without code using Backendless’ UI Builder.
The scheduling capabilities include multiple interfaces that you can recreate in your own app. These capabilities include:
- Interactive calendar widget for app users to select an appointment date and time
- User registration and appointment booking modal window for app users to input relevant information and (optionally) create an account for the app
- Admin management portal for app administrators to set availability, review appointment history, and view upcoming appointments
- Customer / user portal for app users to review appointment history and view upcoming appointments
- Stripe API integration allows app users to pay for products and services through the app
- Database-driven content allows the app owner or developer to update page content from the database rather than publishing a new version of the app
The web app, which functions identically to a website, can be purchased for free when creating a new app in Backendless Console. It features a beautiful, responsive design that will look great on any size screen.
The app includes five pages, each with customizable sections that can be easily modified from the app’s backend.
Interactive Calendar Widget
The calendar widget is located in two spots on the home page. When a customer (user) selects an available date, the calendar expands to allow the user to choose from the times available that day.
The hero section also features a fully functional calendar for clients to book through. When a visitor selects a date, they will see all available times available to book. Admin users can set the hours they are available at the admin dashboard (described below).
Admin also has the ability to toggle user registration. This means that the administrator can decide whether users must register for an account to schedule an appointment, or if guest users can schedule one.
With registration required, when booking, visitors will create an account where they can track their appointment history and upcoming appointments.
User Registration And Appointment Booking Modal Window
When a user chooses a date for booking, they will be presented will all available time slots on that date. Time slot availability is set by the site admin in the Admin Management Portal, discussed in the next section.
Upon selecting a time slot, a modal window opens. What the use sees depends on whether or not the user is logged into the site.
If the user is logged in, they will simply choose their service and submit an appointment request. If the user is not logged in, they will choose their service and then either register as a new user or login to their existing account.
Admin Management Portal
The Admin portal provides multiple valuable functions for a site administrator that does not want or need to access the Backendless backend.
Using the portal, the admin can view past and upcoming appointments, toggle user registration on and off, and set their availability (pictured above).
Admin can also toggle payment processing with Stripe on and off. We discuss setting up payment processing below.
Customer / User Portal
When Registered Booking is enabled, customers create their own profile when registering an appointment. Returning customers can then login to see their appointment history and to save time when booking since their information is already saved.
The customer portal is pictured below. It can be found at the booked-profile page in the app blueprint.
Registered customers can see their visit history, upcoming appointments, and update their profile information like email and phone number. Customers can even upload their own profile picture.
Stripe API Integration
The app includes integration with Backendless’ Stripe API plugin. Using the plugin, the app owner is able to collect payment from users via the business’s Stripe account.
To utilize this feature, a Stripe API key must be added to the backend. To do so, visit Backend -> Marketplace -> API Services and get the Stripe Integration Plugin.
Follow the instructions on this page to complete setting up the plugin.
Database-Driven Content
Many on-page elements can be modified using the database. In cases such as the “differentiators” section, you can show more or fewer (than three, pictured) items, change the order, the text, and the icon images in the OurDifference data table.
By being able to modify this content from the database, you can ensure the app’s content is up to date without having to republish the app. This is particularly valuable for apps that are published through app stores, as you can avoid the approval process for every small change.
Dynamic Pricing Section
The Pricing section lets the business display its most popular pricing packages. Pricing packages are also customized from the database, meaning that the app will not need to be republished to update this section.
Each package can be customized with as many items as necessary. Additionally, the business is not limited to three price packages; additional packages can easily be added (or packages removed) in the database. You can also set which package to highlight from the database.
Closing
The Small Business Booking App is a versatile app for a wide range of business types. More importantly, it provides Backendless users with a template to follow for a variety of key Backendless functions.
Using this template, you can see first-hand how to:
- Create and implement a calendar widget
- Collect registrations and other user-input data using a modal window
- Build a simple admin and user portal
- Implement payment processing with Stripe
- Deliver database-driven content to the frontend
Happy Codeless Coding!
Originally published at https://backendless.com on December 6, 2021.
