Your Booking Website in Trafft 💻
You have several ways to access your first booking website made with Trafft:
- By clicking on the "Your Booking Website" button in the bottom left of the admin dashboard. Once you click on this button the website will automatically open in a new tab.
- By clicking on the 🌐 icon in the main sidebar where you have two options:
- Copy link of your booking website by clicking on the Copy icon or marking the link and copying it in the browser.
- Click on the "Open your booking website" to open a website in a new tab.
- From the Customize page (🎨 icon) with also two options:
- "Copy Website URL" where once you click on this option the link will be copied and all you need to do is to paste it in the browser,
- "Go to Website" option where once you click on this option the website will open in a new tab.
The first page that will be shown when you open the Booking website will be the page with your Services. On this page, your customers can see all the services that you offer with its pictures, names, descriptions, extras, duration, and capacity. Duration will show only the duration of the service without the duration of the extra. The price will be shown including service price and all employee's individual prices. If those prices are different, then it will display "From X" using the lowest price defined. Customers can also click on the "+ ... extra available" and see extras that customers can choose with the service during booking. This way, your customers will get enough information before making their bookings.
Besides this, customers can also filter services by one specific category simply by clicking on the category name or they can search for the service by its name if the business has a long list of services that offer.
In the footer of this Booking website, your company details and company logo added in the Company Settings (and part of it during the onboarding process) will be shown.
Booking your first appointment
Once you click on one of two "Book Appointment" buttons the booking form will open showing Categories as the first step of the booking process. We have divided each selection as a separate step on purpose, we plan to add an option on the Customize page to disable steps or change the order of the steps to fit your needs very soon. This will allow you to make a very flexible booking form that matches your business needs. Let's go through each step:
- Select Service Category - here your customers will be asked to choose one of the categories. In each category number of services will be shown and very soon we will also add an option for the customer to see those services before choosing a category. Once the customer chooses a category the "Continue" button will become active and with a click on it, the next step will be shown.
- Select Service - customers can choose one of the available services. Service will be shown with a photo (uploaded in the Service Info) and a name, once clicked its duration and description will be displayed together with extras created for that service. Customers will be able to select one or multiple extras and choose a quantity for each while being able to see the extra name, duration (if defined), and price. Once service is selected "Continue" button will become available and the customer will be able to go to the next step of the booking process.
Please note: Service, Location and Employee steps will also have a Search icon 🔍 above the list so if you have a large list, customers can find what they need by entering the name in the search field.
- Select Location - here your customers will be able to select one of the locations on which service is provided. The location will be shown with a name and a price and once a customer clicks on it, the description will be shown so you can give customers additional information on how they can find the location. Once the customer chooses a location the "Continue" button will become active so the customer can continue to the next step.
- Select Employee - here your customers can choose one of the employees that provide the chosen service on a selected location. If any of the employees have a different price than the defined price for service, then this will be shown as info on the employee bar with +price or -price so the customer can know. Once the employee is selected the "Continue" button will become active so a customer can continue to the next step.
- Who's Coming? - this option is here to give the customer possibility to select if more people are coming with them and choose the number of them to reserve spots. Please note: Those persons will be added as a plus and their personal data will not be collected during the booking. The customer can choose "Myself" if he is coming alone or click on "I'm bringing someone" then the customer can select the number of persons. This number cannot exceed the service and employee's maximum capacity, once this capacity is reached the + button will become disabled. In the field, the minimum number available for selection will be shown right away. Same as on the previous fields, the "Continue" button will become active once this is defined and the customer will be able to continue to the next booking step.
- Select Date and Time - on this step customer will see a monthly calendar with available dates and once the date is selected available times will show with chosen week displayed above so a customer can easily change the selected date without returning to the monthly calendar. Only the start times will be shown but on the sidebar on the right side with appointment details customer will be able to see the total service and extra duration. Once the Date and Time are selected, a customer will be able to continue to the next booking step.
- General Information - on this step customer will be asked to enter his/her first and last name, email, and phone number. At the moment, first and last name and email are mandatory fields while phone field is optional. The flag shown in the phone field will be used from the Default Phone Country Code in General Settings, but the customer can easily change it by selecting another flag from a dropdown. Once all mandatory fields are entered customer will be able to continue to the last step of his booking form. At the moment payment gateways are not implemented, however very soon on this step customer will be able to choose a payment method and pay for the booking right away. Currently, only On-site is available as a payment method.
- Thank you message - this is the final step of the booking process and cannot be edited (this will change soon). During the whole booking process on the sidebar, the customer will see selected choices listed as soon as something is selected, and at any time during the booking, your customer will be able to see these details, further by click on the View Detailed Pricing option he/she will see the detailed calculation. Besides this, during the entire booking process, a progress bar will be shown above the booking form, so the customer will be able to see how many steps there are until the end of the booking.
If you set your email notifications, once the customer gets to the Thank you page the notification to both customer and employee will be sent with appointment details added through the placeholders in email templates.