The AnyAlt Widget provides a seamless way to embed a cross-chain token swap interface directly into your website or application. This guide walks you through the setup, from basic integration to advanced customization—so you can quickly enable cross-chain token swaps for your users using an iFrame.
By the end of this guide, you’ll build a fully functional token buy/swap feature using the AnyAlt Widget.
What You’ll Need
- A code editor (like VSCode)
- A web browser for testing
- An API Key (Request one here)
Let’s get started.
How the AnyAlt Widget Works
The AnyAlt Widget embeds directly into your website using an iFrame and communicates securely via postMessage. Key features include:
- Customizable default token (e.g., USDT, ETH).
- Light/dark theme support.
- Cross-chain compatibility (EVM, Solana, etc.).
The widget handles all the complexity, so you can integrate cross-chain swap with just a few lines of code.
Quick iFrame Setup
For a fast integration, paste this code into an HTML file (e.g., index.html):
<!DOCTYPE html>
<html>
<head>
<title>AnyAlt Widget Demo</title>
</head>
<body>
<h1>Swap Tokens with AnyAlt</h1>
<!-- AnyAlt Widget iFrame -->
<!-- AnyAlt Widget iFrame -->
<iframe
src="https://iframe.anyalt.finance?apiKey=pk_qVLFXBIMKUFralU4dAtXs4awZ&minDepositAmount=0&tokenName=USDT&tokenSymbol=USDT&tokenAddress=0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9&tokenChainId=42161&tokenDecimals=6&tokenChainType=EVM&tokenLogoUrl=https://example.com/usdt-logo.png&theme=dark&backgroundColor=rgb(7,11,23)"
style="width: 100%; height: 1000px; border: none;"
title="Widget"
></iframe>
</body>
</html>- Replace
YOUR_API_KEYwith your actual API key. - Save the file and open it in a browser.
You should now see a fully functional token swap interface!
Required iFrame Parameters
The widget needs these parameters to work:
| Parameter | Description | Example |
| apiKey | Your AnyAlt API key | apiKey=abc123 |
| minDepositAmount | Minimum deposit amount (set 0 for no limit) | minDepositAmount=10 |
| tokenSymbol | Token symbol (e.g., “USDT”) | tokenSymbol=USDT |
| tokenName | Token name (e.g., “USDT”) | tokenName=USDT |
| tokenAddress | Token contract address | tokenaddress=0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9 |
| tokenDecimals | Number of decimals (number) | tokenDecimals=6 |
tokenChainType | Chain type (“EVM”, “SOLANA”) | tokenChainType=EVM |
tokenChainId | Chain ID (number) | tokenchainId=42161 |
Optional Customizations
| Parameter | Description | Example |
|---|---|---|
theme | UI theme (light or dark) | theme=dark |
tokenLogoUrl | URL to token logo | tokenLogoUrl=https://example.com/logo.png |
backgroundColor | Widget background (hex, RGB, or name) | backgroundColor=rgb(7,11,23) |
When all parameters are completed, the code for src should look like this:
src="https://iframe.anyalt.finance?apiKey=pk_qVLFXBIMKUFralU4dAtXs4awZ&minDepositAmount=0&tokenName=USDT&tokenSymbol=USDT&tokenAddress=0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9&tokenChainId=42161&tokenDecimals=6&tokenChainType=EVM&tokenLogoUrl=https://example.com/usdt-logo.png&theme=dark&backgroundColor=rgb(7,11,23)"If you’ve entered and saved the code correctly, your webpage will now display a fully functional swap widget like this:
To customize and style the widget via iFrame, explore the iframe documentation for advanced options.
You’ve successfully integrated the AnyAlt Widget using the iframe—your users can now swap tokens seamlessly on your site!
Need more help? Visit the AnyAlt Documentation.
