Winter sale
White label agency solution
White label agency solution
White label agency solution
Up to 50% off on all licenses
Up to 50% off on all licenses
Up to 50% off on all licenses
Grab Yours

Booking Website


Customize Design

Customize the Design of Your Booking Form

This section allows you to tailor the visual elements of Trafft according to your preferences. From color schemes and themes to font styles, explore the various customization features to create a personalized and visually appealing user experience.

The Look and Feel section, responsible for the design customization of Trafft is split into three sections:

  • Layout Settings
  • Hero Section
  • Footer Section

We’ll go through them in detail below.

Layout Settings

Booking Form Step Order

Within the Look and Feel section, you have the ability to rearrange the steps in the booking form through a simple drag-and-drop interface.

It’s important to note that the last step, the General Information step, is fixed and cannot be reordered. This is where your customers provide their essential information, such as name, email, and phone number, along with any additional custom fields you’ve added for your service.

It’s also worth noting that the Date & Time step can also be locked in the 5th place if you enable the Recurring Appointments feature. Once this feature is enabled, you will not be able to rearrange this step as all previous steps are required before the recurring appointments can be offered to a customer.

Theme and Appearance

In the “Theme and Appearance” section, you have the option to select from 8 pre-defined themes, available in both Light and Dark versions for your booking website.

Additionally, you can further customize these themes to align with your business. You have the following additional options to design your booking website:

  • Select Primary Color: Choose from pre-made colors or click on the color beside the HEX code to open a palette and select the desired color. You can also directly input a HEX code if you have a specific color defined in your business design.
  • Select Background Theme Color: Choose the main color for the background of your website.
  • Select Font: Choose from available fonts, including Inter, Roboto, Monserrat, Poppins, Archivo, Maven Pro, and Roboto Slab. Upon selection, you can preview the font immediately. Learn how to add more fonts under the Custom Code section.
  • Interface Appearance: This option lets you choose the theme for objects on your booking website, such as service cards and single service page background. Opt for the light option for a lighter appearance or the dark option for a black appearance.
  • Website Background Image: Change the pattern of the background with a choice of 8 different background patterns, each customizable with colors that complement your business

Branding Settings

In the branding settings, you can manage the visibility of the Trafft mark at the bottom of your booking website. By default, the checkbox on the Customize page/Branding settings is selected, displaying the Trafft mark. If you uncheck this option, you can eliminate the ‘Made with Trafft’ mark.

Please Note: The Branding Settings option is currently available only for the Scaling license plan users.

Services Page Settings

In the “Services Page Settings“, you can specify the presentation of your services on the Services page of the booking website. This includes the desired view of the services section, configuring the service image size, deciding whether filters will appear on the booking website, and determining their orientation, whether horizontal or vertical.

Website Settings

Within Website Settings, there are additional customization options:

  • Page Title: Enter a title for your booking website pages.
  • Website Logo: Upload your logo to be displayed in the upper-left corner of the Booking Page by selecting the file from your computer or dragging and dropping it into the designated area.
  • Favicon: You can also add a favicon to your booking website by uploading the desired image in the “Website favicon” field.

Customize Thank You Page

In the “Customize Thank You Page” section, you have the option to customize the content that appears after your customer successfully completes their booking. You can set a different image, heading, and description, replacing the default “Thank you!” text, “Your appointment is scheduled. We appreciate your trust and look forward to seeing you.” text, and default icon, respectively.

As indicated in the screenshot below, if you included multiple languages in the Language section, you will also be able to translate these sections into other languages.

Hero Section

In the Hero Section, you have the opportunity to elevate the customization of your booking experience. You can choose the size of your Hero section and specify the content within it, including the heading, description, and text alignments.

To add an image to your Hero Section, navigate to the “Hero Section Background” section. Here, you can not only apply a background fade effect but also personalize your Call to Action (CTA) Button Label by labeling it as you want.

The CTA Button URL can be used to redirect the customers to a different web page, specified in this field (opens in a new tab).

Footer Section

Please Note: The fields available in the Footer Section appear or disappear based on what you’ve enabled in the Footer Layout step. For instance, if you disable the “Custom Text” slider, the section to enter the custom text in the Footer Section will not appear.

We’ve taken the customization of the booking website a step further by offering you the option to customize your Footer Section too. Initially, you can choose the content that will appear in your Footer Section and determine whether it will be arranged in two or three columns.

The Company Info section automatically retrieves information about your company (business name, address, website, and phone number) from Settings -> Company Settings. You can use the hyperlink in this section to quickly access the Company Settings and adjust these details if necessary.

The logo you previously uploaded in the Layout Settings can be utilized in the footer. In the Logo section, you can define its size, choosing between small or large.

If enabled, the company Slogan and Custom Text fields will appear next. Here, you can define the slogan of your company and any custom text you feel is needed for your customers.

The last two sections allow you to add links to your company’s Social Media (Facebook, YouTube, Instagram, X, LinkedIn, and TikTok) profiles and to add any Custom Links that may be useful for your customers’ user experience.

Once added, these social media links and custom links will appear in the footer of your booking website:

Have more questions?

If you face an issue, and cannot find an answer in the documentation, feel free to submit a support ticket!