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

# Ramp Widget: Embed On/Off-Ramp in Your App

> SpherePay's Ramp Widget is a hosted JavaScript component that delivers a branded on/off-ramp experience in your app with no custom API integration required.

The SpherePay Ramp Widget is a hosted, pre-built UI component that lets you embed a fully branded on-ramp and off-ramp experience directly in your web application. You import a single script tag, initialize the widget, and SpherePay handles the entire transaction flow — including compliance, KYC, and security — within its own infrastructure.

## When to use the Ramp Widget

The Ramp Widget is the fastest way to add on/off-ramp functionality to your product. It is the right choice when you want to:

* Get to market quickly without building custom API integrations
* Avoid handling compliance, KYC, and regulatory requirements directly
* Offer a polished, customizable UI that matches your brand

If you need fine-grained control over the transaction flow, per-transfer API calls, or custom backend logic, use the [Transfers API](/concepts/transfers/overview) instead.

## How it works

The Ramp Widget is hosted on a CDN as a JavaScript bundle. You embed it by:

1. Importing the hosted script tag into your HTML page.
2. Creating a container `<div>` element for the widget to mount on.
3. Initializing the widget with your `applicationId` and the container element's ID.

SpherePay handles all transaction processing, compliance checks, and security within the widget itself.

## Prerequisites

* A SpherePay merchant account. [Request access](https://spherepay.co/en/access-request) if you do not have one.
* Your **Merchant Application ID**, found on the Settings page of your SpherePay dashboard.

<Note>
  All transactions processed through the Ramp Widget are real and occur in the production environment. There is no sandbox mode.
</Note>

## Next steps

* [Set up the Ramp Widget](/widget/setup) — step-by-step installation guide
* [Customize the appearance](/widget/theming) — match the widget to your brand with colors, border radius, and a custom logo