> ## 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.

# Embed the Widget

> Open the Rampnow widget in an iframe on your page, or redirect the user to it

There are two ways to open the widget URL. Both run the same flow and take the same [parameters](/quickstart/ramp-widget/parameters).

| Mode | The user | Best for |
| - | - | - |
| [iFrame](#iframe-mode) | Stays on your page | Web apps that want an in-page experience |
| [Redirect](#redirect-mode) | Goes to Rampnow's hosted page | The simplest setup, native apps, email links |

The examples below use the sandbox host. Switch to `https://app.rampnow.io` and your production key when you go live.

## iFrame mode

Embed the widget directly on your page.

<Steps>
  <Step title="Create a container">
    Add a container element in your HTML:

    ```html theme={null}
    <div id="ramp-container"></div>
    ```
  </Step>

  <Step title="Construct the widget URL">
    <Tabs>
      <Tab title="Onramp (buy)">
        ```text theme={null}
        https://app.sandbox.rampnow.io/order/quote?apiKey=YOUR_API_KEY&orderType=buy&srcCurrency=EUR&srcChain=fiat&srcAmount=250&dstCurrency=BTC&dstChain=bitcoin&walletAddress=bc1qYourWalletAddress
        ```
      </Tab>

      <Tab title="Offramp (sell)">
        ```text theme={null}
        https://app.sandbox.rampnow.io/order/quote?apiKey=YOUR_API_KEY&orderType=sell&srcCurrency=USDT&srcChain=ethereum&srcAmount=500&dstCurrency=EUR&dstChain=fiat
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Add the iframe">
    Put an iframe pointing at that URL inside your container:

    ```html theme={null}
    <iframe
      src="https://app.sandbox.rampnow.io/order/quote?apiKey=YOUR_API_KEY&orderType=buy&srcCurrency=EUR&srcChain=fiat&srcAmount=250&dstCurrency=BTC&dstChain=bitcoin&walletAddress=bc1qYourWalletAddress"
      title="Rampnow Widget"
      width="100%"
      height="600px"
      frameborder="0"
      allow="payment">
    </iframe>
    ```
  </Step>
</Steps>

<Tip>
  Keep `allow="payment"` on the iframe. Browser payment methods inside the widget need it.
</Tip>

## Redirect mode

Send the user to Rampnow's hosted page.

<Steps>
  <Step title="Construct the widget URL">
    Build the URL exactly as for the iframe:

    ```text theme={null}
    https://app.sandbox.rampnow.io/order/quote?apiKey=YOUR_API_KEY&orderType=buy&srcCurrency=EUR&srcChain=fiat&srcAmount=250&dstCurrency=BTC&dstChain=bitcoin&walletAddress=bc1qYourWalletAddress
    ```
  </Step>

  <Step title="Redirect the user">
    ```javascript theme={null}
    window.location.href = "https://app.sandbox.rampnow.io/order/quote?apiKey=YOUR_API_KEY&orderType=buy&srcCurrency=EUR&srcChain=fiat&srcAmount=250&dstCurrency=BTC&dstChain=bitcoin&walletAddress=bc1qYourWalletAddress";
    ```
  </Step>
</Steps>

In this example, the user buys **250 EUR** worth of **BTC** on the Bitcoin chain, with the crypto sent to `bc1qYourWalletAddress`.

## Track the order

Track orders with [webhooks](/api-reference/webhook), and pass `externalOrderId` to match each order to your own records. If you also want browser events in your page, such as `ORDER_COMPLETED`, use the [SDK](/quickstart/ramp-sdk/events) instead.

## Next steps

<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem'}}>
  <Card title="Webhooks" icon="bell" href="/api-reference/webhook">
    Set up server-side order notifications
  </Card>

  <Card title="Sandbox Testing" icon="flask" href="/api-reference/sandbox-testing">
    Run every order outcome before going live
  </Card>
</div>


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