Leaderboard Widget

Why Should You Use the Leaderboard Widget?

Interactive Podium Display

Showcase your top three performers with an elegant podium layout that celebrates achievements. The top three participants are automatically highlighted with clear rank labels (1st, 2nd, and 3rd Place). Each podium card features participant images, names, and scores. This prominent display captures visitor attention and creates excitement around your leaderboard. Perfect for highlighting contest winners, top sales performers, or competition champions.

Seamless Participant Management

Add, edit, delete, and organize participants with an intuitive interface. Each participant supports custom names, profile images, and numeric scores. Upload participant images directly via drag-and-drop or use image URLs for quick integration. The system automatically validates image formats (JPG, PNG, WEBP, SVG) and file sizes. Participants are automatically sorted by score in descending order, so your top performers always appear first.

Dynamic Score Tracking and Formatting

Display participant scores with automatic number formatting that makes large values easy to read. Scores are sorted automatically, with the highest performers rising to the top. The system handles any numeric value, from single digits to millions. Update scores instantly and watch as participants reorder automatically. This dynamic sorting ensures your leaderboard always presents the most current rankings.

Customizable Styling and Typography

Control every visual aspect of your leaderboard with comprehensive styling options. Customize layout background colors, padding, margins, and border radius. Fine-tune heading and subheading styling with independent controls for font family, font size, font weight, and color. Choose from multiple font families including System UI, Arial, Helvetica, Georgia, Times New Roman, Inter, Roboto, and Open Sans. Adjust podium card appearance with custom backgrounds, borders, and text colors to match your brand aesthetic.

Professional Table Display

Present all participants in a clean, organized table format that makes it easy to scan rankings. The table includes clear column headers for Rank, Participant, and Score. Intuitive row highlighting on hover improves readability. Customize table styling with independent controls for background colors, border colors, header background, and row hover effects. Adjust image sizes and border radius for participant photos. The table automatically adapts to display all participants while maintaining a structured format.

Podium Card Customization

Fine-tune the appearance of your top three podium cards with granular styling controls. Customize card background colors, border width and color, border radius, and all text elements. Adjust podium image border radius to match your design preferences. Control font sizes and weights for rank labels, participant names, and scores. The podium automatically adjusts its layout to highlight the first-place winner prominently.

Responsive Mobile Design

The leaderboard adapts beautifully to all screen sizes with intelligent responsive breakpoints. On mobile devices, the podium reorders vertically with the first-place winner appearing first. Table columns resize appropriately for smaller screens. Typography scales for optimal readability. Participant images adjust to maintain visual balance. The layout maintains its professional appearance across phones, tablets, and desktops without requiring separate configurations.

Real-Time Visual Feedback

Changes apply instantly without requiring page reloads or redeployments. The leaderboard automatically re-sorts participants when scores change. Smooth styling transitions and hover effects create a polished experience. The interface provides instant validation feedback when adding or editing participants. All changes are reflected immediately in the preview, allowing you to see exactly how your leaderboard will appear.

Built for Live Updates

Modify participants, update scores, adjust styling preferences, or change layout settings without redeploying your site. Add new competitors or update existing scores with ease. Add participant images via drag-and-drop or URL. Update scores in real-time and watch as rankings automatically adjust. All styling modifications apply instantly. This flexibility ensures your leaderboard stays current, relevant, and aligned with your goals.