Configuring a Frontend
Create a new Frontend
After you have sucessfully authenticated the Frontend Builder you can start adding a frontend.
Steps:
Navigate to GoMeddo settings and click on Frontend Builder
Press add Frontend
This will create a new frontend, if you click it you’ll be navigated to the configuration page of that frontend where you can configure the customer journey steps and where you can configure the styling.
Define Customer Journey
The frontend builder allows you to customize the booking journey and allow you to book one or a combination of dimensions.
The frontend builder uses Reservation Blueprints, which determine the shape of the reservation which is made. You can configure a blueprint to specify which dimension(s) you want to book, the length of the booking, set default values, etc. Reservation Blueprints for Parent Child The blueprint itself is the “type of appointment” that the customer makes.
Define the steps your customers take when making a booking. You can configure which steps the user needs to take in the frontend overview page. The steps you enable will show up as navigation steps for the customer making the booking on the frontend.
Using this concept you can for example make a booking in a room with a staff member (specified on the blueprint) but on the frontend the user only selects the location.
Styling
You can configure your frontend so it blends in on the website it will be part off. GoMeddo offers a wide range of color options.
Color | Explanation |
|---|---|
Background Color | Main background color of the UI. |
Primary Color | Primary brand color used for key interactive elements. |
Call To Action Color | Highlight for key actions (e.g. Next/Submit/Pay buttons). |
Primary Text Color | Main text color across the UI. |
Destructive Color | Used for input field errors. |
Secondary Background Color | Used for secondary panels or surfaces, like selection cards. |
Primary Text on Primary | Used for secondary panels or surfaces, like selection cards. |
Text on Call To Action | Text/icon color on top of call to action backgrounds. |
Secondary Text Color | Supporting or less prominent text. |
Example setup:
