🚀 Try It Now
Click any button below to see the guided wallet connection flow:
Each button opens a 4-step guided connection flow with real wallet detection!
🎨 Button Styles
Multiple styles and sizes available for different use cases:
Sizes
Styles
Wallet Types
⚙️ Developer Integration
Easy integration with just a few lines of code:
1. Include the Scripts
<!-- Include the wallet connection system -->
<script src="wallet-api-buttons.js"></script>
<script src="wallet-connection-popups.js"></script>
2. Create Buttons
<!-- Simple HTML approach -->
<button class="wallet-connect-btn phantom" data-connect-wallet="phantom">
Connect Phantom
</button>
<!-- Or use JavaScript API -->
<script>
// Create button programmatically
const buttonHTML = WalletButtons.phantom({ size: 'large', style: 'outline' });
document.getElementById('wallet-container').innerHTML = buttonHTML;
// Create multiple buttons
const multipleButtons = WalletAPIButtons.createButtonGroup(['phantom', 'metamask']);
document.getElementById('wallet-grid').innerHTML = multipleButtons;
</script>
3. Listen for Events
<script>
// Listen for successful wallet connections
window.addEventListener('wallet-connected', (event) => {
console.log('Wallet connected:', event.detail);
// Update your app state, refresh balances, etc.
});
// Update button states
WalletAPIButtons.updateButtonStates();
</script>
✨ Features
4-Step Guided Flow
Step-by-step instructions with progress tracking and visual feedback.
Mobile Responsive
Optimized for mobile devices with touch-friendly interfaces.
Auto-Detection
Automatically detects installed wallets and connection status.
Multiple Styles
Various button sizes and styles to match your design system.
Error Handling
Graceful error handling with troubleshooting guides and manual fallbacks.
Customizable
Easy to customize colors, text, and behavior to match your brand.