How to Build the Reservation Feature

Last Updated: Feb 28, 2018 01:11PM PST

Description

The Reservation feature is a great option for restaurants, beauty salons, offices, and more! Using the built-in booking system, users can reserve time slots for various services, and you can fill up your calendar without having to take calls or reply to emails non-stop.

This feature also allows you to:

  • Implement an optional up-front commitment fee for the appointment
  • Manage your appointments with a beautiful built-in calendar
  • Receive notifications via email when appointments are scheduled
  • Provide users with easy appointment management
  • Book more clients and increase repeat appointments

 

Great for these industries:

  • Restaurants
  • Spas/Salons
  • Gyms/Fitness Studios

Monetization ideas:

  • Charge the business a service fee for each reservation that is booked.

Setup

Navigate to the Build tab to begin the setup process, then follow the steps below.

1. Click ADD FEATURE.

2. Choose the Reservation feature from the menu, then click SELECT.

3. Name your feature, then click ADD. Your new feature will now appear in the left-side menu.

4. Click on the feature to expand its menu. From the left-side menu you can:

  • use the checkbox to delete the feature.
  • click and drag the arrow icon to rearrange.
  • edit the feature icon by clicking it, then selecting a new image from the fly-up menu.
  • toggle on/off the feature.
  • jump to a specific section (i.e. Content or Custom Design) to adjust the feature settings.

Content

Here you can rename the feature and add your services.

1. Under Screen Info, change your Screen/Feature Name or leave as-is. This is the name that will appear in the app’s feature menu (e.g. “Booking” as opposed to “Reservation Feature”).

2. Under Reservation, click Header to add a thumbnail.

  • Thumbnail Image: Upload a thumbnail image (140x140px in PNG format).

3. Under Locations, click ADD LOCATION to add a new address.

  • Service Hours: Select each location’s operating hours. Turn on the toggle to indicate that the location is open on a given day. Adjust the time according to your service hours. If there is a break in service during the day, click the plus sign to add additional hours.
  • Website: Input a valid website for this location. When users click the one-touch website button this website will be opened automatically.
  • Email: Input a valid email address for this location. When users click the one-touch Email button, this email address will auto-populate into the field.
  • Telephone: Input a valid phone number for this location. When users click the one-touch Call button, this is the phone number it will dial.
  • Address Section 1 & Address Section 2: Use these fields to name the location whatever you’d like (e.g. “Mission Location” & “San Francisco”). They’ll serve as the top & bottom lines of the location name.
  • Address: Search for the address in the “Enter a query” field or enter the coordinates in the Latitude/Longitude fields below. When you use the coordinates option, Google Maps will pull the nearest address.
  • Distance Type: Specify whether distance should appear in Kilometers or Miles.

4. Click Information to add your business’s general information.

  • Username: Give your business a name.
  • Description: Use the WYSIWYG editor to customize the business’s description.
  • Unlimited Reservation Toggle: Turn on the toggle to indicate that there are unlimited reservations for each time slot.
  • Unavailable Dates: Click ADD BLOCK DATE to add a specific date reservations will not be available
    • Date: Select each date individually.
    • Description: Add a reason for why services are not available on that date (ex. Holiday).

5. Click Payment to add payment options.

  • Currency: Select the appropriate currency from the drop-down menu.
  • Braintree: Toggle on to enable credit card processing through Braintree.
  • Cash: Toggle on to enable cash payment. Users will need to pay upon delivery if this option is selected.

6. Click services, then ADD SERVICE to specify the services you offer.

  • Details:
    • Service Name: Give your service a name.
    • Price: Indicate the price of each reservation.
    • Reservation Fee: Decide if you are taking a percentage or specific dollar amount by selecting the $ or % sign in the drop down, then input a number indicating the percentage or dollar amount the user will be charged for making the reservation.
    • Unlimited Simultaneous Service Possibilities: Turn on this toggle to indicate that unlimited services can be booked at this time.
    • Max Service Possibilities: If the toggle is turned off, you will be asked to select the maximum number of services that can be booked by unique customers for each time slot.
    • Duration: Indicate the duration of the service.
    • Image of Item: Upload an image for each service.
  • Availability:
    • Choose your item’s available locations: Select which locations offer this service.
    • Availability: Select when a specific service is offered.

7.  Click Emails to customize the order confirmation emails.

  • Customer Confirmation: This is the confirmation email customers will receive when they place an order.
  • Admin Receipt: This is the confirmation email the app admin will receive when an order is placed.
  • Custom Guides: Customize how individual items are displayed in confirmation emails.

8. Click Add-ons to add a printer or preview your web widget here.

  • Printer: You can connect a printer to the Reservation feature to automatically print order confirmations.
    • Click ADD PRINTER to connect an e-printer.
    • Click CONNECT TO GOOGLE CLOUD PRINTER (BETA) if you’d prefer to use a Cloud-ready printer (not recommended).

4. Click SAVE at the top right when you’re done.

Custom Design

If you’d like create a custom design for this feature instead of using the Global Design, you’ll do so here. Skip over this section.

Examples

User Account Registration

Users must register for an account through the Reservation feature in order to book appointments. Once they register, they’ll be able to log into the feature each time they return. They can view upcoming and past reservations, plus cancel reservations through the app.

Registering for an account:

March 2018 Update:
With March 2018 Update, the Reservations feature will now use the Sign-up | Login-in screens for account creation. These screens contain a customizable headline as a customizable option as well as a welcomed UI refresh. Find our more regarding the Sign-Up adjustments here.
Once using March 2018 source code your app’s users will now show in the new Customers page to provide powerful insights on your users.

Here are some examples of the new Reservations Sign-up screens.
The phone number collect screen will only display if the users phone number is not already registered.

 

Previous source code:
Registering for an account:

Blog No comments