FFP Guides

Online bookings

How to add Cliniko online bookings to a Squarespace website

Paste Cliniko's embed code into a Squarespace Code Block and click Apply. Squarespace only allows JavaScript or iframes in a Code Block on the Core plan or higher, Basic sites need a button or link to Cliniko's hosted page instead. Tracking is partial for the same reason as any embed: the iframe hides the referral source unless you add Cliniko's postMessage workaround.

Last checked 25 Sep 2026 against the sources listed at the end of this page.

Method
A Code Block on your booking page holding Cliniko's embed code (Core plan and higher), or a button or text link to the Cliniko hosted page on Basic
On mobile
Cliniko's own Squarespace guide does not mention iframe height or a mobile specific step, unlike its Wix guide, so there is no documented fix to lean on. Preview the block on a phone after publishing and adjust the block's padding and width if the booking flow feels squeezed inside your template. A full width button linking to the Cliniko hosted page is a safe fallback on mobile if the embed still looks cramped, and it keeps the referral source without the workaround script.
Can you track bookings?
Partly. The Squarespace embed is still Cliniko's iframe served from Cliniko's own domain, so the same referral loss applies: Cliniko says embedded bookings report as Direct and blocks third party code inside its booking pages. Squarespace's own help centre does not document a way around this for its built in Analytics, and does not mention height or mobile sizing for the Cliniko embed at all, so the fix is the same Google Tag Manager route as any builder, using Squarespace's Code Injection settings or, more simply, the same Code Block that already holds the embed.

Add Cliniko bookings to Squarespace

  1. In Cliniko, sign in as an Administrator, go to Settings > Online bookings, and confirm bookings are switched on with the practitioners and appointment types you want to take online.
  2. Check your Squarespace plan first. Squarespace treats JavaScript and iframes inside a Code Block as a feature of the Core plan and higher (including trial sites and some older legacy plans), not the Basic plan.
  3. Back in Cliniko, under Code to embed in your website, click Copy code.
  4. In Squarespace, create a page called Book online. Add a Code Block, delete the placeholder text and HTML, paste Cliniko's code, and click Apply.
  5. If your site is on the Basic plan, the code will sit in the block but will not run. Copy Cliniko's hosted booking URL from the same Online bookings screen instead, and add it as a Button Block or a text link.
  6. Set the block to full page width where your template allows it, save, and make a test booking on both a phone and a desktop.

Track the bookings

  1. Create a Google Tag Manager web container and a GA4 property if you do not have them, and note the GA4 Measurement ID from Admin > Property > Data Streams.
  2. Paste the GTM container ID into Cliniko under Settings > Online bookings and save. Cliniko supports Google Analytics 4, Google Ads, Meta Pixel, AdRoll and Bing Ads UET tags there.
  3. In Squarespace, go to Settings > Advanced > Code Injection to add the Google tag sitewide (Header) so GA4 loads on every page, or use the built in Google Analytics field under Settings > Marketing if you would rather skip a manual tag for the base pageview count.
  4. In GTM, add a GA4 Event tag on a Page View trigger where Page Path contains bookings/confirmation. This basic count works on both plans, but will not carry the original ad or search source through the embed.
  5. To keep the source, add Cliniko's postMessage listener inside the same Code Block as the embed itself, wrapped in its own script tags below the Cliniko code. Squarespace's per page code injection only covers the page header, not a body end slot, so putting the listener in the block that is already on that one page is the simplest place for it.
  6. Add a Custom Event trigger named clinikoBookingCompleted in GTM and a GA4 Event tag that fires on it. Use only one of the two GA4 events as your conversion, not both.
  7. Mark the event as a key event in GA4, then in Google Ads go to Goals, create a conversion action, choose Import, then Google Analytics 4 properties, and select it. You need at least Marketer access.
  8. Book a real test appointment from a tagged link, confirm it in GA4 DebugView, then cancel the test in Cliniko.

The Code Block only runs script on Core and up

