---
description: Learn how to style and customize the booking widget
---

# Customizing the Frontend

{% hint style="info" %}
This guide assumes that a booking widget is already present in one of your posts or pages
{% endhint %}

## Reach the Customizer

To reach the WordPress Customizer TheBooking section, you can either:

* In WordPress lateral menu, navigate **`Appearance > Customize`** an then select TeamBooking
* In TeamBooking admin page, navigate **`Settings > Style`** and then click the customize button

After that, in the right section of the Customizer you can see your website. Navigate to a page or post where the TeamBooking frontend widget resides, so you can see your a real-time preview of your changes.

<figure><img src="https://3756443945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB6MFqxyFEkMr6ffOGnO0%2Fuploads%2FGrLu9tsZ7J8UbMkHvi8l%2Fimage.png?alt=media&#x26;token=bfebbf1c-35a3-4967-a451-b9043ebea0df" alt=""><figcaption><p>WordPress Customizer with the TeamBooking panel opened</p></figcaption></figure>

## Style and Colors

Inside the Style & Colors tab, you can customize the aspect of the frontend widget in terms of colors, borders and backgrounds.

As soon as you change anything, the right panel will be updated to show you the result.

Remember to hit the **`Publish`** button to save any change.

{% hint style="info" %}
TheBooking is programmed to adapt the foreground text color to the background color automatically, for contrast maximization
{% endhint %}

<figure><img src="https://3756443945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB6MFqxyFEkMr6ffOGnO0%2Fuploads%2F8SchBw1bwQ87WEBzoCl3%2Fimage.png?alt=media&#x26;token=128eaf13-0484-46db-9d52-6c81bfcbf82e" alt=""><figcaption><p>An example of colors customization</p></figcaption></figure>

## Maps

Zoom and style of the Google Maps (if present) can be customized here.

<figure><img src="https://3756443945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB6MFqxyFEkMr6ffOGnO0%2Fuploads%2FSgoJjHuQE7O9WsbCmAA4%2Fimage.png?alt=media&#x26;token=8295c8ac-005c-4acd-bac9-2d8d6796d03e" alt=""><figcaption><p>Example of Google Maps style customization</p></figcaption></figure>

## Behaviour

In this panel you can customize the behaviour of the calendar preview dots.

By default, they show the number of available slots per service, but you can also hide them entirely, or show the service name instead of the number.

<figure><img src="https://3756443945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB6MFqxyFEkMr6ffOGnO0%2Fuploads%2FnTSsmyjr13grC2AHEoFj%2Fimage.png?alt=media&#x26;token=da8c12b7-f903-48c4-b790-081798884d69" alt=""><figcaption><p>Hiding the dots</p></figcaption></figure>
