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

# SDK Display Modes

> Open the Rampnow widget as an overlay, embedded in your layout, or as a redirect URL

The SDK opens the same widget in three ways. Pick one per entry point; you can use different modes in different parts of your app.

| Mode | How | Best for |
| - | - | - |
| [Overlay](#overlay-mode) | `init()` without `containerId` | The quickest setup, a "Buy crypto" button anywhere |
| [Embedded](#embedded-mode) | `init()` with `containerId` | A dedicated buy or sell page inside your layout |
| [Redirect](#redirect-mode) | `RampnowSdk.createRedirectUrl()` | Native apps, email links, or opening in a new tab |

## Overlay mode

Opens the widget as a full-screen modal overlay. This is the default when you don't pass `containerId`.

```javascript theme={null}
import { RampnowSdk } from '@rampnow/sdk'

const sdk = new RampnowSdk({
  apiKey: 'pk_YOUR_API_KEY',
  orderType: 'buy',
  srcCurrency: 'EUR',
  dstCurrency: 'ETH',
  dstChain: 'ethereum',
})

sdk.init() // Opens the overlay
```

Call `sdk.close()` to remove it, or let the user close it from the widget.

## Embedded mode

Mounts the widget inside a DOM element you own. Pass the element's ID as `containerId`, and size it with `width` and `height`.

```html theme={null}
<div id="rampnow-widget"></div>
```

```javascript theme={null}
import { RampnowSdk } from '@rampnow/sdk'

const sdk = new RampnowSdk({
  apiKey: 'pk_YOUR_API_KEY',
  containerId: 'rampnow-widget',
  width: 450,
  height: 700,
  orderType: 'buy',
  dstCurrency: 'ETH',
  dstChain: 'ethereum',
})

sdk.init()
```

## Redirect mode

Builds a widget URL without opening an iframe. Use it for native apps, email links or server-side flows. `createRedirectUrl` is static, so you don't need an instance.

```javascript theme={null}
import { RampnowSdk } from '@rampnow/sdk'

const url = RampnowSdk.createRedirectUrl({
  apiKey: 'pk_YOUR_API_KEY',
  orderType: 'buy',
  srcCurrency: 'EUR',
  srcAmount: '250',
  dstCurrency: 'BTC',
  dstChain: 'bitcoin',
  walletAddress: 'bc1qYourWalletAddress',
})

window.open(url, '_blank')
```

<Note>
  In redirect mode the widget runs outside your page, so [browser events](/quickstart/ramp-sdk/events) don't reach your app. Track the order with [webhooks](/api-reference/webhook).
</Note>

<Card title="Next: Events & commands" icon="arrow-right" href="/quickstart/ramp-sdk/events">
  React to order progress and send data back to the widget
</Card>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.