Skip to content
Segmentify CDP

Quickstart

Embed CDP in your app in roughly 10 minutes. This page covers the fastest path (iframe). For deeper integration see Module Federation mount, and for framework-specific examples see the Angular guide.

1. Prerequisites

Section titled “1. Prerequisites”
  • Segmentify API key and Bearer token for your user/session
  • Your domain on the Segmentify CORS allowlist
  • @segmentify/common (optional for iframe — required for mount)

See Prerequisites for details.

2. Add the iframe

Section titled “2. Add the iframe”
<iframe
  id="segmentify-cdp"
  src="https://cdp.segmentify.com/embed.html"
  style="width:100%;height:800px;border:0"
></iframe>

Use cdp-dev.segmentify.com for development, cdp-qa.segmentify.com for QA.

3. Initialize the host bridge

Section titled “3. Initialize the host bridge”
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", // required for CDP
    authToken: yourBearerToken,
    hostData: {
      user: {
        user: {
          account: {
            apiKey: "YOUR_API_KEY",
            dataCenter: "gc",
            mainCurrency: { code: "USD", symbol: "$" },
          },
          lang: "en",
        },
      },
    },
    requestHeaders: {
      "X-Switch-User": "user@example.com",
      "X-Switch-Region": "ALL",
    },
  },
  {
    targetOrigin: "https://cdp.segmentify.com",
    onReady: () => console.log("CDP ready"),
    onNavigate: (path) => yourRouter.push(path),
  }
);

The handshake is: the iframe sends SEGMENTIFY_MFE_READY, then you send SEGMENTIFY_HOST_INIT (the helper does this for you). See the PostMessage protocol for the full message list.

4. Handle updates and cleanup

Section titled “4. Handle updates and cleanup”
// Refresh the auth token without reloading the iframe
controller.updateAuthToken(newToken);


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


// Cleanup when removing the iframe
controller.dispose();

Auth fields reference

Section titled “Auth fields reference”
What you pass HTTP effect
authToken Authorization: Bearer …
hostData.user.user.account.apiKey apiKey query param + React context
requestHeaders['X-Switch-User'] Switch-user header (matches dashboard)
requestHeaders['X-Switch-Region'] Switch-region header (e.g. ALL)
cdpBaseUrl CDP API host for the CDP MFE

CDP adds X-Api-Version: 1.0 on its CDP client automatically.

Next steps

Section titled “Next steps”