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

You can view an example of the Appointment widget as it appears to your customers here: https://pragmaticinsights.myshopify.com/products/manicure

Shopify Product Configuration Page

To begin we create the product that customers will be booking in Shopify Admin.

1. Create a Shopify product to represent your Appointment/Service. Be sure to set the inventory to Do Not Track.
2. Add variants if applicable. E.g. 60 Minute Facial, 90 Minute Facial + Mani/Pedi.

Do not enter the dates or times of the appointment as variants because the schedule will be based off of your store's opening hours. You can view more on adding and editing variants in this article from Shopify. 

BTA Product Configuration Page

After you have saved the product in Shopify, click on "BookThatApp Configuration" from the More actions menu at the top of the page: 

This will import the product into BTA and take you to the BTA product configuration page.

If you have previously set up products in BTA you will be prompted to copy the settings from one of them at this time. Go ahead and choose an existing Appointment product if you have set one up otherwise follow these steps:

1. Choose "Appointment" as the Profile.
2. 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.
3. 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. 
   2. Enter the duration for each of the variants (for example 60 minutes and 90 minutes).
4. Add lead or lag time (if applicable).
5. If you have multiple locations you can assign it to the product. This will let you include the location's address in reminder emails.
6. To restrict when bookings can last be accepted you can add a cutoff date or future date
7. Choose a set of colors for the appointment.  This allows you to differentiate appointments by color on the Booking Overview Calendar.
8. 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. 

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.