# Integration

## Anyalt Widget Integration Guide for Token Buy Template to the HTML via iframe 

{% hint style="warning" %}
You can use this iframe widget only with the TOKEN\_BUY usecase
{% endhint %}

Add the widget to your application using an iframe:

```html
<iframe
  src="https://iframe.anyalt.finance?apiKey=your-api-key&minDepositAmount=0&tokenName=USDT&tokenSymbol=USDT&tokenAddress=0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9&tokenChainId=42161&tokenDecimals=6&tokenChainType=EVM&backgroundColor=%23f5f5f5"
  title="Widget"
  width="980px"
  height="500px"
></iframe>
```

### Required Parameters

* `apiKey`: Your API key for authentication
* `theme`: (Optional) White or Dark theme ('white' | 'dark')
* `minDepositAmount`: Minimum deposit amount (number)
* `tokenName`: Token name (e.g., "USDT")
* `tokenSymbol`: Token symbol (e.g., "USDT")
* `tokenAddress`: Token contract address
* `tokenChainId`: Chain ID (number)
* `tokenDecimals`: Number of decimals (number)
* `tokenChainType`: Chain type ("EVM", "SOLANA")
* `tokenLogoUrl`: (Optional) URL to token logo
* `backgroundColor`: (Optional) Background color of the widget container (hex color code or color name)

### Example Token Configuration

```javascript
// Example URL with token parameters and background color
const widgetUrl = `https://iframe.anyalt.finance?apiKey=your-api-key&minDepositAmount=0&tokenName=USDT&tokenSymbol=USDT&tokenAddress=0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9&tokenChainId=42161&tokenDecimals=6&tokenChainType=EVM&tokenLogoUrl=https://example.com/usdt-logo.png&backgroundColor=%23f5f5f5`;
```

### Error Handling

The widget will display validation errors in a user-friendly format if any parameters fail validation. Errors will be shown for:

* Missing required fields
* Invalid parameter formats
* Out-of-range values
* Invalid addresses for the specified chain type

Example error display:

```
Validation Errors:
• tokenAddress: Invalid token address for chain type EVM
• tokenDecimals: Decimals must be between 0 and 18
```

### Styling

The widget can be styled using standard iframe CSS properties:

```html
<iframe
  src="https://iframe.anyalt.finance?apiKey=your-api-key&minDepositAmount=0&tokenName=USDT&tokenSymbol=USDT&tokenAddress=0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9&tokenChainId=42161&tokenDecimals=6&tokenChainType=EVM&tokenLogoUrl=https://example.com/usdt-logo.png&backgroundColor=%23f5f5f5"
  style="
    width: 100%;
    height: 500px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  "
  title="Widget"
></iframe>
```

### Background Color Examples

You can set the background color using:

* Hex color codes: `backgroundColor=%23f5f5f5` (URL-encoded #f5f5f5)
* Color names: `backgroundColor=white`
* RGB values: `backgroundColor=rgb(245,245,245)`

Example URLs:

```html
<!-- Light gray background -->
<iframe src="...&backgroundColor=%23f5f5f5" ...></iframe>

<!-- White background -->
<iframe src="...&backgroundColor=white" ...></iframe>

<!-- Custom RGB background -->
<iframe src="...&backgroundColor=rgb(245,245,245)" ...></iframe>
```


---

# 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.anyalt.finance/iframe/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.