Booking Website

The Booking Website section in Trafft allows you to fully customize the look and feel of your public booking page. From basic branding elements to detailed page layouts, you can control how your services, employees, and information appear to your customers.

Each sub-menu focuses on a specific part of your website, making it easier to personalize every detail.

Some of the features mentioned in this article, including hiding the "Made with Trafft" mark, full Theme Customization, the Employees Page, Employee and Service Badges, and Custom Code, are only available on specific plans. Check the plan comparison table to see which plan includes each one.

General
Theme and Appearance
Hero Section
Footer Section
Services Page
Employees Page
Custom Code

General

The General settings allow you to configure the basic elements of your booking website.

Under Account Settings, choose who will be able to make a booking: both registered and guest customers, only registered customers, or only guest customers.

Under Website and Branding Settings, you can configure:

Page Title and Page Description: set the name and description that appear in the browser tab and search engines.
Share Preview Image: the image shown when your booking page is shared on social media.
Website logo and Website favicon: upload your business logo and favicon to match your brand identity.
Show "Made with Trafft" mark: choose whether to display the Trafft attribution on your booking page.

These settings are the foundation of your booking page's identity and should be completed first before customizing other sections.

Theme and Appearance

The Theme and Appearance tab lets you define the overall style of your booking website.

Under Theme, choose from 8 pre-defined themes: Light, Blossom, Everest, Ocean, Dark, Brooklyn, Honeycomb, and Neo.

Under Appearance, you can configure:

Select primary color: the primary color visible on your background.
Select background theme color: the color that appears as the background throughout your booking website.
Select Font: choose a font for your booking website.
Interface appearance: select either a dark or light theme for objects on your booking website.
Website background image: choose a custom background image for your booking website.

Updating these settings instantly refreshes the design across all pages.

Hero Section

The Hero Section is the large banner customers see first when they open your booking page.

Under Layout, choose between No Hero Section, Small, or Large.

Under Content, you can configure:

Text Align: left, center, or right.
Heading: your main headline text, with formatting options and a custom heading color.
Description: supporting text below the heading, with formatting options and a custom description color.
CTA Button Label and CTA Button URL: the text and destination for your call-to-action button.

Under Background, you can upload a Hero Section Background image and enable Background Fade to slowly fade the image into the background.

This section is key to creating a strong first impression and directing users toward booking.

The Footer Section lets you configure what appears at the bottom of your booking website.

Under Layout, choose between 2 Columns or 3 Columns, then toggle and reorder which elements appear in each column: Logo, Slogan, Custom Text, Company Name, Website, Phone number, Address, Custom Links & Policies, and Social Media.

Additional sections let you configure each of these elements in detail:

Logo: set the logo size.
Slogan: write a custom company slogan.
Social Media: add profile URLs for Facebook, YouTube, Instagram, X, LinkedIn, and TikTok.
Custom Text: write any additional text you'd like to display.
Custom Links & Policies: add custom links, such as to policy pages.

Your business name, address, website, and phone number are pulled in automatically from Settings → Company Settings.

Services Page

The Services Page displays all services available for booking.

Under Services Page Settings, choose between Grid View and List View, and set the Card image size to No Image, Small, or Large.

You can also enable Show Filters to display a filter panel, and choose its layout: Vertical or Horizontal.

Optimizing this page helps customers quickly find and select the right service.

Employees Page

The Employees Page showcases your staff and allows customers to book directly with specific team members. Use the Show the Employees Page on the Booking Website toggle to enable or disable it.

Under Employees Page Settings, choose between Grid View or List View, and set the Card image size to No Image, Small, or Large. Employee cards can also display Employee and Service Badges, such as "Best Value."

You can also enable Show Filters to display a filter panel, and choose its layout: Vertical or Horizontal.

This page is ideal for businesses where customers prefer choosing who they book with.

The Custom Code section is designed for advanced customization, with separate fields for Custom CSS and Custom JS.

Use this carefully to maintain performance and compatibility.

Custom Code

Have more questions

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