Matrix Widget Customizer

Customize the appearance of the Matrix feed widget and generate embed code

Quick Presets

Core Settings

Theme

Base URL

Accent Color

Empty State Icon

Empty State Title

Empty State Subtitle

Container Styling

Background Color

Text Color

Secondary Text Color

Border Color

Border Radius

Padding

Shadow

Card Styling

Icon & Indicators

Typography

Buttons

Animations

Live Preview

Real-time

Embed Code

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

WordPress Integration

Add this code to a Custom HTML block in your WordPress post or page.

Step 1: Add a Custom HTML Block

In the WordPress editor, click the + button and search for "Custom HTML".

Step 2: Paste the Embed Code

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

Step 3: Preview and Publish

Preview your page to ensure the widget displays correctly, then publish!

Available Attributes

theme

"light" | "dark"

accent-color

"blue" | "green" | "red" | ...

empty-icon

"bell" | "gift" | "activity" | "trophy"

empty-title

Custom empty state title

empty-subtitle

Custom empty state subtitle

matrix-background-color

Container background (hex)

matrix-primary-color

Primary accent color (hex)

matrix-card-radius

Card border radius (e.g., "12px")