# Technical Integration

## Integration Options

There are two approaches to including the widget in your website, exchange, wallet, or dApp:

### Button Opening a New Link

You can create a button that opens Onside Flow in a new tab. This is ideal if you want to keep your interface minimal or redirect users externally.

{% code title="Example:" overflow="wrap" %}

```html
<a href="https://flow.onside.io?api_key=<API_KEY>&withdraw_address=<WITHDRAW_ADDRESS>" target="_blank" class="button">Deposit Crypto</a>
```

{% endcode %}

* Replace \<API\_KEY> with your issued API key.
* Replace \<WITHDRAW\_ADDRESS> with the user’s wallet address using the special format (see Parameters).

### Embedding an iFrame

This is the fastest way to embed Onside Flow directly into your application interface.

{% code overflow="wrap" %}

```html
<iframe
  src="https://flow.onside.io?api_key=<API_KEY>&withdraw_address=<WITHDRAW_ADDRESS>"
  width="100%"
  height="100%"
  frameborder="0"
  allow="clipboard-write"
></iframe>
```

{% endcode %}

* Replace \<API\_KEY> with your issued API key.
* Replace \<WITHDRAW\_ADDRESS> with the user’s wallet address using the special format (see Parameters).

### Parameters

* `api_key`(required): your Onside Flow API key.
* `signature`(optional): your request signature. See [Request Signing](/onside-flow/request-signing.md) for more details.
* `withdraw_address`(required): the user’s wallet address. Format-wise, each address should be a combination of the Token ID and the wallet address, separated by a colon.
  * Supported Token IDs:
    * `sol`: SOL wallet on Solana network.
* `user_id`(optional): your internal user ID for analytics and troubleshooting.
* `deposit_type` (optional): defines the deposit method shown to the user. Available values:
  * `crypto`: show only crypto deposit flow;
  * `fiat`: show only cash deposit flow.
  * If not specified, the user will see a selector and can choose the deposit method.

### Branding

For deeper customization (e.g., colors, fonts, logo), reach out to our team.

### Minimum Height Requirement

The Onside Flow widget requires a **minimum height of 740px** to fully display all UI components without internal scrolling.

If you wrap the widget iframe with additional padding or margins (e.g., using Tailwind classes like p-4, mt-6, etc.), make sure to **add those values to the base height**.

#### Example calculation:

Base widget height: 740px\
Wrapper padding: p-4 = 1rem (16px) on all sides → 32px vertical (top + bottom)

**Final minimum iframe height**: 740px + 32px = 786px


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.onside.io/onside-flow/technical-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
