Customize Your Booking Website 🎨

For customizing your booking experience, select the "Customize" button located in the left sidebar.

Under the Customize page, you will see six sections General, Look and Feel, Language, Labels, Custom Fields and Custom Code.

General Settings

Labels

General Settings

First that you will see on the top of the page are a snippet of the code (iFrame) that you should copy and paste to your website if you want to embed the Trafft booking form to your existing website. You can embed this code to any website no matter what CMS or code is built. Below the code, you can click to copy it to the clipboard and then paste it on your website.

Under the Booking Form Settings, you can enable several different options:

Enable the "Show unavailable/booked slots in time slot selection" if you want to show the busy slots on your booking form, on the Time Selection step. This option will show your booked timeslots as unavailable, so your customers will be able to see them, but will only be able to book the available slots.
You can set the URL of the page you want your customers to be redirected to after successfully booking an appointment, instead of seeing the congratulate page, by enabling the "Redirect URL after a successful booking" and entering the appropriate URL in the "Set Redirect URL" field.
Under this, you can see the "Show Time Zone option to customers" checkbox which enables your client's time zone to be shown on the booking website and have them view and book appointments in their own time zone.
Enable the Look Busy option, if you want to appear busier on your booking forms. This option will hide a certain chunk of your time slots on the booking form, or if you enable it together with the "Show unavailable/booked slots in time slot selection", then a certain chunk of your timeslots will be shown as booked on the booking website. In the "Percentage of available slots as booked" enter the the percentage of your day that you want to show as booked on your booking booking form. In the "Preferred period of the day busy slots are shown", choose between the First or Last part of the day, from which the time slots will be taken and shown as booked.
Set your Custom Appointment Cancellation URLs, for the pages where your customers will be redirected to when they are cancelling their appointment from the link you can add through the placeholders. You can set bot the url to the page where the customer will be taken to after he cancels an appointment successfully or unsuccessfully.

Under Account Settings, you can choose whether your customers need to log in to book appointments with you or to entirely disable this option, you can leave the option to choose if they want to log in or book as a guest. This is up to you, find what fits your business best and you can easily choose one of the options by selecting the radio button next to one of them.

Customer Settings

Within the Customer settings, you have the choice to determine whether the email or phone number fields should be obligatory, both on the booking form and when generating a new appointment from the backend. This allows you to decide whether clients must input this information during the booking process. You can make these fields mandatory by checking the boxes labeled " Set Email field as mandatory" and " Set phone number field as mandatory". Furthermore, you can also request a reason from your customers when canceling an appointment.

Under Employee Selection Settings you can choose whether you want to give your clients the option to choose the employee for the appointment or not, as well as set up the logic behind selecting employees if your customer hasn't. If you check the "Customer can choose employee" option then your customer will be able to select an employee with whom they want to book or choose the "Any Employee" option which will automatically assign the employee, depending on the selection logic. If you check the "Hide "Any Employee" option from selection" then your customers will not be able to see the "Any Employee" option on the booking website and will have to select which employee they want to book an appointment with. If you don't want to show any sort of employee selection on the booking website and hide this step, then check the "Hide employee selection" option.

If your customer chooses the Any Employee option on the booking website or doesn't select an employee, you can set the logic of how the employee will be assigned for the appointment under the "Employee selection logic" dropdown. You can choose between Round Robin, which will assign the employees in a circular order, and Least Busy employee, an employee with Highest or Lowest price.

Look and Feel

Layout Settings

Below you will see the options to customize your booking form to your needs and your band. Under the Look and Feel, you will see steps in the booking form, with drag-and-drop you can reorder them as you wish. Note that the last step - the General Information step - can not be reordered, this is the step where your customer will fill out his info such as name, email, and phone number, and there will be added custom fields if you add them for your service.

Under " Theme and Appearance" you can choose between 8 predefined themes, in either the Light or Dark version for your booking website.

Additionally, you can customize these themes even more to fit your business. You have the following additional option to choose the design of your booking website:

