> ## 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. # Set Up the SpherePay Ramp Widget > Install and initialize the SpherePay Ramp Widget in your web app. Import the hosted script, create a container element, and configure applicationId. This guide walks you through embedding the SpherePay Ramp Widget in your web application. The setup requires no package installation — you import a hosted script, add a container element, and initialize the widget with your application ID. ## Prerequisites * A SpherePay merchant account. [Request access](https://spherepay.co/en/access-request) if you do not have one. * Your **Merchant Application ID** from the Settings page of your SpherePay dashboard. ## Setup Add a `
` element to your page where you want the widget to appear. Give it an ID you'll reference during initialization. ```html theme={"dark"}
``` Add a ` ``` Define `initSphereRamp()` in your JavaScript. Create a new `RampWidget` instance, passing your container ID and Merchant Application ID. ```javascript theme={"dark"} function initSphereRamp() { new RampWidget({ containerId: 'container', applicationId: 'YOUR_APPLICATION_ID', }) } ``` ## Full example Here is a minimal HTML page that embeds the Ramp Widget: ```html theme={"dark"}
``` ## RampWidget constructor properties | Property | Type | Required | Description | | ----------------- | ------- | -------- | ---------------------------------------------------------------------------------------- | | `containerId` | string | Yes | The `id` of the HTML element where the widget mounts. | | `applicationId` | string | Yes | Your Merchant Application ID from the SpherePay Settings page. | | `theme` | object | No | Customizes the widget's colors, border radius, and logo. See [Theming](/widget/theming). | | `debug` | boolean | No | Enables debug mode for inspecting widget behavior. Disable before production. | | `customerSupport` | string | No | URL or email to surface as a customer support contact inside the widget. | | `allowKyb` | string | No | Controls whether business customer KYB onboarding is allowed in the widget. | ## Debug mode Disable debug mode before deploying to production. Debug mode lets you inspect the widget's behavior and explore customization options. To enable it, pass `debug: true` to the constructor: ```javascript theme={"dark"} function initSphereRamp() { new RampWidget({ containerId: 'container', applicationId: 'YOUR_APPLICATION_ID', debug: true, }) } ``` You can also enable debug mode on any Ramp Widget page by appending `?debug=true` to the URL. ## Next steps * [Customize the appearance](/widget/theming) — apply colors, border radius, and a custom logo to match your brand