Customize Your Booking Website 🎨

To customize your booking experience click on the arrow next to the Booking website button in the top menu and then click on the Customize. 

On this drop-down you will see two more options:

  1. Copy Website URL - if you click on this option the URL of your website will be copied and you will need to open a new tab in your browser, paste it and click Enter so the website can be opened.
  2. Go To Website - if you click on this option your website will be opened in a new browser tab right away.

Currently, there are only a few options here but very soon we will add more of them to give you the option to make the entire mini-website that will match your business needs. 

Embed iFrame to your website

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. 

Below you will see the options to customize your booking form to your needs and your band. Under the Booking form settings, 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 Customization, you will find few more options. 

  • 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. Please be aware that at the moment the background on the website is white so it is not a good idea to set some brighter colors.
  • Select Font - here you can choose one of the available fonts. At the moment there are Inter, Roboto, Monserrat, Poppins, Archivo, Maven Pro, Roboto Slab. Once you choose it you will be able to see its preview right away.
  • Upload Logo - You can upload a logo for your website by choosing the file from your computer or rag and doping it to the blue field. The logo will be shown on the Booking Page in the upper left corner. 

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

This will enable you to choose whether you want your customers to need to log in to book an appointment, if you do not want a login option at all, or if you want to allow both registered users or guests to book. Find what fits your business best by simply choosing one of the options.