# Remote cards Serve interactive cards (booking, payment, partner forms) from a third-party origin and render them safely in your chat via a sandboxed cross-origin transport. A third-party provider hosts its cards on its own origin — a booking widget, a payment form, a partner micro-frontend. `` frames them in a sandboxed iframe, bridges their events back to your host over `postMessage`, and hands you the same `CardEnvelope` / `CardEvent` contract as every built-in card. No second-origin live demo is possible on this static site — this page is a focused walkthrough. > **caution:** `` needs a running provider at a different origin. It cannot demo here. Run `npm run storybook` for the full interactive demo, or see the reference app in `examples/remote-provider/`. ## How it works The transport has two sides: the **host** (your chat app) and the **provider** (the card server). ``` Host app Provider (different origin) ──────────────────────────────── ───────────────────────────────────── └─ shadow root └─