> For the complete documentation index, see [llms.txt](https://docs.localramp.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.localramp.co/crypto-off-ramp/widget-sell/widget-pop-up.md).

# Widget Pop-up

The widget product allows you to on-ramp your users without them leaving your website/app by just initiating a pop-up.

### 1. Get your public key

Get your [public key](https://merchant.localramp.co/dashboard/settings/api) from your dashboard

### 2. Add the inline script

{% code lineNumbers="true" %}

```html
<form>
    <script src="https://cdn.localramp.co/onramp-inline.js"></script>
    <button type="button" onclick="payWithLocalRamp()"> Pay </button>
</form>
```

{% endcode %}

```html
<script>
    function payWithLocalRamp() {
        window.LocalRampSell.initialize({
            public_key: "pk_live_*********************",
            reference: "your-unique-reference",
            from_amount: "10", 
            from_currency: "USDT",
            crypto_chain: "TRX",
            country_code: "NG",
            to_currency: "NGN",
            email: "richard@piedpiper.com",
            widget_color: "#DA70D6",
            onClose: function (ref) {
              // Handle when the modal is closed
            },
        });
    }
</script>
```

{% hint style="danger" %}
Avoid exposing your ***secret key*** on the client side (or front end) of your application. Requests to LocalRamp's API should be initiated from your server.
{% endhint %}

<table><thead><tr><th width="190">Field</th><th width="121">Data Type</th><th>Description</th></tr></thead><tbody><tr><td>reference</td><td>String</td><td><strong>Required</strong> - Your unique transaction reference. <em>Must be unique for every transaction</em>. e.g "Abc123"</td></tr><tr><td>email</td><td>String</td><td><strong>Optional</strong> e.g "customer@example.com"</td></tr><tr><td>from_currency</td><td>String</td><td><strong>Optionally</strong> <strong>Required</strong> - The crypto currency your user would be sending. It becomes required only if <code>from_amount</code> or <code>to_amount</code> is provided. e.g "USDT"</td></tr><tr><td>crypto_chain</td><td>String</td><td><strong>Optionally</strong> <strong>Required</strong> - The crypto_chain of from_currency. It becomes required only if <code>from_amount</code> or <code>to_amount</code> is provided. e.g "BSC"</td></tr><tr><td>to_currency</td><td>String</td><td><strong>Optionally</strong> <strong>Required</strong> - The fiat currency that would be received. It becomes required only if <code>from_amount</code> , <code>to_amount</code>  e.g "NGN"</td></tr><tr><td>country_code</td><td>String</td><td><strong>Optionally</strong> <strong>Required</strong> - The country_code where payout would be received. It becomes required only if <code>to_currency</code> is present e.g "NG", "KE", "GH"</td></tr><tr><td>from_amount</td><td>String</td><td><strong>Optional</strong> - crypto amount the user would be paying in <code>from_currency</code> unit. e.g "0.02343434". If this is present, then <code>to_amount</code> should be omitted</td></tr><tr><td>to_amount</td><td>String</td><td><strong>Optional</strong> - fiat amount that should be paid out in <code>to_currency</code> unit. e.g "10000". If this is present, then <code>from_amount</code> should be omitted</td></tr><tr><td>widget_color</td><td>String</td><td><strong>Optional</strong> - Hex color code to customize widget e.g "#DA70D6"</td></tr><tr><td>onClose</td><td>[Function]</td><td><strong>Optional</strong> - Gets called whenever the user closes the modal. This could be as a result of the transaction being completed or abandoned.</td></tr></tbody></table>

{% hint style="info" %}
You can pass either the `from_amount` or `to_amount` when initializing the widget but **not** both.
{% endhint %}

{% hint style="info" %}
Before passing in either the `from_amount` or `to_amount`, you'll need to know the **maximum** and **minimum** values allowed for each field. See [limit section](/crypto-off-ramp/widget-sell/get-limits.md).
{% endhint %}

{% hint style="info" %}
To get the list of supported currencies and country codes for both `from_currency` and `to_currency` see the  [Get currencies section](/crypto-off-ramp/widget-sell/get-supported-currencies.md).
{% endhint %}

{% hint style="warning" %}
**`from_amount`** and **`to_amount`** show payment intent and does not guarantee the exact value that would be received at the end of the transaction. To see the exact amounts received,  [get transaction state](/crypto-off-ramp/widget-sell/get-transaction-state.md).
{% endhint %}

### 3. Verifying the transaction status

Once the modal is closed, the onClose function is called with the transaction reference

```javascript
onClose(reference)
```

This is the same reference used in initializing the widget which can now be used to verify the transaction. See [verify section](/crypto-off-ramp/widget-sell/get-transaction-state.md)

### 4. Receive confirmation via webhook

In some cases, the fiat might take a few minutes to arrive. If you do not want to keep querying the transaction status, you can always get informed when the transaction is complete through webhooks. See  [webhook section](/webhooks/introduction.md).