Select primary color - You can choose one of the pre-made colors or click on the color beside the HEX code to open a palette and choose the color you want. Additionally, you can add HEX code right away if you have some color-defined from your business design so it can be applied here.
Select background theme color - here you can select the main color for the background of your website.
Select font - here you can choose one of the available fonts. At the moment there are Inter, Roboto, Monserrat, Poppins, Archivo, Maven Pro, and Roboto Slab. Once you choose it you will be able to see its preview right away. You can also find out more about how to add more fonts to your booking website under the Custom Code section.
Interface appearance - this option allows you to choose the theme for objects on your booking website, such as service cards, single service page background, etc. You can choose the light option, which will mean they will be light, or dark, meaning they will be black.
Website background image - here you can change the pattern of the background of your booking website, you have a choice between 8 different background patterns, and each one can be customized with the colors that suit your business the best.

In the branding settings, you have the option to control the visibility of the Trafft mark at the bottom of your booking website (available for users that have starter or scaling license). By default, a checkbox on the Customize page/Branding settings is selected, displaying the Trafft mark on your booking website. However, if you uncheck this option, you will have the ability to remove the 'Made with Trafft' mark, but please note that this modification is only available to those with a starter or scaling license.

Under "Card Image Size", you can choose how your services will be displayed on the Services page on the booking website, and you can choose between an item with a larger picture or one with a smaller service picture.

Following that, you have the choice to enable or disable filters and select the "Filters & Categories" preview.

Under Website Settings, you will find a few more options.

In case you have either a Pro or Expert license, here you can also set three additional options. The first option you can customize is the "Page Title", where you can enter a title for your booking website's pages.

Website Logo - You can upload a logo for your website by choosing the file from your computer or dragging and dropping it into the blue field. The logo will be shown on the Booking Page in the upper left corner.

The second option you can add if you have either of these two licenses is the favicon you want to be shown on your booking website, and you can simply do this by uploading the image you want to set as your favicon in the field named "Website favicon".

Under the "Customize Thank You Page" section you can set a different image, heading and description which will show on the step after your customer finish their booking successfully. The heading will replace the "Thank you!" text, the Description will replace the "Your appointment is scheduled. We appreciate your trust and look forward to seeing you." text, and image will replace our default icon.

Hero Section

Within the Hero Section, you can enhance the customization of your booking experience. You are provided with the choice to select the size of your Hero section and also determine the content for this section, including the heading, description, and text alignments.

To include an image in your Hero Section, proceed to the following section called "Hero Section Background." Here, you can not only add a background fade effect but also customize your Call to Action (CTA) Button Label by naming it as "Book Here," "Book Now," or any other preferred label of your choice.

Footer Section

But that's not all – we've gone a step further by providing you the ability to personalize your Footer Section as well. To begin with, you can decide what content will be displayed in your Footer Section and whether it will be presented in two or three columns.

Additionally, you have the option to include your logo, slogan, and any customized text within your footer section.

If your business has social media profiles, you can effortlessly insert links, and they will be displayed within your booking form.

Finally, you have the freedom to include any other custom link of your choice.

Language (Multilingual Support)

Under Language, you can translate the booking website and invoices to a different language, by using the "Languages" dropdown, and currently, the languages available are Dutch, English, French, German, Italian, Spanish, Romanian, Danish, Portuguese, Polish, Swedish, Finish, Norwegian, Hungarian, Korean, Japanese and traditional Chinese.

Labels

You also have the flexibility to personalize the labels used throughout your booking form. If these fields are left blank, the default labels will be applied. Presently, there are more than 25 labels that can be translated, and we are continually introducing new ones. Please don't hesitate to contact us and let us know if there's a specific label missing that you require.

Custom Fields

On the Customize page, under the Custom Fields section, you can also set additional fields for your customers to set during the booking process. You can read more on how to set these fields on the Custom Fields page.

Custom Code

Under the Custom Code section, you will have two options:

Custom CSS - here you can add a custom CSS code that will be applied on the booking website so you can change the background color, hide something, or anything else that you need.
Custom JS - here you can add a custom JS code that will be applied to the booking website. Below you will see Account settings like on the image below with three options.

Through these two options, you can also add a different font to your booking website, so you can customize it even more, or if you are embedding the booking form to your own website, this way you can also have the font on your booking form match the font of your whole website.