AccountElement

An embeddable, chrome-less version of the Link dashboard. Drop it on any page where the customer is already signed in to Cimplify Link and they can manage their saved addresses, payment methods, sessions, orders, and subscriptions without leaving your domain.

Iframe URL

The element is a wildcard route; append a sub-path to scope it to a section.

https://link.cimplify.io/elements/account            # dashboard overview
https://link.cimplify.io/elements/account/orders     # past orders
https://link.cimplify.io/elements/account/addresses
https://link.cimplify.io/elements/account/payment-methods
https://link.cimplify.io/elements/account/sessions
https://link.cimplify.io/elements/account/settings
https://link.cimplify.io/elements/account/subscriptions

Auth model

AccountElement reads the Link session cookie set on link.cimplify.io. If the customer isn't signed in, the iframe shows a small "Please sign in to view your account" message; pair it with AuthElement (or pass a token via init) to handle authentication.

No SDK wrapper

Unlike AuthElement / AddressElement / PaymentElement, there's no React component for this in @cimplify/sdk/react. You mount the iframe directly. Reason: the surface is page-level navigation rather than a single form field, and merchants who want it almost always want to pin it inside their own settings layout.

Embedding it

function AccountFrame({ token }: { token: string }) {
  const ref = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    function onMessage(event: MessageEvent) {
      if (event.origin !== "https://link.cimplify.io") return;

      // Auto-resize: AccountElement emits height_change continuously.
      if (event.data?.type === "height_change" && ref.current) {
        ref.current.style.height = event.data.height + "px";
      }

      // Initial ready event includes the height.
      if (event.data?.type === "ready" && ref.current) {
        ref.current.style.height = event.data.height + "px";

        // Push the Link token from your Auth flow into the iframe.
        ref.current.contentWindow?.postMessage(
          { type: "init", token },
          "https://link.cimplify.io",
        );
      }
    }
    window.addEventListener("message", onMessage);
    return () => window.removeEventListener("message", onMessage);
  }, [token]);

  return (
    <iframe
      ref={ref}
      src="https://link.cimplify.io/elements/account/orders"
      style={{ border: 0, width: "100%", display: "block" }}
      sandbox="allow-scripts allow-same-origin allow-forms"
      allow="geolocation"
    />
  );
}

Init message

AccountElement accepts a smaller init payload than CheckoutElement:

Field	Notes
`token`	Optional. If supplied, sets the Link session token immediately so the iframe doesn't depend on its cookie.
`appearance.variables.primaryColor`	Maps to `--color-primary`.
`appearance.variables.fontFamily`	Maps to `--font-sans`.
`appearance.variables.borderRadius`	Maps to `--radius`.

Updating the token later

Send { type: "set_token", token } any time you refresh the Link token externally and want the account iframe to pick up the new value.

You can drive in-iframe navigation from the parent by posting { type: "navigate", path: "/orders" }; the path is fed into the iframe's router (useNavigate()).

What lives inside

Each sub-route mirrors a dashboard page:

/: overview with profile + counts.
/orders: past orders with line items, statuses, totals.
/addresses: saved addresses with default-selection and edit.
/payment-methods: saved mobile-money entries.
/sessions: active Link sessions with revoke buttons.
/settings: light/dark/system theme preference.
/subscriptions: active and cancelled subscriptions.

Dashboard pages: What each route shows
AuthElement: Sign customers in to mint a Link token