Setup Guide: Inline Appointment Widget

This article will walk you through setting up the inline appointment widget. This widget is unique from the other appointment widgets because it will allow you to embed the widget on a custom page, and the widget includes a product selector so that your customer can select from all of your appointment products. 

Before completing this setup guide configuration steps please check to make sure the Booking Widgets App Embed option is enabled for the Shopify Theme according to the following help article: Enabling the BTA Booking Widgets App Embed

 

There are 4 parts we will be covering:

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

Example: https://bookthatapp-demo.com/pages/embedded-appointment-widget

 

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/115003355866-Adding-Removing-Products

 

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 Widgets to begin the process. 

2. After selecting the option for the type of bookings you will take you will see an "Add more widgets to your store" interface. For this example, we selected the Appointments option which is displayed on the product page.

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 a 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 widget 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 on the Product, Variant, or Resource levels. For appointments, it will typically be resource-based because the staff member taking the booking could also work on different products.

6. Enter the Duration of the appointment.

In this example we want it to change depending on what variant is selected so we choose Variant as the Basis.

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

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

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

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

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

12. Select Save. 

 

BTA Operating Hours Page

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

You can find out more about Operating Hours here.

 

Widget Configuration

The Inline 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 Inline Appointments under "Add more widgets to your store":
   
3. In the Services tab of the widget you can choose to use this widget configuration for all your Appointment products/services, or you can specify specific services.
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.
   • Type (static): Displays the widget type.
   • ID (static): Displays the app widget's unique internal identifier.
   • Design Widget: Select this option to quickly access the app's Branding Configuration section of the app to customize the appearance of the Widget. 
   • Display Mode: Determines how the widget appears on the product page. You must choose the Embed Mode.
   • Booking Fields: When selected the additional fields created in the Booking Fields section of the app will display. 
   • Swatches: Display variants using swatches instead of a drop-down selector. 
   • Make another booking: Enable to allow customers to quickly create another free-charge booking. This option is valid only if the "Bypass Shopify checkout" option is enabled and if the service follows the conditions to Bypass the checkout.
   • Remaining Places: When checked the number of available spaces will be shown.
   • Redirect: Specifies what will happen when the product is added to the cart: Cart Page, Checkout, and Continue Shopping options. 
   • Bypass Shopify checkout: This setting is used to tell the widget to bypass the Shopify checkout process. 
   • Waitlist: Enables/disables the waitlist feature.
   • Time Format: Choose between 'Casual' (ie. 2 pm) or '24 Hours' (ie. 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. 
   • Time Range: When enabled, the widget will show time slots as a range. (ie. 1:00 PM - 2:00 PM)
   • Booked-out time slots: Display/hide unavailable booking timeslots.
   • Show Remaining Places: When checked the number of available spaces will be shown.
   • Timezone Helper: Includes a timezone selector at the bottom of the widget.
   • Location picker: Allow the customer to select a configured location.
   • Location map: Shows location details on the booking confirmation step.
   • Price: Display/hide the price in the widget.
   • Price Format: Choose to include the abbreviated currency from the Shopify settings or not. (ie. USD)
   • Resource: Allow the customer to select a Resource (Staff, Room and/or Equipment resources).
   • Quantity: Allow the customer to book more than 1 space at a time. 
   • Set Minimum Quantity: After selecting this option you will be able to set a minimum quantity that must be met to place a booking. 

Standard Mode

The standard mode for this widget is the Embed Mode.

If you have products where the price is set at $0 you can enable the setting for Bypass Shopify checkout? so that the widget will bypass the checkout process. 

 

Embed Mode

The Embed mode is the required Mode setting for the inline appointment widget.  

You will need to select the Copy button to copy the code snippet so that you can add it to the preferred location of your theme via a theme file found in your Shopify admin Theme's section.