Website Integration Guide

What You Need

Three levels of integration. Pick whichever matches how much setup you want to do — you can always upgrade later.

Standalone: Nothing. All links go to your Your Booking subdomain (e.g. yourpractice.yourbooking.au). Your branding is applied to the booking page, but patients see our subdomain in the address bar.

Basic (booking on your site): Embed the iframe on a page of your website and set the Website Booking URL. Both email and SMS reminder links land patients on your website inside the iframe — SMS uses our short domain (e.g. yp.yrb.au) which 302-redirects to your booking page. No server configuration needed.

Full (branded SMS links): Basic plus register your own short domain (e.g. yp.au). Either point its DNS at our server (we handle the rest), or configure your domain provider's URL forwarding to your booking page. Same patient experience as Basic — only the SMS link wording changes. No .htaccess rules, no redirect rules on your web server.

Most practices start with Basic and upgrade to Full once they're happy with the booking flow.

Step 1: Embed the Booking Page

Create a new page on your website (e.g. "Book Online") and add the following HTML code. Most website platforms have a "Custom HTML", "Embed", or "Code" block for this.

<div id="yourbooking-embed"></div>
<script src="https://yourbooking.au/embed.js" data-tenant="yourpractice" nowprocket></script>

Replace yourpractice with your Your Booking subdomain (the part before .yourbooking.au). For multi-branch businesses, use your business slug — the branch picker is shown inside the iframe.

That's it. The script creates the iframe, auto-resizes it to eliminate double scrollbars, and reads tokens from the URL so that links from emails and SMS open the correct view inside the iframe (appointment management, recall booking, or feedback). Your Booking maintains the script centrally — when the link format changes, you don't have to update anything on your site.

If your website theme adds padding around the content area, you may also need to add before the embed:

<style>.your-content-container { padding: 0 !important; }</style>

Replace .your-content-container with the appropriate CSS selector for your theme.

Self-Contained Alternative

If your site has a strict Content Security Policy that blocks third-party scripts, or you prefer to vendor the integration yourself, you can use a self-contained version that doesn't depend on yourbooking.au/embed.js:

<iframe
  id="yourbooking"
  src="https://yourpractice.yourbooking.au/?embed"
  style="width: 100%; min-height: 700px; border: none; overflow: hidden;"
  scrolling="no"
  allow="payment"
  title="Book an Appointment">
