Integrasikan Leaderboard ke Website Anda
Fitur Embed Leaderboard memungkinkan Anda menampilkan papan peringkat kompetisi secara langsung di website eksternal atau portal internal perusahaan Anda dengan UI yang tetap premium dan interaktif.
Instalasi Mudah
Cukup copy-paste 1 baris kode iframe dari Admin.
Multi-Program
Dukungan otomatis untuk banyak kompetisi dalam satu view.
Privasi Data
Data diisolasi aman per perusahaan menggunakan Secure Token.
Keamanan & Token
Setiap perusahaan memiliki Secure Token (UUID) unik. Token ini wajib disertakan dalam link embed untuk memastikan data yang ditampilkan hanya milik perusahaan Anda.
Penting: Jangan membagikan token Anda kepada pihak yang tidak berkepentingan. Admin dapat melakukan reset token jika terjadi kebocoran keamanan.
Panduan Integrasi
Kami menyediakan dua cara integrasi. Anda dapat menggunakan kode snippet siap pakai yang menyertakan sistem Auto-Height agar tampilan menyatu sempurna tanpa double scrollbar.
Ambil potongan kode di bawah ini, atau dapatkan langsung yang sudah menyertakan Token dari Admin Panel:
<div id="leaderboard-container">
<iframe
src="https://caps.tnyi.co.id/leaderboard/embed?token=[token_perusahaan]"
id="leaderboard-iframe"
width="100%"
style="border:none; overflow:hidden;"
scrolling="no"
></iframe>
<script>
window.addEventListener('message', function(e) {
if (e.data.type === 'leaderboard-resize') {
document.getElementById('leaderboard-iframe').style.height = e.data.height + 'px';
}
});
</script>
</div>Catatan Penting
Ganti [token_perusahaan] dengan token asli yang Anda dapatkan dari Admin.
Multi-Program Support
Jika perusahaan Anda memiliki lebih dari satu program aktif (misal: Program Sales & Program Operational), leaderboard mendukung dua mode tampilan:
Mode Terpisah
Tambahkan parameter &program_id=ID untuk menampilkan hanya satu leaderboard program tertentu.
Mode Kumulatif
Kosongkan program_id untuk menampilkan semua program aktif secara otomatis dalam tabel terpisah yang dikelompokkan.
Filtering Global
Fitur Pencarian dan Sorting bersifat global. Jika Anda menampilkan banyak program sekaligus, fitur ini akan menyaring semua tabel sekaligus dalam satu aksi untuk kemudahan navigasi.
Teknologi Real-time
Update otomatis tanpa refresh halaman.
Leaderboard menggunakan teknologi Adaptive Polling. Konten akan diperbarui setiap 30 detik jika ada perubahan data, memastikan informasi peringkat selalu aktual.
Troubleshooting
Kenapa Leaderboard tidak muncul (404 Error)?
token yang valid. Pastikan token di URL iframe sesuai dengan data di Admin Panel. Tanpa token yang valid, akses akan otomatis ditolak.
Kenapa tinggi Iframe tidak menyesuaikan otomatis?
window.addEventListener('message', ...) tepat di bawah tag iframe. Script ini bertugas mendengarkan pesan "resize" dari leaderboard untuk menyesuaikan tinggi container secara dinamis.