Legion Hand Technologies

Profile Widget Customizer

Live Preview

Customize your profile widget appearance and generate embed code

Widget Mode

Profile View

Profile Edit

Display-only profile widget for viewing user information

Quick Presets

Customization Options

Core Settings

Theme

Base URL

Leave empty for auto-detection

Container Styling

Card Styling

Avatar Styling

Primary Colors

Badges & Stats

Tab Styling

Button Styling

Typography

Animations

Live Preview

View Mode

Embed Code

Copy this code and paste it into your HTML page where you want the widget to appear.

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

<legion-profile
  user-id="YOUR_USER_ID"
  auth-token="YOUR_AUTH_TOKEN">
</legion-profile>

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

Step 1: Add the Script

Add this script tag to your theme's header.php or use a plugin like "Insert Headers and Footers":

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

Step 2: Add the Widget

Add a Custom HTML block in your post/page and paste:

<legion-profile
  user-id="YOUR_USER_ID"
  auth-token="YOUR_AUTH_TOKEN">
</legion-profile>

Step 3: Configure

Replace YOUR_USER_ID and YOUR_AUTH_TOKEN with actual values from your application.

Available Attributes

user-id

User ID to display profile for

auth-token

Authentication token for API access

theme

"light" or "dark"

base-url

Base URL for API calls

profile-primary-color

Primary accent color

profile-border-radius

Container border radius

All CSS variable attributes (profile-*) can be used to customize the widget appearance.