Embed

React, Next.js & site builders

The same embed, step by step for the tools people build websites and web apps with.

React#

Load the script once, then render the embed elements. Call Scheduler.init() after they appear so they are picked up.

React

import { useEffect } from "react";

const SCRIPT = "https://meet.zyluxmedia.app/embed.js";

function useSchedulerEmbed() {
  useEffect(() => {
    const ready = () => (window as any).Scheduler?.init();
    if (document.querySelector(`script[src="${SCRIPT}"]`)) return ready();
    const s = document.createElement("script");
    s.src = SCRIPT;
    s.async = true;
    s.onload = ready;
    document.body.appendChild(s);
  }, []);
}

export function BookingWidget({ path }: { path: string }) {
  useSchedulerEmbed();
  return <div data-scheduler-inline={path} />;
}

export function BookButton({ path, children }: { path: string; children: React.ReactNode }) {
  useSchedulerEmbed();
  return (
    <button onClick={() => (window as any).Scheduler?.open(path)}>{children}</button>
  );
}

// <BookingWidget path="/ada/consultation" />
// <BookButton path="/ada/consultation">Book a call</BookButton>

Next.js#

Use next/script so the script loads once for the whole app.

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://meet.zyluxmedia.app/embed.js" strategy="afterInteractive" />
      </body>
    </html>
  );
}

Vue#

Vue

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

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  const s = document.createElement("script");
  s.src = "https://meet.zyluxmedia.app/embed.js";
  s.onload = () => window.Scheduler.init();
  document.body.appendChild(s);
});
</script>

Website builders#

Every builder has a place to paste your own HTML. Paste the script and one embed element together:

HTML

<script src="https://meet.zyluxmedia.app/embed.js" async></script>
<div data-scheduler-inline="/ada/consultation"></div>

WordPress

Edit the page, add a Custom HTML block, paste the code and update the page.

Wix

Add → Embed code → Embed HTML, choose “Code”, paste, then resize the box to fit (around 700px tall).

Squarespace

Edit the page, add a Code block, paste the code and save. (Code blocks need a Squarespace Business plan or higher.)

Webflow

Drag an Embed element onto the page, paste the code and publish.

Shopify

Online Store → Pages → edit a page → Show HTML (the <> button), paste the code and save.

Can't paste code?

Link to your booking page instead: https://meet.zyluxmedia.app/ada/consultation. It works on any site, in emails, social bios and QR codes.

NextLink options & prefill →