Customize your booking widget
Style the booking widget to match your site: colours, corners, sizing, and optional buttons. You edit it with a live preview, and nothing goes live until you publish.
You need the owner or manager role.
Open the appearance editor
Go to Website in the sidebar.
Click Edit appearance. First-time setup opens straight into it.
Use the Desktop and Mobile toggle to preview both. Nothing saves until you finish.
Set the colours
Switch between two colour modes:
Click to edit - click any part of the preview (a card, a badge, the header) to colour just that region.
All colors - open the full list of colour tokens (accent, background, text, surfaces, mobile, header, filter button, badges, and more) and set each one.
Leave a colour blank to use the widget's default.
Corners and sizing
Corners - choose Square, Rounded, or Round.
Sizing - set Max width, Padding, and a Mobile sticky offset (to push the date bar below your own fixed nav on mobile). Leave blank to use the responsive default.
Optional buttons
Add a floating account button - a fixed corner sign-in and profile button. See Add a login button to your website.
Show an open-access button - adds a Book button in the schedule for a drop-in open-access service, with its own icon and colours.
Save
Click Continue to embed (first time) or Done to publish your changes. Published changes appear on your site within a few minutes.
Troubleshooting
Your changes are not on your site yet. Make sure you clicked Continue to embed or Done; changes propagate within a few minutes.
A colour looks wrong on mobile. Mobile has its own colour tokens; check the Mobile group under All colors.
Related
Add the booking widget to your website
Add a login button to your website
