Developers Site Kit

Kit Modules

Public links

Live Twin: https://receiz.com/world/embed/your_receiz_username

Scheduler: https://receiz.com/calendar/your_receiz_username

Payments: https://receiz.com/payments/your_receiz_username

Action card: https://receiz.com/action-card/your_receiz_username

Starter HTML

Copy this starter and trim it down to the surfaces you want to ship first.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Receiz Site Kit</title>
  <style>
    body { font-family: "Georgia", serif; margin: 0; background: #eef3ff; color: #0f1830; }
    main { max-width: 1080px; margin: 0 auto; padding: 32px 16px 60px; }
    .kit-grid { display: grid; gap: 20px; }
    .kit-card { border: 1px solid #d4e0f6; border-radius: 24px; background: rgba(255,255,255,0.92); padding: 20px; }
    h1 { margin: 0 0 12px; font-size: 42px; }
    h2 { margin: 0 0 12px; font-size: 20px; }
  </style>
</head>
<body>
  <main>
    <h1>Receiz Site Kit</h1>
    <p>Callback URL: https://app.example.com/auth/receiz/callback</p>
    <div class="kit-grid">
  <section class="kit-card">
    <h2>Login</h2>
    <div
  class="receiz-login-embed"
  data-username="your_receiz_username"
  data-redirect-path="/auth/receiz/callback"
></div>
<script src="https://receiz.com/receiz-login-embed.js" async></script>
  </section>

  <section class="kit-card">
    <h2>Verify</h2>
    <input id="receiz-file" type="file" />
    <button id="receiz-verify">Verify file</button>
    <pre id="receiz-result"></pre>
  </section>

  <section class="kit-card">
    <h2>Live Twin</h2>
    <iframe
  src="https://receiz.com/world/embed/your_receiz_username"
  title="Receiz Live Twin"
  width="100%"
  height="780"
  style="border:1px solid #d2def5;border-radius:24px;overflow:hidden;background:#f6f9ff;"
  loading="lazy"
></iframe>
  </section>

  <section class="kit-card">
    <h2>Schedule</h2>
    <iframe
  src="https://receiz.com/calendar/your_receiz_username"
  title="Receiz Scheduler"
  width="100%"
  height="860"
  style="border:1px solid #d2def5;border-radius:20px;overflow:hidden;"
  loading="lazy"
></iframe>
  </section>

  <section class="kit-card">
    <h2>Pay</h2>
    <div class="receiz-pay-embed" data-username="your_receiz_username"></div>
<script src="https://receiz.com/receiz-pay-embed.js" async></script>
  </section>

  <section class="kit-card">
    <h2>Action Card</h2>
    <iframe
  src="https://receiz.com/action-card/your_receiz_username"
  title="Receiz Action Card"
  width="100%"
  height="900"
  style="border:1px solid #d2def5;border-radius:24px;overflow:hidden;"
  loading="lazy"
></iframe>
  </section>
    </div>
  </main>

  <script>

async function verifyReceiz(file) {
  const form = new FormData();
  form.set("file", file);
  const response = await fetch("https://receiz.com/api/document-verify", { method: "POST", body: form });
  const payload = await response.json();
  if (!response.ok) throw new Error(payload?.error || "verify_failed");
  return payload;
}

document.getElementById("receiz-verify")?.addEventListener("click", async () => {
  const input = document.getElementById("receiz-file");
  const output = document.getElementById("receiz-result");
  const file = input instanceof HTMLInputElement ? input.files?.[0] ?? null : null;
  if (!(output instanceof HTMLElement) || !file) return;
  output.textContent = "Verifying...";
  try {
    const payload = await verifyReceiz(file);
    output.textContent = JSON.stringify(payload, null, 2);
  } catch (error) {
    output.textContent = String(error);
  }
});
  </script>
</body>
</html>

Site Kit Builder