# 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>
```