</iframe>
<!-- nowprocket keeps WP Rocket from delaying this script; do not remove -->
<script nowprocket>
  (function() {
    var iframe = document.getElementById('yourbooking');
    // Subdomain is read from the iframe src above — set it there once;
    // nothing else in this script needs editing.
    var base = new URL(iframe.src).origin;
    var params = new URLSearchParams(window.location.search);

    var t = params.get('t');
    var appt = params.get('appt');

    if (!t && !appt) {
      // Path-form fallback. Two token-format generations coexist:
      //   * Legacy: letter prefix b/r/f/u + 6+ alphanumerics
      //   * New:    digit prefix 2-5 + exactly 5 strict-base62 chars
      var segs = window.location.pathname.split('/').filter(Boolean);
      var last = segs[segs.length - 1];
      if (last && /^([brfu][A-Za-z0-9]{6,}|[2-5][23456789A-HJ-NP-Za-km-z]{5})$/.test(last)) {
        t = last;
      }
    }

    if (t) {
      iframe.src = base + '/t/' + encodeURIComponent(t) + '?embed';
    } else if (appt) {
      iframe.src = base + '/appointment/' + encodeURIComponent(appt) + '?embed';
    }

    window.addEventListener('message', function(e) {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === 'resize' && typeof e.data.height === 'number') {
        iframe.style.height = e.data.height + 'px';
      }
      if (e.data.type === 'scroll-to-top') {
        iframe.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  })();
</script>

Replace yourpractice with your subdomain in the iframe src — that's the only place it needs changing. The script reads the subdomain back from the iframe, so appointment-management and recall links from SMS/email automatically point at the right place. If the SMS or email link format changes in future, you'll need to update this snippet by hand — the hosted script above updates automatically.

Performance or caching plugins (WP Rocket, LiteSpeed, etc.). These often have a "Delay JavaScript Execution" option that holds scripts back until the visitor first clicks or scrolls. If the resize script is delayed, the booking page can't report its height, so it shows collapsed or clipped on phones until the visitor interacts.

The nowprocket attribute on the script tag above prevents this on WP Rocket — leave it in place. After adding the snippet (or editing it), clear the WP Rocket cache (WP Rocket → Clear Cache) so the change goes live. If your site uses LiteSpeed Cache instead, add data-no-defer="1" to the same tag — <script nowprocket data-no-defer="1"> — then purge the LiteSpeed cache. For other plugins (Autoptimize, Perfmatters, etc.), exclude the script from JavaScript delay/defer using their exclusion field; getElementById('yourbooking') is a unique string to match. The min-height: 700px is a safety net so the page stays usable even if a delay slips through.

Pop-over (lightbox) alternative

Prefer a "Book Online" button that opens the booking form in a pop-up instead of an inline page? This self-contained snippet does that — the button opens yourpractice.yourbooking.au in a centred modal (Escape or the × closes it), and nothing else on the page changes.

Non-preferred — booking entry only. The pop-over always opens a fresh booking. It does not carry appointment-management or recall links: those arrive from SMS/email with a token in the page URL, and the pop-over ignores it, so they open the Your Booking–hosted page directly rather than inside your site. If you want those links to land on your own site, use the inline embed above and set the Website Booking URL (Step 2) — that's the preferred setup. Reach for the pop-over only when you just need a low-friction "start a booking" button.

<!-- Your Booking — "Book Now" pop-over -->

<!-- (A) Trigger button: opens the pop-over (data-ybsh-open). It can also show
     live availability (data-yb-button) — see the note below. -->
<button type="button" data-ybsh-open data-yb-button data-label="Book Now" data-template="{label} · {text}">Book Now</button>
<script src="https://yourbooking.au/ybbutton.js" data-tenant="yourpractice" async></script>

<!-- (B) Paste this block once, just before </body> -->
<div id="ybsh-overlay" class="ybsh-overlay" role="dialog" aria-modal="true" aria-label="Book an appointment" hidden>
  <div class="ybsh-modal">
    <button type="button" class="ybsh-close" data-ybsh-close aria-label="Close">&times;</button>
    <iframe class="ybsh-frame" title="Book an appointment"></iframe>
  </div>
</div>

<style>
  .ybsh-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:2147483000;padding:16px}
  .ybsh-overlay[hidden]{display:none}
  .ybsh-modal{position:relative;width:100%;max-width:480px;height:90vh;max-height:900px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,.35)}
  .ybsh-frame{width:100%;height:100%;border:0;display:block}
  .ybsh-close{position:absolute;top:8px;right:8px;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font:700 22px/1 sans-serif;cursor:pointer;z-index:1}
  .ybsh-close:hover{background:rgba(0,0,0,.78)}
  @media(max-width:520px){.ybsh-overlay{padding:0}.ybsh-modal{height:100%;max-height:none;border-radius:0}}
</style>

<script>
(function(){
  var SRC='https://yourpractice.yourbooking.au/?embed';
  var overlay=document.getElementById('ybsh-overlay');
  if(overlay.parentNode!==document.body){document.body.appendChild(overlay);} // escape page-builder CSS transforms (Elementor, Divi, etc.)
  var frame=overlay.querySelector('.ybsh-frame');
  function open(){frame.src=SRC;overlay.hidden=false;document.body.style.overflow='hidden';overlay.querySelector('.ybsh-close').focus();}
  function close(){overlay.hidden=true;document.body.style.overflow='';frame.src='about:blank';}
  document.addEventListener('click',function(e){
    if(e.target.closest('[data-ybsh-open]')){e.preventDefault();open();}
    else if(e.target.closest('[data-ybsh-close]')||e.target===overlay){close();}
  });
  document.addEventListener('keydown',function(e){if(e.key==='Escape'&&!overlay.hidden)close();});
})();
</script>

Replace yourpractice with your subdomain in both places — the data-tenant on the script tag and the SRC in the last script block.

