Customize Your Booking Website 🎨

To customize your booking experience click on Customize button in the header or on the settings menu.

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

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.

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

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.

Under " Item image size on service list", 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.

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

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.

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.

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".

Lastly, the third option you can set if you have the pro or expert license is whether you want the Trafft mark displayed on the bottom of your booking website. There is a checkbox on the Customize page, " Show 'Made with Trafft' mark", which is checked by default, so the Trafft mark is shown, and once you uncheck it, you will be able to remove the 'Made with Trafft' mark on your booking website.

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.

Language

Under Language&Labels, you can translate the booking website and invoices to a different language, by using the "Language" 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. You can also customize how certain labels will be named all over your booking form. You can change the "Service", "Services", "Employee" and "Any Employee" labels. In case, these fields are left empty, the labels will be assumed to be the default.

Please note: 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.