Discover how to integrate TrackScore leaderboards into various websites and platforms with these practical examples and implementation guides.
Generate your custom embed code from the leaderboard dashboard.
Choose themes, auto-refresh settings, and display options.
Paste the code into your HTML where you want the leaderboard to appear.
A local basketball league wants to display live tournament standings on their website with automatic updates every 30 seconds during games.
sports-arenatrue30 secondsfalse (keep branding)<!-- Basketball Tournament Leaderboard -->
<div class="tournament-standings">
<h2>Live Tournament Standings</h2>
<iframe
src="https://trackscore.online/embed/tournament-2024?theme=sports-arena&refreshInterval=30"
width="100%"
height="600"
frameborder="0"
title="Basketball Tournament Standings">
</iframe>
</div>
<style>
.tournament-standings {
margin: 20px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
}
</style>A sales team wants to display their quarterly performance leaderboard on their internal company dashboard with a clean, professional look.
corporate-cleantruetrue (Premium)300 seconds<!-- Sales Dashboard Integration -->
<div id="sales-leaderboard-container">
<h3>Q4 Sales Performance</h3>
<div id="sales-leaderboard"></div>
</div>
<script>
(function() {
const container = document.getElementById('sales-leaderboard');
const iframe = document.createElement('iframe');
iframe.src = 'https://trackscore.online/embed/sales-q4?theme=corporate-clean&hideHeader=true&hideFooter=true&refreshInterval=300';
iframe.style.width = '100%';
iframe.style.height = '500px';
iframe.style.border = 'none';
iframe.style.borderRadius = '8px';
iframe.title = 'Sales Performance Leaderboard';
// Auto-resize functionality
window.addEventListener('message', function(event) {
if (event.origin !== 'https://trackscore.online') return;
if (event.data.type === 'trackscore-resize') {
iframe.style.height = event.data.height + 'px';
}
});
container.appendChild(iframe);
})();
</script>An esports community wants to embed their tournament leaderboard with a futuristic theme that matches their gaming aesthetic.
cyberpunktrue10 secondsfalse<!-- Gaming Tournament Leaderboard -->
<div class="esports-leaderboard">
<div class="neon-border">
<iframe
src="https://trackscore.online/embed/esports-champ?theme=cyberpunk&refreshInterval=10"
width="100%"
height="700"
frameborder="0"
title="Esports Championship Leaderboard">
</iframe>
</div>
</div>
<style>
.esports-leaderboard {
margin: 30px 0;
background: linear-gradient(45deg, #0a0a0a, #1a1a2e);
padding: 20px;
border-radius: 12px;
}
.neon-border {
border: 2px solid #00ffff;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
overflow: hidden;
}
</style>A learning management system wants to display student quiz rankings with a transparent background that blends with their existing design.
defaulttruetruefalse<!-- Quiz Leaderboard Overlay -->
<div class="quiz-results-section">
<div class="gradient-background">
<h2>Top Quiz Performers</h2>
<p>See how you rank against your classmates!</p>
<div id="quiz-leaderboard"></div>
<script>
(function() {
const container = document.getElementById('quiz-leaderboard');
const iframe = document.createElement('iframe');
iframe.src = 'https://trackscore.online/embed/quiz-results?transparent=true&hideHeader=true&autoRefresh=false';
iframe.style.width = '100%';
iframe.style.height = '400px';
iframe.style.border = 'none';
iframe.style.background = 'transparent';
iframe.title = 'Quiz Results Leaderboard';
container.appendChild(iframe);
})();
</script>
</div>
</div>
<style>
.gradient-background {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 30px;
border-radius: 12px;
color: white;
text-align: center;
}
</style>Allow users to switch between different themes dynamically using JavaScript.
function switchTheme(theme) {
const iframe = document.getElementById('leaderboard-iframe');
const baseUrl = 'https://trackscore.online/embed/YOUR_ID';
iframe.src = `${baseUrl}?theme=${theme}&autoRefresh=true`;
}
// Theme selector buttons
<button onclick="switchTheme('default')">Default</button>
<button onclick="switchTheme('cyberpunk')">Cyberpunk</button>
<button onclick="switchTheme('sports-arena')">Sports</button>Create a responsive container that adapts to different screen sizes.
.leaderboard-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
position: relative;
}
.leaderboard-container iframe {
width: 100%;
border: none;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.leaderboard-container {
margin: 10px;
}
}loading="lazy" for below-fold embeds| Parameter | Values | Default | Description |
|---|---|---|---|
theme | default, cyberpunk, sports-arena, corporate-clean | default | Visual theme for the leaderboard |
hideHeader | true, false | false | Hide the leaderboard title and description |
hideFooter | true, false | false | Hide the TrackScore branding (Premium) |
autoRefresh | true, false | true | Enable automatic data refresh |
refreshInterval | 5-300 (seconds) | 30 | How often to refresh data |
transparent | true, false | false | Use transparent background |
showLogo | true, false | true | Show/hide TrackScore logo |