FFP Guides

Online bookings

How to put Cliniko online bookings on a WordPress website

Copy the embed code from Settings > Online bookings in Cliniko and paste it into a WordPress Custom HTML block. Tracking is partial: Cliniko runs your Google Tag Manager container on its booking pages, but an embedded iframe reports bookings as Direct, so you need Cliniko's postMessage workaround to keep the ad or search source.

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

Method
Iframe embed (Cliniko's embed code in a Custom HTML block), or a button link to the Cliniko hosted booking page
On mobile
The embed is an iframe inside your page, so on a phone the booking flow sits inside your theme's content width and can end up with a scroll area inside a scroll area. Give the block full width and little padding, keep nothing below it, and test the whole flow on a real phone. If it still feels cramped, a large Book now button that opens the Cliniko hosted page is a sound choice on mobile, and it also keeps the traffic source for tracking.
Can you track bookings?
Partly. Completed bookings can be counted: Cliniko lets you add a Google Tag Manager container ID in its online bookings settings, and a trigger on the page path bookings/confirmation fires when a booking is confirmed. What you lose with the embed is the source. Iframes do not support cross domain tracking, so Cliniko says embedded bookings report as Direct or as your own website. Cliniko also blocks custom code inside its booking pages (the Custom HTML tag in GTM is blacklisted). The workaround is a listener on your WordPress page that catches Cliniko's cliniko-bookings-page:confirmed message and pushes a dataLayer event there, where the original source is still known. Cliniko calls it hit and miss and will not support it, so test it.

Add Cliniko bookings to WordPress

  1. In Cliniko, log in as an Administrator and go to Settings > Online bookings. Make sure online bookings are switched on and your appointment types and practitioners are set to show online.
  2. Optional: use the Bookings URL builder on the same page to filter by business, practitioner or appointment type (for example a New patient page). The filtered link can be embedded too.
  3. Under Code to embed in your website, click Copy code.
  4. In WordPress, create a page called Book online (a dedicated page, not the home page). In the block editor, add a Custom HTML block (type /html in a new paragraph) and paste the code. In Elementor, use the HTML widget instead.
  5. Save the page as an Administrator. Users without the unfiltered_html capability (for example Contributors) have iframes stripped from the block when they save.
  6. Set the block or section to full width, publish, then make a test booking on a phone and on a desktop.
  7. Point every Book now button on the site at this page so there is one booking path to measure.

Track the bookings

  1. Create a GTM web container for the site (or reuse the one already on WordPress) and a GA4 property. Note the Measurement ID from Admin > Property > Data Streams.
  2. Hosted booking link, or a basic embedded count: paste the GTM container ID into Cliniko under Settings > Online bookings and save. In that container add a Google tag with your Measurement ID on All Pages, and a GA4 Event tag (for example booking_confirmed) on a Page View trigger where Page Path contains bookings/confirmation.
  3. Embedded bookings with the source kept: on the WordPress Book online page, load a small script (Cliniko says a separate file loaded with a script src tag works more reliably than inline) that listens for window message events and, when the message contains cliniko-bookings-page:confirmed, pushes dataLayer.push({event: 'clinikoBookingCompleted'}).
  4. In the WordPress GTM container, add a Custom Event trigger named clinikoBookingCompleted and a GA4 Event tag (for example booking_confirmed) that fires on it. Publish.
  5. Use only one of the two confirmed events as your conversion, or bookings will be counted twice.
  6. In GA4, mark the event as a key event. In Google Ads, go to Goals, create a conversion action, choose Import, then Google Analytics 4 properties, and select the key event. You need at least Marketer access in Google Ads.
  7. Make a real test booking from a tagged link (for example with utm_source=test), check it arrives in GA4 DebugView with that source, then cancel the test appointment in Cliniko.

Embed or link: pick one before you start

Cliniko gives you two ways to take bookings from your website. The embed puts Cliniko's booking pages inside an iframe on your own page, so patients never appear to leave your site. The hosted page is a Cliniko address you link to from a button, menu item, email or SMS.

The embed looks tidier. The hosted link is easier to measure. Cliniko's own help centre says that if tracking the referral source is essential, you should consider the hosted booking portal instead of embedding it. For a clinic spending money on Google Ads, that trade off matters more than how the page looks.

Whichever you choose, changes you make in Cliniko (appointment types, practitioners, availability) show up on the website automatically. You paste the code once.

Why embedded bookings show up as Direct

The booking pages inside the iframe are served from your Cliniko address, not your website. The browser treats them as a separate site. Referral information from your page does not pass into the iframe, and iframes do not support cross domain tracking, so Cliniko says bookings made in the embed report as Direct or as coming from your own website.

In practice this means GA4 can tell you that a booking happened but not which ad, search or Instagram post produced it. Google Ads then cannot see the conversion against the click, and Smart Bidding optimises on nothing.

Cliniko also stops any third party code from running inside its booking pages, for patient security. Your GTM container runs there, but the Custom HTML tag is blocked, so you cannot patch the problem from inside the iframe.

The workaround and its limits

When a booking is confirmed, the Cliniko iframe sends a message to the page around it containing cliniko-bookings-page:confirmed. A short script on your WordPress page can listen for that message and push a dataLayer event. Because that event fires on your page, GA4 still has the session's original source, and the event can be imported into Google Ads as a conversion.

Cliniko publishes this code but says it can be hit and miss depending on the implementation, and that it cannot offer troubleshooting support. Treat it as something you test after every theme, plugin or caching change, not something you set once. Cache and script optimisation plugins that delay or combine JavaScript can stop it firing without any error.

If you would rather not maintain a script, link to the hosted page instead. You lose the in page look but get a confirmation page path that GTM can see directly.

Sources

  1. The embed code is found under Settings > Online bookings, in the section Code to embed in your website, with a Copy code button. Administrator access is required. Cliniko Help, checked 25 Sep 2026.
  2. Due to iframe limitations, referral data is not passed from the website to the embedded booking iframe, iframes do not support cross domain tracking, and embedded bookings report as Direct or from the parent website. Cliniko blocks third party code in the booking pages and the Custom HTML tag in GTM is blacklisted. Cliniko Help, checked 25 Sep 2026.
  3. Cliniko's workaround listens on the parent page for a message containing cliniko-bookings-page:confirmed and pushes a clinikoBookingCompleted dataLayer event. Cliniko says it can be hit and miss and that it cannot offer troubleshooting support for it. Cliniko Help, checked 25 Sep 2026.
  4. 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 suggests the hosted portal if the referral source is essential. Cliniko Help, checked 25 Sep 2026.
  5. Cliniko's GA4 conversion example fires a GA4 Event tag on page views where the page path contains bookings/confirmation. Cliniko Help, checked 25 Sep 2026.
  6. Filtered booking links can be built by business, practitioner and appointment type with the Bookings URL builder, and the filtered link can be embedded in a website. Cliniko Help, checked 25 Sep 2026.
  7. WordPress sanitises Custom HTML block content for users without the unfiltered_html capability, stripping tags such as script and iframe on save. WordPress.org Documentation, checked 25 Sep 2026.
  8. 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.