Booking
Booking
Welcome to the “Booking” block documentation.
Looking to integrate a booking block into your website? Our block simplifies the process of collecting user data and enhancing access to your services.
In this guide, we'll show you how to use the editor to customize your booking block.
Step 1 : Open the Editor
1. Go to Booking template.
2. Click on "Edit" after choosing your template .
class="" alt="">Step 2 : Edit Booking slots
1. Enter your weekdays time slots, you can add morning and evening slots and even more if needed. Click on the "+" to add "from" and "To" times.
class="flex justify-center items-start h-auto w-auto" alt="">Example Template:
class="" alt="">2. Customize your availabilities by adding a custom date time slots, could be a holiday or a day off too just leave the times "From" and "To" empty.
class="flex justify-center items-start h-auto w-auto" alt="">3. Add some booking details such as "Buffer time between meetings/appointments" and "Group amout allowed to book the same date-time"
class="flex justify-center items-start h-auto w-auto" alt="">4. Limit your scheduling dates by adding a "Date Range", or by modifying the Min and Max notices.
class="flex justify-center items-start h-auto w-auto" alt="">Step 3 : Edit form and second page
To open the second page you can click on "Form" panel or just pick a date and time from the first page.
1. Update the header that contains a "back" button and an editable title.
class="" alt="">2. To customize the form's content, simply click the "Edit Form" button. For more details check Registration form documentation.
class="flex justify-center items-start h-auto w-auto" alt="">Check more settings under "Form" such as recaptcha site key, rounding and other props
class="flex justify-center items-start h-auto w-auto" alt="">3. Set the "Selected date-time" preview details such as "Border width", "Round level" ...
class="flex justify-center items-start h-auto w-auto" alt="">Step 4 : Adjust the Layout
1. Control your Layout's size, rounding, width, choosing how it's displayed, and even adding animations. To switch from the section view to the popup view, just activate the popup and the closable toggle. After that, you can select its position on the page.
class="flex justify-center items-start h-auto w-80" alt="">You can also add an overlay if the popup is centered.
class="flex justify-center items-start h-auto w-auto" alt="">2. To display a "Toggle Button" activate the "show" switcher in the "toggle button panel" and adjust the button position, size, border, rounding, colors and theme.
class="flex justify-center items-start h-auto w-80" alt="">
class="flex justify-center items-start h-auto w-80" alt="">Step 5 : Edit Block Content
1. Update "Default Settings".
class="flex justify-center items-start h-auto w-80" alt="">
class="flex justify-center items-start h-auto w-auto" alt="">
class="flex justify-center items-start h-auto w-auto" alt="">2. Update "Calendar Settings".
class="flex justify-center items-start h-auto w-80" alt="">
class="flex justify-center items-start h-auto w-80" alt="">
class="flex justify-center items-start h-auto w-80" alt="">
class="flex justify-center items-start h-auto w-80" alt="">Step 6 : Customize Style and Colors
Starting with the main colors for the layout and the block theme, then moving to the Calendar colors and background tranparency, finishing with the form colors.
class="flex justify-center items-start h-auto w-80" alt="">Step 7 : Integrate Google Calendar
For a better and more efficient experience you can connect to your Google Calendar and pick a calendar of your choice to align your booking schedule with available calendar events. Submitted bookings will be automatically saved to your linked calendar.
To connect click on "Integration" label then click "Connect to Google Calendar" then choose a "calendar" to proceed with your connection. You can Disconnect at any time.
class="flex justify-center items-start h-auto w-80" alt="">Step 8 : Preview
Lastly, you can click on “Preview” to see how your Booking Block looks on both desktop and mobile devices. After this, you can proceed to the next step.
For further information on configuring triggers, please navigate to the Block Triggers section.