You can fully customize the appearance of the BookX booking widget to match your store branding.
1. To customize your widget, go to BookX “Settings” and click “Edit” on Widget Customization.
2. You can set where the date and time picker should appear:
.png?table=block&id=20131e6b-f665-80cb-9466-e54c3cc5c25e&cache=v2)
- Default (above Add to cart button): The date and time picker will appear above the “Add to cart” button.
- Custom position using CSS selectors: Use a custom CSS selector to position the widget on Desktop and Mobile devices.
- Set the HTML position: Before a HTML element, At the start of HTML element, At the end of HTML element, and After a HTML element.
- Enter the HTML selector accordingly.
3. Set your slot visibility to control how much slot information is shown to your customers.
.png?table=block&id=20131e6b-f665-8020-aeff-ea18858477cc&cache=v2)
- Enable the “Hide end times” option to only show the start time for each slot. Best for services in which only start time is necessary.
- Enable the “Hide the number of remaining or total available slots” option to to hide the number of slots remaining.
4. Click “Edit Appearance" to customize the widget’s text, color, size, and more.
.png?table=block&id=20131e6b-f665-80dc-8dec-d00fe7b2cc67&cache=v2)
On the Widget appearance page, you will have the following options:
.png?table=block&id=20131e6b-f665-802d-819e-f7d16c8bce72&cache=v2)
- Widget Theming: In this section, you can set the color for the widget, buttons, and other elements of your widget.
- Text & Translations: In this section, you can set custom text for the widget, error messages, calendar, button, rescheduling, and cancellation.
- Custom CSS: In this section, you can use custom CSS code for advanced customization of your widget as per your liking.
5. Once you complete the widget appearance, click “Save” to apply the changes.
Need help styling with CSS? Contact our customer support. We’re happy to help you customize the widget to match your brand.