WordPress Shortcode Reference

Complete reference for all shortcodes available in the Loyalteez WordPress plugin. Shortcodes allow you to embed loyalty features directly into your posts, pages, and widgets.

---

Overview

The Loyalteez plugin provides 5 shortcodes for displaying loyalty features:

Shortcode	Description	Login Required
[loyalteez_dashboard]	Complete loyalty dashboard	✅ Yes
[loyalteez_balance]	User's LTZ balance	✅ Yes
[loyalteez_streak]	Streak status and check-in	✅ Yes
[loyalteez_leaderboard]	Leaderboard rankings	❌ No
[loyalteez_perks]	Available perks for redemption	✅ Yes

---

[loyalteez_dashboard]

Displays a complete loyalty dashboard with balance, streak, leaderboard, perks, and achievements in a tabbed interface.

Usage

[loyalteez_dashboard]

Parameters

None. The dashboard automatically detects the current logged-in user.

Description

The dashboard shortcode provides a comprehensive view of the user's loyalty status:

• Balance Tab: Shows current LTZ balance
• Streak Tab: Displays streak status with check-in button
• Leaderboard Tab: Shows rankings with filtering options
• Perks Tab: Lists available perks for redemption
• Achievements Tab: Displays achievement progress

Example

In Post/Page Editor:

[loyalteez_dashboard]

Output:

• Renders a tabbed dashboard interface
• Shows user's loyalty information
• Provides interactive features (check-in, perk redemption, etc.)

Requirements

• User must be logged in
• Plugin must be configured with Brand ID
• JavaScript enabled in browser

Styling

The dashboard uses CSS classes that can be customized:

.loyalteez-dashboard {
    /* Dashboard container */
}

.dashboard-header {
    /* Header section */
}

.dashboard-tabs {
    /* Tab navigation */
}

.tab-button {
    /* Individual tab button */
}

.tab-content {
    /* Tab content area */
}

Best Practices

• Use on dedicated "Loyalty Dashboard" page
• Place in user account area or profile page
• Ensure page has sufficient width for dashboard display
• Test on mobile devices for responsive behavior

---

[loyalteez_balance]

Displays the user's current LTZ token balance.

Usage

[loyalteez_balance]

Parameters

None.

Description

Shows the logged-in user's on-chain LTZ balance in a simple display widget. The balance is fetched from the blockchain in real-time.

Example

In Post/Page Editor:

Your current balance: [loyalteez_balance]

Output:

Your current balance: 
💰 25,430 LTZ

Requirements

• User must be logged in
• Plugin must be configured with Brand ID
• JavaScript enabled in browser

Styling

The balance widget uses CSS classes:

.loyalteez-balance-widget {
    /* Balance container */
}

.balance-display {
    /* Balance display area */
}

.balance-amount {
    /* Balance amount text */
}

.balance-label {
    /* "LTZ" label */
}

Best Practices

• Use in sidebar widgets or user profile areas
• Combine with other loyalty information
• Consider caching balance to reduce API calls
• Show loading state while fetching balance

---

[loyalteez_streak]

Displays the user's streak status and provides a daily check-in button.

Usage

[loyalteez_streak]

Parameters

None.

Description

Shows the user's current streak information:

• Current streak count
• Streak multiplier
• Next milestone progress
• Daily check-in button
• Unclaimed milestone bonuses

Example

In Post/Page Editor:

Check your streak: [loyalteez_streak]

Output:

Check your streak:
🔥 Current Streak: 7 days
📊 Multiplier: 1.5x
📈 3 days to next milestone (10-day bonus)
[Check In Today]

Requirements

• User must be logged in
• Plugin must be configured with Brand ID
• JavaScript enabled in browser
• REST API endpoint /wp-json/loyalteez/v1/checkin must be available

Styling

The streak widget uses CSS classes:

.loyalteez-streak-widget {
    /* Streak container */
}

.streak-display {
    /* Streak information display */
}

Best Practices

• Use on homepage or dashboard for visibility
• Place near other engagement features
• Make check-in button prominent
• Show streak milestones to encourage engagement

---

[loyalteez_leaderboard]

Displays leaderboard rankings by various metrics.

Usage

[loyalteez_leaderboard]
[loyalteez_leaderboard metric="ltz_earned" period="week" limit="10"]

Parameters

Parameter	Type	Default	Description
metric	string	ltz_earned	Ranking metric: ltz_earned, activity, or streak
period	string	week	Time period: week, month, or all
limit	integer	10	Number of users to display

Description

Shows top users ranked by selected metric and time period. Includes filtering options for metric and period. Public shortcode (no login required).

Example

Basic Usage:

[loyalteez_leaderboard]

With Parameters:

[loyalteez_leaderboard metric="activity" period="month" limit="20"]

Output:

🏆 Leaderboard - Activity (This Month)

1. @user1 - 127 events
2. @user2 - 89 events
3. @user3 - 76 events
...

Parameters Explained

metric Options:

• ltz_earned: Total LTZ tokens earned
• activity: Number of activity events
• streak: Longest streak achieved

period Options:

• week: Rankings for this week
• month: Rankings for this month
• all: All-time rankings

limit Options:

• Any positive integer (default: 10)
• Recommended: 10-50 for best display

Requirements

• Plugin must be configured with Brand ID
• JavaScript enabled in browser
• REST API endpoint /wp-json/loyalteez/v1/leaderboard must be available

Styling

The leaderboard widget uses CSS classes:

.loyalteez-leaderboard-widget {
    /* Leaderboard container */
}

.leaderboard-filters {
    /* Filter dropdowns */
}

