PreBook Button Block: Adding a Booking Button

The PreBook Button Block allows you to place a booking button anywhere on your website. When clicked, it opens the booking form in a modal window, providing a seamless user experience. This block is highly customizable and powerful for targeted experiences.

Key features:

• Compact button format that saves space on your pages.
• Opens a modal window with the booking form.
• Offers the same filtering and preselection options as the PreBook Form Block.
• Includes extensive styling options to match your website’s design.

Adding the Button Block to Pages/Posts

To add the PreBook Button block to any page or post:

1. Edit the page/post where you want to add the booking button.
2. Click the + button to add a new block.
3. Search for PreBook or browse the Widgets category.
4. Select the PreBook Button block.
5. The button will appear with default settings and the label Book an Appointment.
6. Click Publish or Update to make it live.

Button Block Customization

Settings

To customize the PreBook Button block:

1. Select the PreBook Button block in the editor.
2. In the block settings panel (right sidebar), enable Customize Booking Form Data.
3. Once enabled, access the same data mode options as the PreBook Form Block. Choose between two data modes:
   • Use Filters: Display a subset of services and staff.
   • Use Preselect: Pre-select a service or staff member to simplify booking.

Filter Settings

The Filter Settings work the same way as in the PreBook Form Block (see 3.2.3.2):

• Filter by Category
• Filter by Service
• Filter by Staff (Business mode only)

Preselect Settings

The Preselect Settings also function like the PreBook Form Block (see 3.2.3.3):

• Preselect a Service
• Preselect a Staff (Business mode only)

Styles

You can customize the button’s appearance using Gutenberg’s block settings:

• Color: Set text and background colors.
• Typography: Adjust size, font, appearance, line height, letter spacing, decoration, and letter case.
• Padding: Modify spacing around the button.
• Border & Shadow: Customize border style, radius, and shadow effects.

Use the Gutenberg block settings to tweak these options visually.

---

FAQs & Troubleshooting

Q: Can I change the button text?

A: Yes, edit the button text directly in the Gutenberg block editor.

Q: What if the modal doesn’t open?

A: Check your theme’s compatibility or contact support (see Getting Help and Support).