Embedding Leaderboards
Display your TrackScore leaderboards anywhere on the web with customizable embed codes, real-time updates, and responsive design that seamlessly integrates with your website.
What is Leaderboard Embedding?
Website Integration
Embed live leaderboards directly into your website, blog, or dashboard using simple HTML or JavaScript code.
Real-time Updates
Automatically refresh your embedded leaderboards with live data, keeping your audience engaged with up-to-date rankings.
Embedding Methods
Quick and easy embedding using a standard HTML iframe element. Perfect for static implementations.
<iframe src="https://trackscore.online/embed/YOUR_ID" width="100%" height="600" frameborder="0" title="Competition Leaderboard"> </iframe>
Best for:
- Simple website integration
- Fixed height requirements
- Quick implementation
Advanced embedding with automatic height adjustment and enhanced communication between iframe and parent page.
<div id="trackscore-leaderboard"></div>
<script>
(function() {
var iframe = document.createElement('iframe');
iframe.src = 'https://trackscore.online/embed/YOUR_ID';
iframe.style.width = '100%';
iframe.style.height = '600px';
iframe.style.border = 'none';
// Auto-resize functionality
window.addEventListener('message', function(event) {
if (event.data.type === 'trackscore-resize') {
iframe.style.height = event.data.height + 'px';
}
});
document.getElementById('trackscore-leaderboard')
.appendChild(iframe);
})();
</script>Best for:
- Dynamic height adjustment
- Responsive layouts
- Enhanced user experience
Embed Code Generator
Screenshot showing the embed code generator interface in the TrackScore dashboard, with customization options and live preview.
Customization Options
Available Themes:
- • Default - Clean, minimal design
- • Cyberpunk - Neon colors and futuristic styling
- • Sports Arena - Athletic competition styling
- • Corporate Clean - Professional business appearance
Additional Options: Hide header/footer, transparent backgrounds, custom dimensions, and branding control.
Auto-refresh Features:
- • Configurable refresh intervals (5-300 seconds)
- • Live update indicators
- • Smooth score transitions
- • Optional auto-refresh disable
Perfect for live events, tournaments, and ongoing competitions where real-time updates are crucial.
Mobile-Ready:
- • Automatically adapts to container width
- • Mobile-friendly touch interface
- • Dynamic height adjustment
- • Cross-browser compatibility
Ensures your leaderboards look great on desktop, tablet, and mobile devices.
Popular Use Cases
Embed tournament leaderboards on gaming sites, sports club websites, or event pages to keep participants and spectators engaged.
?theme=sports-arena&refreshInterval=10Display sales leaderboards, performance metrics, or team achievements on company intranets and internal dashboards.
?theme=corporate-clean&hideFooter=trueIntegrate leaderboards into learning management systems, classroom websites, or educational apps to gamify learning experiences.
?theme=default&transparent=trueAdd interactive leaderboards to blog posts, articles, or community pages to increase engagement and reader participation.
?hideHeader=true&refreshInterval=60
Embedding Examples
Examples of embedded leaderboards in different themes and configurations, showing various customization options in action.
Enhanced Customization
- Access to all premium themes
- Hide TrackScore branding
- Advanced appearance options
- Custom CSS injection
Business Features
- White-label embedding options
- Priority technical support
- Analytics and usage tracking
- API access for automation