#loyalteez-leaderboard-list {
    /* Leaderboard list */
}

Best Practices

• Use on homepage or community page for visibility
• Adjust limit based on page layout
• Consider using period="all" for persistent rankings
• Use metric="activity" to highlight engagement
• Style consistently with your theme

---

[loyalteez_perks]

Displays available perks for redemption.

Usage

[loyalteez_perks]
[loyalteez_perks category="discount"]

Parameters

Parameter	Type	Default	Description
category	string	all	Perk category filter: all, discount, merchandise, access, experience, digital, or custom

Description

Shows all available perks from your brand that users can redeem with LTZ tokens. Includes perk details, costs, and redemption buttons.

Example

Basic Usage:

[loyalteez_perks]

With Category Filter:

[loyalteez_perks category="discount"]

Output:

🛍️ Available Perks

💰 Discount Code
   Cost: 500 LTZ
   Category: Discount
   [Redeem]

🎁 T-Shirt
   Cost: 2,000 LTZ
   Category: Merchandise
   [Redeem]

Parameters Explained

category Options:

• all: Show all perks (default)
• discount: Discount codes, coupons
• merchandise: Physical products
• access: Exclusive access, VIP
• experience: Events, experiences
• digital: Digital products
• custom: Custom category perks

Requirements

• User must be logged in
• Plugin must be configured with Brand ID
• JavaScript enabled in browser
• REST API endpoint /wp-json/loyalteez/v1/redeem must be available

Styling

The perks widget uses CSS classes:

.loyalteez-perks-widget {
    /* Perks container */
}

#loyalteez-perks-list {
    /* Perks list */
}

Best Practices

• Use on dedicated "Rewards" or "Perks" page
• Filter by category for better organization
• Show perk images if available
• Make redemption buttons clear and prominent
• Display user's balance nearby for context

---

Shortcode Combination Examples

User Profile Page

<h2>Your Loyalty Status</h2>
Balance: [loyalteez_balance]
Current Streak: [loyalteez_streak]

<h2>Available Rewards</h2>
[loyalteez_perks]

Homepage

<h2>Top Contributors</h2>
[loyalteez_leaderboard metric="activity" period="month" limit="10"]

<h2>Your Dashboard</h2>
[loyalteez_dashboard]

Sidebar Widget

[loyalteez_balance]
[loyalteez_streak]

---

Styling Customization

All shortcodes use CSS classes prefixed with loyalteez- that can be customized in your theme's CSS:

/* Global Loyalteez Styles */
.loyalteez-dashboard,
.loyalteez-balance-widget,
.loyalteez-streak-widget,
.loyalteez-leaderboard-widget,
.loyalteez-perks-widget {
    font-family: inherit;
    color: inherit;
}

/* Dashboard Specific */
.loyalteez-dashboard .dashboard-header h2 {
    font-size: 2em;
    margin-bottom: 1rem;
}

/* Balance Widget */
.loyalteez-balance-widget .balance-amount {
    font-size: 2.5em;
    font-weight: bold;
    color: #4CAF50;
}

Theme Compatibility

The shortcodes are designed to work with any WordPress theme. Styles can be overridden in:

1. Theme's style.css
2. Custom CSS plugin
3. WordPress Customizer → Additional CSS

---

JavaScript Dependencies

All shortcodes require JavaScript for full functionality. The plugin automatically:

• Enqueues required scripts
• Localizes data for JavaScript access
• Initializes widgets on page load

Data Available to JavaScript

Each shortcode exposes data via wp_localize_script:

Dashboard:

loyalteezData.brandId
loyalteezData.userIdentifier
loyalteezData.sharedServicesUrl
loyalteezData.apiUrl
loyalteezData.nonce

Balance:

loyalteezBalanceData.brandId
loyalteezBalanceData.userIdentifier
loyalteezBalanceData.apiUrl

Streak:

loyalteezStreakData.brandId
loyalteezStreakData.userIdentifier
loyalteezStreakData.sharedServicesUrl
loyalteezStreakData.apiUrl
loyalteezStreakData.nonce

Leaderboard:

loyalteezLeaderboardData.brandId
loyalteezLeaderboardData.sharedServicesUrl
loyalteezLeaderboardData.metric
loyalteezLeaderboardData.period
loyalteezLeaderboardData.limit

Perks:

loyalteezPerksData.brandId
loyalteezPerksData.userIdentifier
loyalteezPerksData.sharedServicesUrl
loyalteezPerksData.apiUrl
loyalteezPerksData.nonce
loyalteezPerksData.category

---

Troubleshooting

Shortcode Not Displaying

Check:

1. Is the plugin activated?
2. Is the Brand ID configured?
3. Are there JavaScript errors in browser console?

Fix:

• Verify plugin activation
• Check plugin settings page
• Enable JavaScript in browser
• Check browser console for errors

Balance Not Loading

Check:

1. Is user logged in?
2. Has user earned any LTZ?
3. Is API URL correct?

Fix:

• User must be logged in
• User needs to earn LTZ first
• Verify API URL in settings

Leaderboard Empty

Check:

1. Are there users in the system?
2. Have users earned LTZ?
3. Is the time period correct?

Fix:

• Users need to have activity
• Try different time periods
• Verify metric selection

Perks Not Showing

Check:

1. Are perks configured in Partner Portal?
2. Is the category filter correct?
3. Is user logged in?

Fix:

• Create perks in Partner Portal
• Use category="all" to show all
• User must be logged in

---

Related Documentation

• WordPress Integration Guide - Main WordPress integration guide
• WordPress REST API Reference - REST API endpoints
• Shared Services Overview - Backend services documentation

---

Need help? [email protected]