> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blink.cash/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Blink in an aggregator

> Render Blink inline as a payment method inside your own desktop panel, with adaptive sizing, brand colors, and a mobile overlay fallback.

Use the embedded presentation when Blink is one payment method inside your own widget. On desktop, Blink renders inline in an element you provide. On mobile, the same configuration opens Blink's standard full-screen overlay.

The embedded presentation uses the same signer, `requestDeposit()` request, errors, and result as the standard [Deposit SDK integration](/integration/deposit-sdk). You only change how the hosted flow is presented and who owns the surrounding UI.

## What the embedded presentation provides

| Capability          | Behavior                                                                                                                                   |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| Inline desktop flow | Blink mounts a cross-origin iframe inside your container. It adds no backdrop, page scroll lock, dismissal chrome, card radius, or shadow. |
| Adaptive height     | Blink measures each screen and resizes its iframe. The `resize` event lets your outer panel follow the same height.                        |
| Width guidance      | Every `resize` event reports a 440px preferred width and a 320px minimum width. A compact panel can expand when Blink is selected.         |
| Height budget       | `embedMaxHeightPx` caps the iframe. Taller screens scroll inside Blink instead of growing your page indefinitely.                          |
| Brand appearance    | Choose light, dark, or system theme and provide up to five brand colors. Blink derives the rest of its internal palette.                   |
| Warm startup        | The SDK preloads a hidden flow by default. Pass `merchantId` to let Blink prefetch merchant configuration before your signer responds.     |
| Mobile fallback     | On phone-sized devices, Blink uses the standard overlay so wallet lists, QR codes, keypads, and passkey screens have enough room.          |

## Integration responsibilities

| Your widget owns                                                                       | Blink owns                                                           |
| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| Panel width, outer height, radius, background, border, and shadow                      | The payment flow and its internal layout                             |
| Backdrop, focus trap, page scroll lock, Escape behavior, and your back or close button | Wallet connection, authentication, passkeys, and transfer completion |
| Showing the payment-method list before and after Blink                                 | Resizing its iframe and reporting the size it needs                  |
| Calling the signer and handling the result                                             | Communicating securely with the hosted flow                          |

## Follow Blink's size

Add the embedded presentation fields to your standard `Deposit` configuration. Use the `Deposit` class so you can subscribe to its `resize` event.

```typescript theme={null}
const maxHeightPx = 640;
const panel = document.getElementById('payment-panel')!;
const panelBody = document.getElementById('blink-panel-body')!;
const slot = document.getElementById('blink-slot')!;

const deposit = new Deposit({
  signer: '/api/sign-payment',
  presentation: 'embedded',
  containerElement: slot,
  embedMaxHeightPx: maxHeightPx,
});

deposit.on('resize', ({ heightPx, preferredWidthPx, minWidthPx }) => {
  panelBody.style.height = `${Math.min(heightPx, maxHeightPx)}px`;

  if (preferredWidthPx !== undefined) {
    panel.style.width = `${preferredWidthPx}px`;
  }

  if (minWidthPx !== undefined && panel.getBoundingClientRect().width < minWidthPx) {
    console.warn(`Blink needs at least ${minWidthPx}px while active.`);
  }
});
```

The SDK automatically applies each reported height to the Blink iframe. `embedMaxHeightPx` defaults to 90% of the host viewport; pass an explicit value when your widget has a known height limit.

<Warning>
  Apply `heightPx` without a CSS height transition. Blink animates its own height and reports every frame. A second height animation makes the outer panel lag behind the content. Width can transition because `preferredWidthPx` is a stable preference, not a live measurement.
</Warning>

Blink currently reports:

* `preferredWidthPx: 440`
* `minWidthPx: 320`
* `heightPx`: the current rendered content height

The iframe fills the width you grant it and cannot widen your panel itself. Your panel may start narrower than 320px while Blink is not active, then expand to the reported preferred width when the `resize` event arrives. The active Blink flow must receive at least `minWidthPx`; otherwise fixed-width content can overflow.

Make sure parent containers do not prevent the panel from expanding:

```css theme={null}
.payment-panel {
  box-sizing: border-box;
  max-width: calc(100vw - 32px);
  transition: width 160ms ease-out;
}

.blink-panel-body {
  overflow: hidden;
  /* Do not transition height. */
}

.blink-slot,
.blink-slot iframe {
  width: 100%;
}
```

## Match your appearance

Your CSS controls the outer panel. Use `appearance` to theme the cross-origin Blink UI inside the iframe.

```typescript theme={null}
const deposit = new Deposit({
  signer: '/api/sign-payment',
  presentation: 'embedded',
  containerElement: slot,
  appearance: {
    theme: 'dark',
    variables: {
      colorPrimary: '#0f62fe',
      colorBackground: '#101828',
      colorText: '#f7f9fc',
      colorDanger: '#ff5c5c',
      colorBorder: '#22304a',
    },
  },
});
```

| Variable          | Controls                                                            |
| ----------------- | ------------------------------------------------------------------- |
| `colorPrimary`    | Primary buttons, focus rings, and selected states                   |
| `colorBackground` | Blink's internal card surface and light/dark palette basis          |
| `colorText`       | Body text and the derived muted text ramp                           |
| `colorDanger`     | Error text and error surface tint                                   |
| `colorBorder`     | Hairline borders; derived from the background and text when omitted |

Use opaque `#rgb` or `#rrggbb` values. Unsupported values are ignored and reported in the console. Blink derives the remaining palette and enforces contrast for derived text colors.

The following remain fixed to preserve screen fit and payment-state meaning:

* Fonts, type scale, weights, internal spacing, and control radii
* Blink marks and wordmarks
* Success, information, warning, and authorization colors

`appearance` is fixed for the life of a `Deposit` instance. To change it, destroy the instance and construct a new one.

See the [`Deposit` class](/sdk-reference/deposit-class), [events](/sdk-reference/events), and [TypeScript types](/sdk-reference/types) for the full API.