Growth & Embedding
Put your booking page on your own website
Generate the Calso embed code, choose between an inline, popup, floating, or card widget, and paste it into your own site — or install the WordPress plugin and use a shortcode instead — so clients book without leaving your page.
Your booking page can live inside your own website, so someone reading about what you do can pick a time without ever leaving the page they are on. Calso writes the code for you; your only job is to choose how it should look and paste one block into your site.
This lives on the Embed page, under Insights in the sidebar. The page is titled Embed Widget, and everything on it feeds one thing: the block of code at the bottom under Embed Code. Embedding needs the Practice plan or above — on Starter the page shows Upgrade to Practice to unlock and a View plans link instead.
The four widget styles
The four tiles across the top of the page decide the shape of the thing on your website. Pick one before anything else, because the rest of the page changes with it.
| Style | What a visitor sees |
|---|---|
| Inline | Your booking page sits directly in the page, like any other section. It grows and shrinks to fit whatever step the visitor is on, so it never scrolls inside its own little box. |
| Popup | A button appears exactly where you pasted the code. Clicking it opens your booking page in a window over the page. |
| Floating Button | A rounded button pinned to the bottom-right corner, floating above everything as the visitor scrolls. It opens the same window. Because it is pinned, it does not matter where on the page you paste the code. |
| Card | A compact card showing one session's name, description, length, and price, with a Book Now button that opens the booking window. |
Inline suits a dedicated "Book a session" page. Popup suits a call to action partway down a sales page. Floating Button suits a site where you want the option available on every page. Card suits a services page where each thing you offer is described in its own block.
What the widget shows
Under Configuration, the Event Type dropdown decides whether the widget opens one specific session or your whole booking page.
Leave it on All Events (Hub Page) and the widget shows everything on your public booking page, arranged the way you arranged it in your booking page settings — the visitor picks what they want, then picks a time. Choose a single event type instead and the widget skips straight to that one, opening on its calendar — the better choice when the page around it has already explained what they are booking.
Card works differently: it needs one specific event type, because the card is built from that session's own details. Until you choose one, the dropdown reads Select an event type... and the page tells you Card mode requires a specific event type. Choose one and the card fills in. Those details are read from Calso rather than copied into your site, so if you change the price later the card updates itself — you do not touch the site again. The card is cached for up to an hour, so give an edit a little time to show up on the live page.
Generate the code and paste it
- Open the Embed page
Click Embed in the sidebar, under Insights.
- Choose a style
Click Inline, Popup, Floating Button, or Card at the top of the page. The tile you pick highlights.
- Decide what it opens
Under Configuration, leave Event Type on All Events (Hub Page) to show your whole booking page, or pick one event type to send visitors straight to it. If you chose Card, you must pick one here.
- Check the Preview
For Inline, the Preview panel below loads your live booking page inside the frame — the real thing, not a mock-up. For Card it draws a preview from the same details the live card is built from: title, duration, price and your brand colour. If you picked Card without choosing an event type, it reads Select an event type to preview the card. until you do.
- Copy the code
Press Copy at the top right of the Embed Code box. It flashes Copied! and the whole block is on your clipboard.
- Paste it into your website
In your website editor, add a custom HTML block where you want the widget to appear and paste the block in. Publish the page, then load it in a browser and book a test session to confirm the whole path works.
Matching it to your site
Under Theme, Auto carries your workspace's colours and styling into the widget, so it looks like the rest of your Calso booking page. Monochrome strips it back to neutral greys — the safer pick when your site already has a strong colour of its own.
Because Auto inherits from your workspace, the way to change how an embed looks is to change your colours in Branding & Email settings — the page links you there. Every embed you have already pasted picks up the change without being re-copied. See brand your booking page.
For Popup and Floating Button, two more fields appear, because those are
the two styles that put a button of your own on the page. Button Text starts
at Book Now and takes anything you type — "Check my availability", "Book a
free intro call". Button Color below it sets what colour that button is
painted: click the small square to open your computer's colour picker, or type a
hex colour code into the box beside it — a # followed by six characters, such
as #d4a054 for a warm gold or #1a1f3d for a deep navy. It starts on Calso's
deep navy rather than on your own brand colour, so it is worth setting
deliberately on a page you have designed. The Preview below
follows both fields live — the wording as you type it, the colour as you pick it
— so you can settle the button against a screenshot of your own site before you
copy anything.
Monochrome overrides the colour entirely: the picker greys out and the popup or floating button is painted in Calso's deep navy, so choose Auto if that button needs to match your own brand. Inline and Card have no button of yours to colour, so neither field appears for them; a card's own Book Now button follows your Theme choice instead — your workspace accent colour under Auto, neutral under Monochrome.
A small Powered by CALSO badge sits under the booking flow. It is removed automatically on the Studio plan and above.
The WordPress plugin
On WordPress the code block above works exactly as it does anywhere else, pasted into a Custom HTML block. The plugin is worth installing when you want the widget in several places, or would rather keep a short line of text in your pages than a block of code that has to stay intact.
Download the WordPress plugin sits at the foot of the Embed page and gives you a zip file. Install and activate it in WordPress, then open Settings → Calso Booking and paste your booking page address into Calso URL — the WordPress Plugin card on the Embed page prints the exact address to use. Default Event Type underneath takes the link ending of one event type, used whenever a shortcode does not name one; leave it empty and a shortcode without an event type shows your whole booking page.
Everything else comes from the same card. It writes the shortcode for you out of the choices you already made above — style, event type, button wording, button colour, theme — so changing a tile at the top of the page rewrites the shortcode at the bottom. Press its Copy button and paste the line into any post, page, or widget area. In Card style you have to pick an event type first: until you do, the box reads Select an event type to generate the card shortcode and its Copy button stays greyed out.
The plugin adds two more ways in. A Calso Booking block in the block editor builds the same widget without a shortcode at all, and a Floating Button section in the plugin's own settings — tick Show a floating booking button on every page — puts the corner button across the whole site without pasting anything into a single page.
Where embedded bookings show up
Bookings taken through a widget arrive like any other booking — confirmation emails, calendar entry, client record, all the same. On the Bookings list they are labelled Embed in the Source column, and the source dropdown above the list filters to just those, which is the quickest way to tell whether the widget is earning its place on your site. See find, filter, and export your bookings.
One thing to read carefully: the booking funnel in Analytics counts its page-view steps on your Calso booking page. A visitor who books through a widget on your site is counted as a confirmed booking without the browsing steps in front of it, so if most of your traffic is embedded, treat the funnel's percentages as a read on your Calso booking page rather than on your website. Read your booking funnel explains what each step counts.
Where to go next
If you have saved a tracking pixel, your cookie consent banner appears inside the widget too, and nothing tracks until a visitor accepts it — track bookings with Google Analytics, Meta Pixel, or Tag Manager covers that setup. If you would rather send people to a booking page on your own web address, see point your own domain at your booking page.
Frequently asked questions
Do I need a developer to add the Calso booking widget to my website?
No. Calso generates a short block of code and you paste it into your page. Almost every website builder has a block for this, usually called Custom HTML, Embed, or Code — you drop the block where you want the widget and paste the code into it. You never edit the code itself.
Can I put more than one Calso widget on the same page?
Yes. You can paste as many blocks as you like on a single page — for example, one card for each thing you offer, next to its description. The script line at the end of the code only needs to appear on the page once, so if you are pasting several blocks you can drop the duplicate script lines.
Why does my embedded widget say it is available on the Practice plan and above?
Embedding needs the Practice plan or higher. On Starter the generator is locked behind an upgrade prompt, and any code already pasted into a site shows that message to visitors instead of your booking flow. Upgrading restores the widget everywhere it is pasted, with no need to change the code.
Does the widget use my custom booking domain?
No. A custom booking domain covers your Calso booking page, not the embedded widget — the generated code always loads from Calso. Visitors stay on your own website the whole time, so what they see in the address bar is your domain either way.