Cliniko's booking widget is pasted into a Squarespace Code Block, and Squarespace is explicit that adding JavaScript or an iframe inside a Code Block is a feature of the current Website Core plan and higher, along with any trial site and a handful of legacy plans no longer sold. The Basic plan does not get it. If a site is downgraded to Basic after the embed is added, Squarespace says the code stays in the block but stops working.

For a clinic on Basic, the practical answer is not to fight the plan limit. Cliniko's booking URL, found on the same Online bookings settings screen as the embed code, can be dropped straight into a Button Block or a plain text link, which every Squarespace plan supports. Patients leave the site for one click and land on Cliniko's own booking page, which is also the more measurable option, as the next section covers.

Squarespace's own analytics hits the same wall as GA4

Whichever analytics tool sits behind a Squarespace site, the limit comes from the iframe, not the analytics platform. Cliniko's help centre says referral data does not pass from a website into its embedded booking pages because iframes do not support cross domain tracking, so a booking made inside the Squarespace embed shows up as Direct traffic, and Cliniko also blocks third party code such as the Custom HTML tag type from running inside the booking pages themselves for patient security.

Squarespace's own documentation for Code Injection and its built in Analytics does not describe a workaround for this, so there is nothing Squarespace specific to reach for. The fix is the same one every embedded Cliniko integration needs: a Google Tag Manager container connected on both ends, plus Cliniko's own postMessage script to recover the source.

Where the workaround script fits on Squarespace

Squarespace's Code Injection panel gives you two places for sitewide code, the page head and the page footer before the closing body tag, plus one page level option, Page Header Code Injection, reached from a page's own Advanced settings. There is no page level footer or body end slot to match it. Rather than fight that gap with a sitewide script that checks the URL, the simplest place for Cliniko's small postMessage listener is inside the same Code Block that already holds the booking embed on that one page, added as its own script tags underneath the Cliniko code.

Cliniko is upfront that this listener can be hit and miss depending on the implementation and that it will not troubleshoot it, so test it again after any template change, and treat the hosted page link as the reliable fallback if it stops firing.

Sources

  1. As of July 2020, Squarespace classifies JavaScript or iframes inside a code block as a premium feature. On Squarespace, add a new content block, choose Code, delete the placeholder, paste the code copied from Cliniko under Settings > Online bookings, and click Apply. Without the premium feature, use a button block or text link to the booking URL instead. Cliniko Help, checked 25 Sep 2026.
  2. Adding JavaScript or iframes to a Squarespace code block is available on the current Website Core plan and higher, any trial site, and some legacy plans no longer available for new subscriptions, but not the current Basic plan. If a site is downgraded, the code remains in the block but stops functioning. Squarespace Help Center, checked 25 Sep 2026.
  3. Squarespace's sitewide Code Injection has separate Header and Footer fields for every page. Page level code injection only covers Page Header Code Injection, reached from that page's Advanced settings, and code injection is available on the Core, Plus and Advanced plans. Squarespace Help Center, checked 25 Sep 2026.
  4. Due to iframe limitations, referral data is not passed from the website to the embedded booking iframe, iframes do not support cross domain tracking, embedded bookings report as Direct or from the parent website, and Cliniko blocks third party code including the Custom HTML tag type in its booking pages. Cliniko Help, checked 25 Sep 2026.
  5. The GTM container ID is entered in Cliniko under Settings > Online bookings. Supported tags include Google Analytics 4, Google Ads, Meta Pixel, AdRoll and Bing Ads UET. Cliniko Help, checked 25 Sep 2026.
  6. Cliniko's workaround script listens on the parent page for a message containing cliniko-bookings-page:confirmed and pushes a clinikoBookingCompleted event to the dataLayer. Cliniko says it can be hit and miss and that it cannot offer troubleshooting support for it. Cliniko Help, checked 25 Sep 2026.
  7. A GA4 event must be marked as a key event before it can be imported into Google Ads as a conversion, and importing requires at least Marketer access. Google Ads Help, checked 25 Sep 2026.