Leaderboard Integration

Updated on: June 3, 2026

Halo Sultanku! pada artikel ini, mimin akan membahas bagaimana cara kamu untuk mendapatkan dan mengintegrasikan data leaderboard BagiBagi dari Bagibagi.co, sehingga kamu dapat menampilkan daftar user teratas di aplikasi atau website yang kamu inginkan.

Mimin akan menjelaskan bagaimana cara kamu mendapatkan endpoint leaderboard dan mengimplementasikannya di aplikasi kamu, beserta cara mengatur overlay leaderboard di streaming kamu. Dibawah ini adalah sesi integrasi yang kamu dapat ikuti:

• Cara Mendapatkan Leaderboard Endpoint
• Setup Overlay Leaderboard
• Format Response API
• Contoh Implementasi

Cara Mendapatkan Leaderboard Endpoint

Kamu bisa mendapatkan endpoint leaderboard dengan streamKey kamu melalui halaman Stream Overlay, pada tab Integration Page. Dengan cara:

1. Pergi ke halaman Stream Overlay dengan akun Bagibagi.co kamu.
2. klik tab "Integration Page"
3. Scroll ke bagian "Leaderboard Integration" dan expand panelnya
4. Klik pada input field Leaderboard Endpoint URL untuk copy endpoint

Format endpoint yang akan kamu dapatkan adalah:

Note: Endpoint ini unik untuk setiap streamer dan tidak perlu merchant code atau token tambahan karena sudah menggunakan streamKey.

Setup Overlay Leaderboard

Sebelum menghit API Bagibagi.co untuk mendapatkan data leaderboard, pastikan kamu telah mengatur leaderboard overlay dengan benar dengan mengikuti langkah berikut:

1. Pergi ke halaman Stream Overlay menggunakan akun yang terintegrasi
2. Pindah ke halaman "Leaderboard"
3. Pastikan semua setting sudah lengkap dan sesuai dengan kebutuhan kamu
4. Test overlay leaderboard untuk memastikan data tampil dengan benar

Format Response API

Ketika kamu memanggil leaderboard endpoint, kamu akan mendapatkan response dalam format JSON. Berikut adalah contoh response:

Response Success:

{
  "data": [
    {
      "userName": "BagiBagi",
      "amount": 300000,
      "isVerified": true,
      "isAnonymous": true
    },
    {
      "userName": "bagibagi",
      "amount": 148351,
      "isVerified": true,
      "isAnonymous": true
    },
    {
      "userName": "Seseorang",
      "amount": 81845,
      "isVerified": false,
      "isAnonymous": true
    }
  ],
  "success": true,
  "message": "Success"
}

Response Error:

{
  "data": null,
  "success": false,
  "message": "Validation Failed"
}

Penjelasan Fields:

• userName: Nama user (akan tampil "Seseorang" untuk BagiBagi anonim)
• amount: Total jumlah BagiBagi dalam Rupiah
• isVerified: Status verifikasi user di platform BagiBagi.co
• isAnonymous: True jika user tidak login saat melakukan BagiBagi

Contoh Implementasi

Berikut adalah contoh implementasi untuk pengambilan data leaderboard dalam beberapa bahasa pemrograman:

        
TypeScript

        
interface LeaderboardEntry {
  userName: string;
  amount: number;
  isVerified: boolean;
  isAnonymous: boolean;
}

interface LeaderboardResponse {
  data: LeaderboardEntry[];
  success: boolean;
  message: string;
}

async function getLeaderboard(endpointUrl: string): Promise<LeaderboardEntry[]> {
  try {
    const response = await fetch(endpointUrl, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    });

    const result: LeaderboardResponse = await response.json();

    if (result.success && result.data) {
      console.log('Top Donors:', result.data);
      return result.data;
    } else {
      console.error('Failed to get leaderboard:', result.message);
      return [];
    }
  } catch (error) {
    console.error('Error fetching leaderboard:', error);
    return [];
  }
}

// Example usage
const leaderboardEndpoint = 'https://bagibagi.co/api/partnerintegration/top-donator/streamkey?streamkey=YOUR_STREAM_KEY';
getLeaderboard(leaderboardEndpoint)
  .then(donors => {
    // Process the leaderboard data
    donors.forEach((donor, index) => {
      console.log(`Rank ${index + 1}: ${donor.userName} - Rp ${donor.amount.toLocaleString()}`);
    });
  });