FFP Guides

Online bookings

How to add Cliniko online bookings to a Webflow website

Cliniko publishes no Webflow specific guide, only Wix and GoDaddy get one, so paste its embed code into a Webflow Code Embed element (up to 50,000 characters) and give it a fixed height. Tracking is partial, the same iframe limit as any embed, but Webflow's page level custom code makes adding Cliniko's postMessage workaround the simplest of the builders in this guide.

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

Method
A Code Embed element holding Cliniko's iframe code, following Cliniko's general embed instructions since it has no dedicated Webflow guide
On mobile
Webflow's breakpoint based canvas lets you give the Code Embed element a different height at each breakpoint without extra code, which is more direct than resizing a desktop and a mobile version separately the way Wix's editor requires. Still preview the live booking flow at the smallest breakpoint before publishing, since a height that is comfortable on desktop is easy to leave too short on a phone.
Can you track bookings?
Partly. The same limit applies as any embed: Cliniko's booking pages run on Cliniko's own domain, so the iframe cannot pass referral data back to Webflow, and Cliniko blocks third party code including the Custom HTML tag type inside its booking pages. What differs on Webflow is where Cliniko's postMessage workaround script goes: Webflow's Page Settings has its own custom code fields for the head and before the closing body tag, scoped to just that page, so the listener does not need a separate hosted file or a sitewide script that checks the URL, unlike some of the other builders in this family.

Add Cliniko bookings to Webflow

  1. In Cliniko, sign in as an Administrator, go to Settings > Online bookings, and confirm bookings are switched on for the businesses, practitioners and appointment types you want online.
  2. Under Code to embed in your website, click Copy code. Cliniko's own embed article names dedicated guides for Wix and GoDaddy only, so Webflow follows its general instructions rather than a Webflow specific one.
  3. In the Webflow Designer, open your Book online page and drag a Code Embed element from the Add panel onto it. Paste the Cliniko code into the embed's code box. Code Embed elements accept HTML, CSS inside style tags and JavaScript inside script tags, up to 50,000 characters, and cannot run server side languages.
  4. Give the element a set height comfortably taller than Cliniko's booking flow, since an embedded iframe does not resize itself to fit the content inside it. Code wrapped in iframe tags shows a live preview on the canvas as you work, which makes it easy to check the sizing without publishing first.
  5. Publish to webflow.io staging first, test the full booking flow on desktop and mobile breakpoints, then publish to your live domain.

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 Webflow, add the Google Tag Manager container snippet through Site Settings > Custom Code so it loads sitewide (Webflow's page and site custom code fields need a Core, Growth, Agency or Freelancer Workspace, or an active Site plan on the project).
  4. In GTM, add a GA4 Event tag on a Page View trigger where Page Path contains bookings/confirmation. This basic count works without any extra code, but will not carry the original ad or search source through the embed.
  5. To keep the source, open the Book online page's own Page Settings > Custom Code > Before </body> tag and paste Cliniko's postMessage listener directly there. Because it is scoped to that one page, it runs after any sitewide code without needing a separate script file or a path check.
  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.

There is no Cliniko guide for Webflow, only Wix and GoDaddy

Cliniko's own article on embedding online bookings names two website builders with dedicated instructions, Wix and GoDaddy, and says plainly that beyond those, how easy it is to add a code snippet depends on the platform. Webflow gets no mention, so a Webflow build follows Cliniko's general steps: copy the code from Settings > Online bookings, and place it wherever the platform accepts custom HTML.

That is not a gap Webflow struggles with. Its Code Embed element exists for exactly this kind of third party snippet, accepting HTML, CSS inside style tags and JavaScript inside script tags, with a 50,000 character limit per embed. Code wrapped in iframe tags renders as a live preview directly on the design canvas, so you can check how Cliniko's booking flow actually looks and size the element correctly before you publish anything.

Same iframe, same referral loss

Webflow does not change what Cliniko's iframe can and cannot do. The booking pages themselves are still served from Cliniko's domain, so referral information from the Webflow page does not reach them, and Cliniko says embedded bookings report as Direct traffic as a result. Cliniko also blocks third party code running inside its own booking pages, including the Custom HTML tag type in Google Tag Manager, for patient security. A Google Tag Manager container connected on both the Cliniko and Webflow sides gets you the basic booking count, tagged on the page path bookings/confirmation, but not the original source.

Page level custom code is where Webflow gets simpler

Recovering the referral source needs Cliniko's postMessage listener, the script that catches the message the iframe sends when a booking is confirmed and pushes it to the dataLayer. Webflow's Page Settings gives every page its own custom code fields for the head and for just before the closing body tag, and that page level code is scoped to the page alone, applied after any sitewide code. That means the listener can go straight into the Book online page's own settings, no external script file, no separate Embed element and no need to check the current URL in the script itself.

Using page and site level custom code on Webflow needs a Core, Growth, Agency or Freelancer Workspace, or an active Site plan on that project. Cliniko still calls the workaround hit and miss and offers no support for it, so retest it after any redesign of the page.

Sources

  1. Cliniko's embed article names dedicated guides for two website builders only, Wix and GoDaddy, and says some platforms make it simple to embed a code snippet and it depends on which one you use. Cliniko Help, checked 25 Sep 2026.
  2. Webflow's Code Embed element accepts HTML, CSS in style tags and JavaScript in script tags, cannot run server side languages such as PHP or Python, has a 50,000 character maximum per embed, and code in iframe tags shows a live preview on the canvas while script tags show a placeholder until preview or publish. Webflow Help Center, checked 25 Sep 2026.
  3. Webflow custom code can be added sitewide through Site Settings (Head code and Footer code) or per page through Page Settings (inside the head tag and before the closing body tag), each field allowing up to 50,000 characters, and page level code applies only to that page after any sitewide code. It needs a Core, Growth, Agency or Freelancer Workspace, or an active Site plan. Webflow 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.