Wallet Widget Customizer

Customize the appearance of your wallet widget with real-time preview. Perfect for WordPress and any website.

Quick Presets

Core Settings

Theme

Base color scheme

Height

Widget height in pixels

Base URL

Your deployment domain (leave empty for current)

Container Appearance

Card Appearance

Typography

Animations & Effects

Live Preview

Preview requires authentication. Log in to see your actual wallet data.

Embed Code

Replace YOUR_USER_ID with the actual user ID from your system.

Complete Embed Code

<script src="https://your-domain.com/js/wallet-widget.js"></script>

<legion-wallet
  user-id="YOUR_USER_ID"
  base-url="https://your-domain.com"
></legion-wallet>

WordPress Integration

Follow these steps to add the wallet widget to your WordPress site.

Step 1: Add Script (One Time)

Add to your theme header.php or use "Header Footer Code Manager" plugin

<script src="https://your-domain.com/js/wallet-widget.js"></script>

Step 2: Add Widget

Paste in a Custom HTML block (Gutenberg) or Text mode (Classic Editor)

<legion-wallet
  user-id="YOUR_USER_ID"
  base-url="https://your-domain.com"
></legion-wallet>

💡 WordPress Tips

Complete reference for all wallet widget customization options.

📋 Core Attributes

user-id       - Required. User ID for wallet display
theme         - "light" or "dark", default: light
show-balance  - Show balance tab (true/false), default: true
show-history  - Show history tab (true/false), default: true
height        - Widget height in pixels, default: 500
base-url      - Your deployment URL
api-key       - API key for authenticated requests

🎨 Theming Attributes

🎯 Preset Themes