> For the complete documentation index, see [llms.txt](https://stroheimdesign.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://stroheimdesign.gitbook.io/documentation/fundamentals/booking-workflow.md).

# Booking workflow

Quick demonstration of the frontend workflow, as seen by customers.

What the customer sees on your website depends on the widget type you choose. In our example, we choose the Monthly Calendar, which is suitable for Appointment Services.

The plugin is already configured with 2 services and some availability is provided for them.

<figure><img src="https://3756443945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB6MFqxyFEkMr6ffOGnO0%2Fuploads%2Fg18YIYMuroHwl9CRQAha%2Fimage.png?alt=media&amp;token=bace07b1-9e9c-4b08-bafe-c7e24143e034" alt=""><figcaption><p>Monthly calendar</p></figcaption></figure>

We want to book a sevice on a certain date so we click on it. A step-by-step process starts with the selection of the service (this step is automatically skipped if there is only one service in the selected day).

<figure><img src="https://3756443945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB6MFqxyFEkMr6ffOGnO0%2Fuploads%2F43XrOR3tGNU6prL4O7oo%2Fimage.png?alt=media&amp;token=5a2a6b99-2ef6-4c15-a31c-1331127e9804" alt=""><figcaption><p>Service selection</p></figcaption></figure>

Notice that in our case the 2 services both have a price. In particular *Dental Care* has a variable price, because its reservation form contains choices that may increment the price, when selected (we won't see that in this example, though).

We select **Therapy Session**.

<figure><img src="https://3756443945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB6MFqxyFEkMr6ffOGnO0%2Fuploads%2F4dLTRJDs1Mwdq2Cv79Wc%2Fimage.png?alt=media&amp;token=d5011161-5199-463b-966b-ea23e8e5c062" alt=""><figcaption><p>Time slot selection</p></figcaption></figure>

The next step is the selection of the desired time slot. In our example, the system is configured to allow only one slot per reservation, so we can select one time slot only.

{% hint style="info" %}
The system can also be configured to allow multiple adjacent time slots selection, so that the customer has the ability to extend the reservation time (if a price is configued, the final amount will adapt as well).
{% endhint %}

After the selection, a form to collect reservation data is displayed. In our case, the form is pretty basic, but it's fully configurable and very flexible.

<figure><img src="https://3756443945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB6MFqxyFEkMr6ffOGnO0%2Fuploads%2F6XALuCk5gaSdwrNXPtOY%2Fimage.png?alt=media&amp;token=f4974549-cc02-40c2-be84-60c7a0968873" alt=""><figcaption><p>A basic reservation form</p></figcaption></figure>

In our example, the *Therapy Session* service is configured to have a time slot capacity greater than 1, so it can accept more **tickets**. That means that reservations for the same time slot will be possible until the capacity is full. Final amount adapts to the quantity of tickets selected.

{% hint style="info" %}
A service can also be configured to have a time slot capacity greater than 1 and yet allowing only 1 reservation per customer. In that case, the customer won't see a tickets selection field.
{% endhint %}