Works on WordPress, Squarespace, Wix, or plain HTML. No plugin required.
A button that opens the picker
Paste this where you want the button to appear:
<script src="https://YOURSITE.com/book/widget.js"
data-type="counseling"
data-label="Book a time"
data-accent="#1264ff"></script>| Attribute | What it does |
|---|---|
data-type | Required. The booking type's slug — the /book/… part shown under its name on the Booking types screen. |
data-label | Button text. Defaults to "Book a time". |
data-accent | Button and highlight colour, as a hex code. |
data-mode | button (default) or inline to show the picker directly with no button. |
data-host | One person's link name, to book only them. Leave it out and the button offers the whole team. |
A button for one person
Add data-host to book a single team member — their bio page, their email signature, their own site:
<script src="https://YOURSITE.com/book/widget.js"
data-type="discovery-call"
data-host="sarah"
data-label="Book time with Sarah"></script>Each host can copy their own version, already filled in, from My Booking in their avatar menu.
Or an iframe, if you want to size it yourself
<iframe src="https://YOURSITE.com/book/counseling/embed?accent=1264ff"
style="width:100%;min-height:720px;border:0"
loading="lazy"></iframe>For one person, put their link name before /embed — /book/discovery-call/sarah/embed.
What goes in place of YOURSITE.com
Your organization's own public web address — your custom domain if you have set one up, otherwise your Studio address. Not the address you log in to.
Good to know
- There is nothing to create in Studio first and no key to copy. Change the button colour by editing the snippet.
- The picker only ever shows genuinely open times. It is reading the same availability your booking page uses.
- Add the snippet more than once with different
data-typevalues to offer several booking types on one page.