{
  "provider": "META",
  "remotePairingUrl": "https://connect.pilotstatus.com.br/connect/eyJhbGciOi...",
  "expiresAt": "2026-07-20T18:30:00.000Z"
}

<div id="wa-connect"></div>
<script>
  // connectUrl is the remotePairingUrl your backend returned in step 1.
  const connectUrl = "https://connect.pilotstatus.com.br/connect/eyJhbGciOi...";

  const iframe = document.createElement("iframe");
  iframe.src =
    connectUrl +
    "?embed=1&mode=button&parentOrigin=" +
    encodeURIComponent(location.origin);
  iframe.style.width = "100%";
  iframe.style.border = "0";
  iframe.style.height = "60px"; // grows via the resize message in step 3
  iframe.setAttribute(
    "sandbox",
    "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
  );
  document.getElementById("wa-connect").appendChild(iframe);
</script>

<script>
  const CONNECT_ORIGIN = "https://connect.pilotstatus.com.br";

  window.addEventListener("message", (event) => {
    // Two mandatory checks. The origin must be the connect host, and every
    // message carries the marker `source: "pilot-status-embed"` — without the
    // second check any script on your own page could forge a connect:paired.
    if (event.origin !== CONNECT_ORIGIN) return;
    const msg = event.data;
    if (!msg || msg.source !== "pilot-status-embed") return;

    // Envelope: { source, v, type, payload }. Only `type` is top-level;
    // everything else lives in `payload`.
    const p = msg.payload || {};
    switch (msg.type) {
      case "connect:paired": {
        const { numberId, phone, displayName, provider, externalRef, redirectUrl } = p;
        // Join externalRef against your own customer record, then persist numberId.
        console.log("Connected", numberId, "for", externalRef);
        break;
      }
      case "connect:expired":
        // The 30-minute link lapsed. Generate a fresh link and re-embed.
        break;
      case "connect:error":
        // Also fires when the customer cancels or closes the Facebook popup.
        // The button stays on screen, so let them retry before cleaning up.
        console.error("Connect failed or was cancelled:", p.message);
        break;
      case "resize":
        iframe.style.height = p.height + "px";
        break;
    }
  });
</script>