iframe embed

The iframe path works with any host stack and gives the strongest isolation. The host embeds embed.html, then drives it over postMessage using bindPostMessageHost from @segmentify/common.

Embed URLs

Environment	iframe URL
Production	https://cdp.segmentify.com/embed.html
QA	https://cdp-qa.segmentify.com/embed.html
Development	https://cdp-dev.segmentify.com/embed.html
Local	http://localhost:5001/embed.html

The embed bootstraps to the default route /customers.

Parent page

<iframe
  id="segmentify-cdp"
  src="https://cdp.segmentify.com/embed.html"
  style="width:100%;height:800px;border:0"
  allow="clipboard-read; clipboard-write"
></iframe>

Host code

import { bindPostMessageHost } from "@segmentify/common";

const iframe = document.getElementById("segmentify-cdp") as HTMLIFrameElement;

const controller = bindPostMessageHost(
  iframe,
  {
    environment: "production",
    hostBaseUrl: "https://sauron.segmentify.com",
    cdpBaseUrl: "https://api.segmentify.com",
    authToken: partnerAuthToken,
    hostData: {
      user: {
        user: {
          account: {
            apiKey: "YOUR_API_KEY",
            dataCenter: "gc",
            mainCurrency: {
              code: "USD",
              symbol: "$",
              symbolBefore: true,
              decimals: 2,
              decimalSeparator: ".",
              thousandSeparator: ",",
            },
          },
          lang: "en",
        },
      },
    },
    requestHeaders: {
      "X-Switch-User": "user@example.com",
      "X-Switch-Region": "ALL",
    },
  },
  {
    targetOrigin: "https://cdp.segmentify.com",
    onReady: () => console.log("MFE initialized"),
    onNavigate: (path) => partnerRouter.push(path),
    onError: (message) => console.error(message),
  }
);

// Push account context updates (e.g. user switched account)
controller.updateHostData(newHostData);

// Refresh auth token without reloading the iframe
controller.updateAuthToken(newToken);

// Cleanup on unmount
controller.dispose();

Handshake

sequenceDiagram
  participant P as Partner parent
  participant M as CDP iframe
  M-->>P: SEGMENTIFY_MFE_READY
  P->>M: SEGMENTIFY_HOST_INIT
  P->>M: SEGMENTIFY_HOST_DATA_UPDATE (optional, later)
  P->>M: SEGMENTIFY_HOST_AUTH_UPDATE (token refresh)
  M-->>P: SEGMENTIFY_MFE_NAVIGATE (MFE requests parent nav)

The parent must wait for SEGMENTIFY_MFE_READY before sending init. bindPostMessageHost handles this ordering for you.

Router behavior in embed mode

In embed mode, host router sync is disabled. CDP renders under an empty basename and requests parent navigation via SEGMENTIFY_MFE_NAVIGATE — wire onNavigate to your router. See the PostMessage protocol for message details, and Security for origin/CSP requirements.