Embed on a website

1. Add the script#

Add this once, anywhere on the page (just before </body> is a good place):

<script src="https://meet.zyluxmedia.app/embed.js" async></script>

Then add one of the three styles below. The value is the path of the page you want to show, the part after https://meet.zyluxmedia.app:

The quickest way to get the code for an event or a form: Events → your event → Embed, or Routing forms → your form → Embed.

2. Choose a style#

Inline

The booking page sits inside your page, like a section. Its height adjusts automatically, so there are no scroll bars.

<div data-scheduler-inline="/ada/consultation"></div>

Pop-up from a button or link

Any element with this attribute opens the booking page in a pop-up when clicked. Style the button however you like.

<button data-scheduler-popup="/ada/consultation">Book a consultation</button>

<!-- or a text link -->
<a href="#" data-scheduler-popup="/ada/consultation">Schedule a call</a>

Floating button

A round button that stays in the bottom-right corner on every page, and opens the pop-up.

<div data-scheduler-floating="/ada/consultation" data-label="Book a call" data-color="#086ee6"></div>

Fill in details for the visitor#

Add query parameters to the path to prefill the form, for example when the visitor is already signed in to your site. See all link options.

<div data-scheduler-inline="/ada/consultation?name=Tunde%20Bello&[email protected]"></div>

Open it from your own code#

Once the script has loaded, window.Scheduler lets you open the pop-up yourself, and pick up elements you add to the page later (single-page apps, content loaded after the page).

// Open the pop-up, e.g. after a form on your site is submitted
window.Scheduler.open("/ada/consultation?email=" + encodeURIComponent(user.email));

// You added new data-scheduler-* elements after the page loaded? Activate them:
window.Scheduler.init();

Know when someone books#

When a booking is made inside an embed, your page receives a scheduler:booked event with the booking. Use it to show a thank-you message, track a conversion, or move the visitor on.

window.addEventListener("scheduler:booked", (e) => {
  const booking = e.detail; // { uid, title, startTime, endTime, status }
  console.log("Booked", booking.uid, "for", booking.startTime);
  // e.g. gtag("event", "booking", { value: 1 }) or show your own message
});

Event registrations and routing forms

Embedded events and routing forms send their own events the same way:

// Someone registered for an embedded event
window.addEventListener("scheduler:registered", (e) => {
  const reg = e.detail; // { uid, event, status, name, email }
  // status is "registered", or "awaiting_payment" for a paid event before payment
});

// Someone submitted an embedded routing form
window.addEventListener("scheduler:form-submitted", (e) => {
  const { formId, result, values } = e.detail;
  // result: { type: "message", message } or { type: "redirect", url } (where they are being sent)
});

Good to know#

• Embeds use your link's own settings: duration, questions, availability, payments and branding.
• Paid links and paid events open the payment page in a new tab when embedded (payment providers don't allow paying inside a frame on another site).
• Plain links work everywhere too: emails, WhatsApp, Instagram bio, QR codes. Embedding is only needed to keep people on your site.