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"></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%; border: none; overflow: hidden;"
  scrolling="no"
  allow="payment"
  title="Book an Appointment">
</iframe>
<script>
  (function() {
    var iframe = document.getElementById('yourbooking');
    var params = new URLSearchParams(window.location.search);
    var base = 'https://yourpractice.yourbooking.au';

    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 both URLs. 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.

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 iframe script handles the rest.

This is all you need for the Basic 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