Legion Hand Technologies

Notifications Widget Customizer

Live Preview

Customize your notifications widget appearance and generate embed code

Quick Presets

Customization Options

Core Settings

Theme

Max Notifications

Base URL

Container Styling

Notification Items

Typography

Badge & Avatar

Empty State

Buttons

Animations

Live Preview

Real-time

Embed Code

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

<legion-notifications
  user-id="YOUR_USER_ID"
  api-key="YOUR_API_KEY">
</legion-notifications>

Add this code to your WordPress site using a Custom HTML block or your theme's header/footer scripts.

Step 1: Add the script to your site header

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

Step 2: Add the widget where you want it to appear

<legion-notifications
  user-id="YOUR_USER_ID"
  api-key="YOUR_API_KEY">
</legion-notifications>

Available Attributes

user-id

User ID for notifications

api-key

API key for authentication

theme

light | dark

max-notifications

Number of notifications (1-50)

auto-refresh

true | false

notif-primary-color

Primary accent color

notif-border-radius

Container border radius

notif-item-radius

Notification item radius