Embed útmutató

Másold be az iframe kódot, illeszd be az auto-resize scriptet, és kész is vagy

A partnerek már most tudnak sandbox tokennel tesztelni. A végleges űrlap a /app/embed/return-request endpointon érhető el.

1. Iframe snippet

<iframe
  id="reclaim-return-frame"
  src="https://reclaim.hu/app/embed/return-request?token=demo-partner"
  title="Reclaim visszáru űrlap"
  style="width:100%;border:0;min-height:520px;border-radius:24px;background:#0f172a"
  loading="lazy"
></iframe>

2. Auto-resize (vanilla JS)

<script>
  window.addEventListener("message", (event) => {
    if (event.origin !== "https://reclaim.hu") return;
    if (event.data?.type === "reclaim:height") {
      const frame = document.getElementById("reclaim-return-frame");
      if (frame) frame.style.height = event.data.value + "px";
    }
  });
</script>

React példa

import { useEffect, useRef } from "react";

export function ReclaimEmbed() {
  const ref = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    const listener = (event: MessageEvent) => {
      if (event.origin !== "https://reclaim.hu") return;
      if (event.data?.type === "reclaim:height" && ref.current) {
        ref.current.style.height = event.data.value + "px";
      }
    };

    window.addEventListener("message", listener);
    return () => window.removeEventListener("message", listener);
  }, []);

  return (
    <iframe
      ref={ref}
      src="https://reclaim.hu/app/embed/return-request?token=demo-partner"
      title="Reclaim visszáru űrlap"
      className="w-full rounded-3xl border border-stroke bg-white"
      loading="lazy"
    />
  );
}

Preview

Dummy beágyazott keret

A demó iframe automatikusan méretezi magát postMessage segítségével, így a partnereid azonnal látják a működését.

A fenti preview mutatja, hogyan dolgozik a postMessage-alapú auto-resize. A végleges iframe a /app/embed/return-request végponton lesz elérhető.