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 imported products into 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 set up the product as follows:

1. Choose "Appointment" as the Profile. The Appointment widget will only work with Appointment profiled products.
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. In this example we want it to be based on the selected variant. Go ahead and enter the duration for the 2 variants that we created in the Shopify product configuration page as 60 minutes and 90 minutes respectively.
4. Add lead or lag time (if applicable).
5. Assign the Resources available to work on this type of booking.
6. If you have multiple locations you can assign it to the product. This will let you include the location's address in reminder emails.
7. To restrict when bookings can last be accepted you can add a cutoff date or future date
8. Choose a set of colours for the appointment.  This allows you to differentiate appointments by colour on the Booking Overview Calendar.
9. Save. 

BTA Opening Hours Page

The times available for bookings across all of your appointment products is determined by the opening hours you have set up. 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 configured for your store via BTA Admin > Configuration > 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). 
   • Interval: Leave the Interval field blank the app will use the duration value that you specified when configuring the product to determine the time slots. If you enter a value in the field it will be used to set the interval of the time slots, in terms of hours,  while the duration value will determine the actual duration of the booking. 
   • 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.
   • Show Location: Shows location details on the booking confirmation step.