The script moves its own modal to the end of <body> on load, so it isn't clipped or mispositioned when your "Book Now" button lives inside a page-builder container — Elementor, Divi, and similar apply CSS transforms that otherwise break a fixed overlay.

Live availability label (optional). The button can also show your soonest availability — e.g. "Book Now · available tomorrow" — via the data-yb-button attribute and ybbutton.js (both already in the snippet). Turn on Enable website button under New-Patient Availability in your admin Settings. Until then — or whenever your practice agent is offline or has no open slots — it silently shows a plain "Book Now" and the pop-over still works. Tune the wording with data-template. To drop the label entirely, remove the data-yb-button attribute and the ybbutton.js script line.

WordPress/WP Rocket caveat. If the button doesn't open, a caching plugin delayed the script — add nowprocket to the <script> tags (WP Rocket) or data-no-defer="1" (LiteSpeed), then clear the cache.

Wix

Wix needs its own approach: Wix runs embedded HTML/iframes inside its own sandboxed frame, so the hosted embed.js auto-resize signal can't reach the top page — the embed stays whatever height you set. Pick one of two ways.

No-code (fixed height). Quickest; the form sits in a fixed-size box.

1. Wix Editor → Pages & Menu → + Add Page → Blank Page; name it "Book Online".
2. Add Elements (+) → Embed Code → Embed a Site (may be listed under "Embed & Social").
3. Click the box; in its settings, enter the website address: https://yourpractice.yourbooking.au/?embed
4. Stretch the box to full width and set a tall height (~1000px) so the whole form fits.
5. Publish.

Because Wix can't auto-resize the box, a taller step may show an inner scrollbar — make the box taller and republish if so.

Auto-resize (Wix Dev Mode / Velo). Removes the inner scrollbar by letting Wix code set the height. Turn on Dev Mode (Velo), then use an Embed HTML element (give it the ID bookingHtml) whose markup relays the booking page's height up to Velo:

<iframe id="yb" src="https://yourpractice.yourbooking.au/?embed"
        style="width:100%;border:none;" scrolling="no"></iframe>
<script>
  // The booking page posts its height to THIS embed's document; relay it
  // up to the Wix page so Velo (below) can resize the element.
  window.addEventListener('message', function (e) {
    if (e.data && e.data.type === 'resize') window.parent.postMessage(e.data, '*');
  });
</script>

Then in the page's Velo code:

$w.onReady(() => {
  $w('#bookingHtml').onMessage((e) => {
    if (e.data?.type === 'resize' && typeof e.data.height === 'number') {
      $w('#bookingHtml').height = e.data.height;
    }
  });
});

The inner iframe reports its height → the relay forwards it up → Velo sets the element height. True auto-resize, no inner scrollbar.

Note on SMS/email links. Wix's sandbox makes the token-routing in the self-contained snippet above impractical, so on Wix the embedded page just hosts the start of booking. Appointment-management and recall links from SMS/email open the booking subdomain (or your short domain) directly, rather than routing into the Wix page — so this doesn't need handling on the Wix side.

Add live chat to your whole website (optional)

If you've turned on Web Chat (Admin → Settings → Patient Chat), a chat button appears on your booking page automatically — nothing to install. To put the same chat button on every page of your website, not just the booking page, paste this one-liner into your site's HTML <head>:

<script src="https://yourbooking.au/ybchat.js" data-tenant="yourpractice" async></script>

Replace yourpractice with your Your Booking subdomain. Then turn on Embed script installed on website in the Patient Chat settings — this tells the booking-page widget to step aside so visitors see a single chat button (the site-wide one), with no double-up. Conversations started anywhere on your site land in the same staff dashboard Chat tab. See the Patient Chat guide for the full walkthrough.

Step 2: Set the Website Booking URL

In the admin dashboard under Settings > Domain Settings, set:

Website Booking URL — the full URL of the page you just created, e.g. https://www.mypractice.com.au/book-online (no trailing slash).

Once set, appointment links in booking confirmation and reminder emails will point directly to your website with the token as a query parameter. The inline embed then routes them into the iframe.

