Widget Documentation
Learn how to integrate LiquidSwap widgets into your website
Quick Start
Get started with LiquidSwap widgets in minutes
Configuration Options
Customize your widget with URL parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| theme | string | auto | Theme: "light", "dark", or "auto" |
| primaryColor | string | #3b82f6 | Primary color (hex format) |
| backgroundColor | string | - | Background color (hex format) |
| borderRadius | number | 12 | Border radius in pixels |
| showLogo | boolean | true | Show LiquidSwap logo |
| showWalletButton | boolean | false | Show wallet button in header |
| showPoweredBy | boolean | true | Show "Powered by" footer |
| width | number | 480 | Widget width in pixels |
| height | number | auto | Widget height in pixels |
Examples
Common widget configurations
Dark Theme Widget
<iframe
src="https://liqd.ag/widget?theme=dark&primaryColor=%23f59e0b"
width="480"
height="600"
frameborder="0"
title="LiquidSwap Widget">
</iframe>Compact Widget (No Logo/Footer)
<iframe
src="https://liqd.ag/widget?showLogo=false&showPoweredBy=false"
width="480"
height="500"
frameborder="0"
title="LiquidSwap Widget">
</iframe>Custom Styled Widget
<iframe
src="https://liqd.ag/widget?primaryColor=%23ef4444&borderRadius=20&width=400"
width="400"
height="600"
frameborder="0"
style="border: 2px solid #ef4444; border-radius: 20px;"
title="LiquidSwap Widget">
</iframe>Wallet Connection
How users connect their wallets
Automatic Wallet Connection
The widget automatically handles wallet connection. When users haven't connected a wallet, the main action button will show "Connect Wallet" instead of swap-related text.
Connection Options
- • Main Button: Primary connection method via the swap action button
- • Header Button: Optional wallet button in header (disabled by default)
Enable Header Wallet Button
<iframe
src="https://liqd.ag/widget?showWalletButton=true"
width="480"
height="600"
frameborder="0">
</iframe>Best Practices
Tips for optimal widget integration
- Responsive Design: Consider using CSS media queries to adjust widget dimensions on mobile devices.
- Loading State: Show a loading indicator while the widget iframe loads.
- Security: Always use HTTPS URLs for production websites.
- Styling: Match the widget colors to your website's design system for better integration.
- Testing: Test the widget in different browsers and devices before going live.
Support & Resources
Get help with widget integration