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

# Onramp & Offramp Widget

> Embed Rampnow's buy and sell flow in your product with a URL or an iframe

The widget is Rampnow's complete buy and sell flow, opened with a URL. You link to it or put it in an iframe, pass your partner key and any order details you already know as query parameters, and Rampnow runs everything from sign-in to delivery. There is no package to install and no JavaScript to write.

<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem'}}>
  <Card title="iFrame or Redirect" icon="code-branch" href="/quickstart/ramp-widget/embed">
    Keep users on your page with an iframe, or send them to the hosted page
  </Card>

  <Card title="Quick Setup" icon="bolt" href="/quickstart/ramp-widget/parameters">
    Configure everything with URL parameters
  </Card>

  <Card title="All Payment Methods" icon="credit-card" href="/quickstart/resources/payment-methods">
    Every payment method enabled for your account, out of the box
  </Card>

  <Card title="Pre-filled orders" icon="sliders" href="/quickstart/ramp-widget/parameters">
    Pre-fill direction, assets, amount and wallet address
  </Card>
</div>

<Tip>
  Need event callbacks, open/close control or a React hook? The [SDK](/quickstart/ramp-sdk/overview) wraps the widget with a JavaScript API and accepts the same parameters.
</Tip>

## How it works

<Steps>
  <Step title="Build the widget URL">
    Start from the widget host for your environment, add `/order/quote` and your parameters. See [URL parameters](/quickstart/ramp-widget/parameters).
  </Step>

  <Step title="Open it">
    Load the URL in an iframe or redirect the user to it. See [Embed](/quickstart/ramp-widget/embed).
  </Step>

  <Step title="The user completes the order">
    The user signs in, passes KYC if needed and pays or sends crypto. See [User Flow](/quickstart/ramp/flow) for what they see.
  </Step>

  <Step title="Track it with webhooks">
    Rampnow sends a webhook to your endpoint on every status change. See the [Webhook guide](/api-reference/webhook).
  </Step>
</Steps>

## Your partner API key

Every widget session, whether opened by URL, iframe or the SDK, carries your **partner API key** as `apiKey`. That key is what makes the order yours:

* Orders placed through your integration are attributed to your account in the [Partner Dashboard](https://partner.rampnow.io)
* Order status webhooks go to your endpoint
* The partner fee agreed with Rampnow for your account applies to each order. It can be zero if you integrate for visibility only

Use the **public key** from the Partner Dashboard under **API Hub**. Sandbox and production keys are different, and each only works against its own environment.

<Note>
  The public key is safe to ship in client-side code. You don't need a backend, an API secret or request signing to open the widget. The API key and secret pair (with `X-RAMPNOW-SIGN`) is only for the [Onramp & Offramp Intent](/quickstart/ramp-intent/overview) REST API.
</Note>

## Environments

| Environment | Widget host | Key |
| - | - | - |
| Sandbox | `https://app.sandbox.rampnow.io` | Sandbox public key |
| Production | `https://app.rampnow.io` | Production public key |

Build and test against sandbox first. No real money or mainnet crypto moves there. See [Sandbox Testing](/api-reference/sandbox-testing) for test payments and testnet tokens.

## When to use the widget

<AccordionGroup>
  <Accordion title="Ideal for" icon="check">
    * Platforms that want a deeply integrated experience with minimal code
    * The fastest launch: a link or an iframe is enough
    * Native apps and emails, where a URL is easier than a JavaScript SDK
    * Teams that want Rampnow's pre-built UI, updated without code changes
  </Accordion>

  <Accordion title="Consider something else when" icon="triangle-exclamation">
    * You need browser events or programmatic control: use the [SDK](/quickstart/ramp-sdk/overview)
    * You want to build the pre-checkout journey yourself and create orders server-to-server: use [Onramp & Offramp Intent](/quickstart/ramp-intent/overview)
  </Accordion>
</AccordionGroup>

See [Integrations Overview](/quickstart/integrations/overview) for a side-by-side comparison.

<Card title="Next: URL parameters" icon="arrow-right" href="/quickstart/ramp-widget/parameters">
  Every parameter you can pass to the widget
</Card>


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