Integration

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

You can use this iframe widget only with the TOKEN_BUY usecase

Add the widget to your application using an iframe:

<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

// 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:

<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:

<!-- 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>