The appointments widget lets your members book your private and 1:1 services (appointments) directly from your website. This article shows you how to set it up, explains the options, and lists what the widget can and cannot do.
Step 1: Create your appointment types
The widget only shows appointment types that already exist in your back office. To learn how to create one, see this article.
Step 2: Configure the widget
Go to Settings > Widgets, click Choose a component and select Appointments.
In the configuration panel you can choose what the widget shows:
All your appointment types as a list. Members pick the service first, then choose a time slot.
One specific category. Select a Category to show only those appointments. Use this when you want the widget to open directly on the schedule of one service, for example on a dedicated page for massages or private lessons.
You can also set the general widget options (popup type, language, compatibility mode). These are explained in Widget: Integration Options.
Step 3: Copy the code and paste it on your website
Copy the code below the configuration box by clicking the copy icon at the top right.
Paste the code on the page of your choice, in an HTML or code block (not a text block). Your members can now book your appointments directly from your website.
Every time you change a setting, a new code is generated. Copy and paste the new code onto your site for the change to take effect.
Showing several appointment widgets
You can add several appointments widgets — for example one per category, each on its own page or section. Generate a separate code for each one in the back office. Do not paste the same code twice on one page: each widget needs its own ID, and two widgets with the same ID conflict with each other.
What the appointments widget cannot do
No calendar view. Appointments are shown as a list of services and time slots, not as a weekly calendar like the calendar widget.
No express checkout. Express checkout is not available for appointments; members go through the standard booking flow.
Prices are not displayed on the list. If you want prices shown, our team can add them with custom CSS, but they will not update automatically — every time you change a price, the display has to be updated by hand.
Limited styling. The appointments widget offers fewer customisation options than other widgets, so custom CSS can only change some elements (for example button colours). Contact us with the changes you would like and we will tell you what is possible.
Troubleshooting
An appointment does not appear in the widget.
Check that the appointment type is published and included in the category you selected. If the appointment has a tag assigned, it is only visible to members who have that tag, so logged-out visitors will not see it.
Only one of my widgets shows, or the wrong one is hidden.
You have probably pasted the same code twice. Generate a separate code for each widget.
The widget looks different from the back-office preview, or does not respond to clicks.
Enable Compatibility Mode in your widget settings, then copy and paste the new code. See Widget: most common problems.
Nothing appears at all.
Make sure the code was pasted in an HTML or code block, not a text block.
Still stuck? Contact our support team with the page URL and a screenshot, and we'll take a look.