Only set this for the inline embed. The standard embed and the self-contained alternative (Step 1) read the token from the URL and open appointment-management and recall links inside the embedded page. Other methods don't: the pop-over always opens a fresh booking, and Wix's sandbox can't route tokens. If you're using one of those — or aren't embedding the booking page at all — leave the Website Booking URL blank so those links open the Your Booking–hosted page directly and keep working. Setting it otherwise sends patients to a page that can't open their appointment.

This is all you need for the Basic (inline embed) integration.

Step 3: Add a Short Domain (optional, for branded SMS links)

If you want SMS reminder and recall links to show your own short domain (e.g. yp.au) instead of our default (e.g. lv.yrb.au), register a short .au domain and pick one of two options.

Option A — We host the redirect (recommended)

Easiest setup. You register the short domain, point a DNS A record at our server, and we handle everything else: SSL certificate, redirect to your booking page, updates when your booking URL changes.

1. Register a short .au domain through any Australian registrar.
2. In the admin dashboard under Settings > Domain Settings, click Set up next to SMS short domain. A dialog opens with our server's IP address shown.
3. At your domain provider, create a DNS A record for your short domain pointing at the IP shown in the dialog. DNS changes can take anywhere from a few minutes to a full day to take effect.
4. Back in the dialog, enter your short domain and click Check DNS. Once it verifies, click Save — your short links start redirecting within a minute.

No .htaccess rules. No URL forwarding configuration. No redirect maintenance on your end. SSL certificate is issued and renewed automatically.

Your short domain doubles as a short alias for your main website. Any request to https://yp.au/<path> forwards to the same path on your main site — https://yp.au/forms/intake lands on https://www.mypractice.com.au/forms/intake. Useful on flyers, posters, intake forms, or anywhere a memorable short URL helps.

If the DNS check fails, it's usually a propagation delay. Wait a bit and click Check DNS again. Multi-branch businesses can't use this optional self-service — contact us and we'll set it up at the business level.

Option B — You configure the redirect

If you prefer to manage the redirect yourself (e.g. through your domain registrar's URL forwarding feature or Cloudflare), you can do that instead. Note: we can't troubleshoot URL forwarders for you — the steps differ by provider and we don't have access to your account.

1. Register a short .au domain.
2. Configure URL forwarding at your domain provider to send your short domain to your booking page, e.g. forward https://yp.au/ → https://www.mypractice.com.au/book-online. The forwarder must preserve the path so the appointment token reaches your booking page. Most providers call this "forward path" or "preserve path".
3. In the admin dashboard, click Set up next to SMS short domain. Type your domain and click Check DNS — it will report that the domain isn't pointing at our server (correct, since you're handling the redirect yourself). Click "I'll set up the redirect myself", then Save.

Test by visiting https://yp.au/btest1234 in a browser before enabling SMS reminders. It should land on your booking page.

How the links work

Step 4: Add to Home Screen (optional)

When the booking page is embedded in an iframe, "Add to Home Screen" uses your website's metadata. Without this step, patients get a generic icon. With it, they get a branded app icon and a full-screen experience.

1. Upload a manifest file to your website at /booking-manifest.json:

{
  "name": "Your Practice Name",
  "short_name": "Booking",
  "display": "standalone",
  "start_url": "/book",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "https://yourpractice.yourbooking.au/api/v1/tenant/icon",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "https://yourpractice.yourbooking.au/api/v1/tenant/icon",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

background_color — splash screen colour while launching. Usually white, or your dark-theme background.

theme_color — tints the status bar on Android. Use your brand colour.

2. Add these tags to the <head> of the booking page:

<link rel="manifest" href="/booking-manifest.json">
<link rel="apple-touch-icon" href="https://yourpractice.yourbooking.au/api/v1/tenant/icon">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Your Practice Name">

Replace practice names and subdomains as appropriate. For best results, upload a square logo in the admin dashboard under Branding > Square icon.

Testing

1. Visit your booking page — the widget should load in the iframe.
2. Make a test booking — the confirmation email link should open the appointment management view within your website.
3. If you've set up a short domain (Step 3), send a test SMS reminder or recall and tap the link — it should redirect to your booking page and open the right view.

Troubleshooting