Embedding the scheduler on your website

Updated September 22, 2026Integrations

Settings → Integrations lets visitors book you directly from your own website, using an embedded scheduler instead of sending them here.

1. Allow your domain

Under Allowed domains, enter the exact origin of the site that will host the scheduler, meaning scheme and host only, no path and no trailing slash:

https://apply.acme.com     ✓
https://acme.com:8443      ✓
acme.com                   ✗  missing scheme
https://acme.com/book      ✗  has a path
https://acme.com/          ✗  trailing slash

https://www.acme.com and https://acme.com are different origins. If visitors can reach your site either way, add both.

This list is also the on/off switch: while it is empty, your scheduler cannot be embedded anywhere. You can add up to 50 domains, and removing one takes effect immediately.

2. Paste the snippet

Each approved service has its own snippet. Copy it and paste it into your page where the scheduler should appear:

<div class="scheduling-embed" data-service="SERVICE_ID"></div>
<script src="https://embed.example.com/embed.js" async></script>

The <div> marks the spot; the script tag can go anywhere on the page and only needs to appear once, even with several schedulers. If you see no approved services to embed yet, the service is still in review. Its snippet appears once it is approved.

3. Set the language

Widget language on this page controls what visitors see. Leave it on match the page language and the scheduler reads the lang attribute of your page's <html> tag, the same attribute search engines and screen readers use, so a properly localized site needs no extra configuration:

<!doctype html>
<html lang="es">      <!-- scheduler renders in Spanish -->
  <head>…</head>
  <body>…</body>
</html>

Regional tags work: lang="pt-BR" is reduced to the closest language we support rather than rejected.

To override the page for one scheduler, add data-locale to the embed div. It beats both the page language and the setting on this page:

<div class="scheduling-embed" data-service="SERVICE_ID" data-locale="de"></div>

If your page has its own language switcher, tell the scheduler to follow it. This swaps the language in place, so anything the visitor has already filled in is kept:

window.SchedulerEmbed.setLocale("sr");

In short, the first of these that is set wins: data-locale, then your page's <html lang>, then Widget language, then the visitor's browser, then English.

Other options

Add these to the embed div:

data-mode="popup" shows a button that opens the scheduler in an overlay instead of placing it inline.

data-label="Book now" sets the button text in popup mode.

data-min-height="480" sets the height in pixels before the scheduler reports its real size. Raise it if you see a jump on load.

Two more calls are available if your site inserts content dynamically or tracks conversions:

// Re-scan the page after adding a scheduler div
window.SchedulerEmbed.refresh();

// Fires when a visitor completes a booking
window.SchedulerEmbed.onBooking(function (e) {
  console.log(e.bookingId, e.serviceId);
});

If the scheduler does not load

The page's origin is not on the allowed list, or does not match exactly. Using http instead of https, or a missing www, is enough to block it.

The snippet landed somewhere the script cannot run, such as a plain-text or restricted-HTML block in your site builder.

The data-service value was altered. Paste the snippet as-is rather than retyping the id.

The service was unpublished or is no longer approved.