Creating Appointment Times

In Part II, we built the Contact Info Capture Form. Now, let’s create a means for users to schedule appointments after submitting their information.

Building the Scheduler UI

1. In Web Flows Builder, Inspect the Continue Button in the** Contact Info Capture Form** Web Page. In the Actions tab of the Inspector, add a Navigate to Web Flow Action and select the Schedule Appointment Web Flow.

1. In the Tree, select the Schedule Appointment Web Flow. It should come pre-populated with a Web Page; rename this Web Page “Scheduler” and add a Label Control for the title, which you'll designate “Select appointment time:”

You can also change the Variant of the Label under Style > Variant.

1. Add a Scheduler Control to this Web Page. In the General tab in the Inspector, under Scheduler > Layout, select 1 month to display a larger calendar view.

1. Save your progress.

Creating the Time Slots and Availability Schedule

Toggle over to the Schedules Builder. This is where we will designate blocks of time that make up potential appointment slots that users can pick from. We'll be designating available appointments capable of hosting two people in half-hour intervals from 8AM to 9PM PST, every day but Friday. To do so, we will create two Time Slots and then structure an Availability Schedule out of them.

What are Time Slots and Availability Schedules?

Availability Schedules define the windows of time in which appointments can be scheduled. They are made by combining the requirements of arbitrarily many Time Slots.

Time Slots define simple patterns of one-off or reoccurring blocks of time. A Time Slot might be, for instance, every day from 8AM to 9PM PST.

As Time Slots are the component parts of Availability Schedules, the blocks of time they describe are necessarily more simple. Consider that first example of a Time Slot: every day from 8AM to 9PM PST. This includes major holidays, and there is no easy way to define a Time Slot so that the repeating block of time does not appear on major holidays. Every day from 8AM to 9PM PST except for on multiple arbitrary dates does not count as a simple pattern.

More complex patterns, such as every day from 8AM to 9PM PST except for on multiple arbitrary dates including major holidays are best built out as Availability Schedules. When defining Availability Schedules, a Time Slot like every first day of the year can be subtracted from a Time Slot like every day from 8AM to 9PM PST, resulting in the more complex Availability Schedule every day from 8AM to 9PM PST except the first day of the year. Because Availability Schedules can be constructed out of arbitrarily many Time Slots, there is no limit to how intricate Availability Schedules can become.

Out of the box, Airkit comes with several Time Slots and Availability Schedules (as well as their component Time Slots) pre-configured. These correspond to regional TCPA regulations; utilizing them streamlines the process of creating TCPA-compliant apps.

For further discussion of Time Slots and Availability Schedules, see Schedules Builder.

🚧 Changes made to Time Slots or Availability Schedules will be reflected across all applications stored in an Org. Proceed with caution when modifying an existing Time Slot or Availability Schedule, as your modifications might impact the behavior of applications besides the one you are currently editing.

If you or someone else in your Organization has gone through this tutorial before, you might find that the Time Slots and Availabilities Schedule described in this section have already been created. In such cases, we recommend still following along and constructing the Time Slots and Availabilities Schedule described. To give them unique names, append a number or your initials to the end of each one.

Time Slot 1

1. In the Tree, click on the ‘+’ sign next to Time Slots and rename it to “9 to 5 everyday 30 min”

1. From the Inspector section, make the following configurations:

• Add a description to better identify this time slot, for example "Repeats from 9am to 5pm every day"

• Select the timezone "America/Los_Angeles"

• Set the start and end time we defined for this time slot: 9 am to 5 pm

• In Split Slots, select every 30 minutes

• Set a start date as of the current date

• For the Repeater select "Daily"

• Allow a capacity of two appointments per slot by checking on Limited and changing the associated number to 2

Time Slot 2

1. In the Tree, click on the ‘+’ sign next to Time Slots and rename it to “Fridays all day”.

2. From the Inspector section, make the following configurations:

• Add a description to better identify this time slot, for example "Repeats all day every Friday"

• Select the timezone "America/Los_Angeles"

• Select the All Day box

• In Starts On, select the following Friday

• Set the Repeater to "Weekly on Friday"

• Leave Capacity as Unlimited

Availability Schedule

1. In the Tree, click on the ‘+’ sign next to Availability Schedules and rename it to “9 to 5 all days but Friday”

1. Then, from the Inspector section, make the following configurations:

• Add a description to better identify this schedule, for example "Repeats 9 to 5 every day except on Fridays"

• Assign an Availability Schedule Key for it that is intuitive and contains no spaces; for example: "9-to-5-sans-Fridays"

• Select the timezone "America/Los_Angeles"

• In Time Slots click on the ‘+’ sign to add your two recently-created time slots. For the first time slot, select Add, as we are going to add this to the calendar. For the second time slot, select Substract, as we don’t want users to set appointments on Fridays:

So now we have a calendar that allows for two appointments within slots of 30 minutes, every day from 9 to 5, except on Fridays. This is how it looks:

📘 As a best practice, remember to keep all your Time Slots and Availability Schedules with intuitive descriptions, as once they are created, they are available to all the applications within your Org.

You've now constructed a customized Availability Schedule out of bespoke Time Slots.

Save your progress and get ready to tie your custom Availability Schedule to your Scheduler Web Control.