Setup Guide: The Appointment Widget

This article will focus on setting up products in BookThatApp (BTA) that represent appointments and/or services, and configuring the Appointment Widget to let customers choose a date and time in your Shopify store. With this configuration the customer will be able to select from available time slots based on your opening hours using a duration based on the selected service and choosing from a list of staff members (resources).   

Please note: If you want to take no charge appointments, please see this tutorial.

There are 3 parts we will be covering:

1. Creating the product in Shopify
2. Configuring the product in BookThatApp
3. Setting up the appointment widget for your store

Example: https://pragmaticinsights.myshopify.com/products/manicure

There are 2 ways to create your products: via the Shopify admin product page, or through the app installation process. We recommend using the app installation method as it streamlines the process and walks you through each of the steps from product creation to implementing your booking widget. 

If you opt to create your product in Shopify first please select the following link.

https://support.zetya.com/hc/en-us/articles/360004069575-Importing-Products-From-Shopify  

 

BookThatApp (BTA) Setup Wizard

The BTA setup wizard walks you through creating a product and configuring the widget that will allow the booking form to display on the product page of your storefront.  

1. In the app admin select Installation to begin the process. 

2. After selecting the option for the type of bookings you will take you will select the Next button to continue the process. For this example we selected the Appointments option.

3. Here are a few brief notes regarding variants.

• Any option representing pricing should be done through variants.
• Do not enter the dates or times of the event as variants because you will create a schedule in the app.
• If you have a minimum party size requirement for your bookings you will want to create a set of variants for Party Size. An example of this would be a booking requirement for the minimum party size of 2 and a maximum party size of 7. 

4. If you created your product in Shopify and imported it into the app choose Appointment as the Profile. This is automatically done if you are creating your product through the app's Setup Wizard. 

The remaining configuration steps are the same regardless of the method you used to create your products.

5. Enter the Capacity. Capacity refers to how many bookings can happen at the same time and can be based at the Product, Variant or Resource levels. For appointments it will be typically be resource based because the staff member taking the booking could also work on different products.

1. Enter the Duration for the appointment.
   1. In this example we want it to change depending on what variant is selected so we choose Variant Basis. 

6. Enter the duration for each of the variants (for example 60 minutes and 90 minutes).

7. Add lead or lag time (if applicable).

8. If you have multiple locations you can assign it to the product. This will let you include the location's address in reminder emails.

9. To restrict when bookings can last be accepted you can add a cutoff date or future date

10. Choose a set of colors for the appointment.  This allows you to differentiate appointments by color on the Booking Overview Calendar.

11. Select Save. 

 

BTA Opening Hours Page

The times available for bookings across all of your appointment products is determined by the Opening Hours. You can find them at BTA Admin > Configuration > Opening Hours.

You can find out more about Opening Hours here.

 

Widget Configuration

The Appointment widget can be used to allow your customers to choose the appointment date and time, and there are several settings available to change the way it works. The widget preview updates in real time so you can see the effect of the changes. 

If you are using the Setup Wizard it will automatically walk you through the steps to configure and customize the widget. If you imported your product from Shopify you will need to complete the following steps. 

Installation

1. Access the widgets section of the app by selecting Widgets.
2. Click 'Add Widget' and select the Appointment Widget to enable it.
3. In the Products tab of the widget you can choose to use this widget configuration for all your Appointment products, or you can specify specific products.
4. Widget Settings
   • Name: You can have multiple Appointment widgets with different settings so you can use the name field to describe what this widget is for.
   • Mode: Determines how the widget appears in the product page. Inline or Popup option.
   • Time Format: Choose between 'Casual' (e.g. 2 pm) or '24 Hours' (e.g. 14:00). 
   • Time Slot Generation: Choose to base the time slots off of the duration specified when you configured the product, or base them off of the interval value you can specify below. 
   • Interval: Enter a value that will be used to set the interval of the time slots, in terms of minutes,  while the duration value will determine the actual duration of the booking. 
   • Timeslots Position: Choose your preferred location to display the timeslots.
   • Display Time Range: When clicked, the widget will show times as a range. E.g. 1:00 PM - 2:00 PM.
   • Show Remaining Places: When checked the number of available spaces will be shown.
   • Allow Choosing Location: Allow the customer to select the location.
   • Allow Choosing Resource: Allow the customer to select the resource.
   • Show Location: Shows location details on the booking confirmation step.
   • Show Timezone Helper: Includes a timezone selector at the bottom of the widget.
   • Display Location Map In Confirmation Step: Will show a map on the confirmation step. Only applicable if the product has a location assigned with a valid street address.
   • Allow Choosing Quantity: Allow the customer to book more than 1 space at a time. 
   • Use Swatches: Display variants using swatches instead of a drop-down selector.