Cara Membuat Overlay Kustom

Mau stream kamu makin kece dengan overlay buatan sendiri? Custom overlay ini kayak kanvas kosong buat kamu berkreasi pake HTML. Bisa buat pesan spesial, animasi seru, atau branding yang bikin orang langsung inget sama kamu!

Apa Saja Jenis Overlay yang Dapat Dikustomisasi?

Alert (Tidak termasuk media seperti Voice Note ataupun GIF)
Media Share (Hanya bagian pesan, bagian media/video dan progress bar tidak dapat di custom)
Leaderboard
Timer (Akan re-rendered setiap kali waktu berubah)
Soundboard
Milestone
Polling
Running Text

Tips Penulisan Kode HTML

Gunakan struktur HTML standar: Selalu mulai dengan <html>, <head>, dan <body>.
Jangan pake position: absolute di CSS Body: Pastikan body memiliki height yang pasti karena sistem overlay Tako akan mendeteksi ukuran body, jika ukuran body tidak dapat di deteksi maka overlay akan tidak tampil karena sistem overlay Tako menganggap ukuran tinggi body sebesar 0px apabila body menggunakan posisi absolute.
Gunain ukuran fleksibel: Gunakan px, rem, atau em buat font atau elemen. Jangan gunakan vh atau vw.
Biasakan gunakan ukuran rem karena agar mudah di scaling melalui pengaturan ukuran font di dashboard pengaturan overlay.
Selalu tes di dashboard biar tampilan sesuai dengan harapan.

Variabel untuk Setiap Overlay

Tiap overlay punya variabel yang bisa kamu pake biar tampilan dinamis tanpa edit manual. Berikut daftar lengkapnya, termasuk overlay yang mendukung dan contoh penggunaan:

Pastikan tidak ada spasi antara kurung kurawal dengan nama variabel!

1. Alert & Mediashare

Nama Variabel	Contoh Info	Keterangan
`{{amount}}`	`15000`	Jumlah donasi (angka mentah).
`{{formattedAmount}}`	`IDR 15.000`	Jumlah donasi yang sudah diformat.
`{{message}}`	`Semangat streaming!`	Pesan dari donatur.
`{{gifterName}}`	`BudiGaming`	Nama donatur.
`{{gifterPicture}}`	`https://example.com/profile.jpg`	Link foto profil donatur.
`{{gifterBadges}}`	`VIP,TopDonator`	Daftar badge donatur, dipisah koma.
`{{isGifterVerified}}`	`true` atau `false`	Status verifikasi donatur (`true` jika terverifikasi).
`{{mediaDuration}}`	`10` (Dalam Detik)	Durasi media yang terdapat pada alert/mediashare, jika tidak ada media, maka akan menjadi durasi alertnya.

Contoh Kode:

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: white;
      background: none;
    }
    .box {
      padding: 16px;
      background: #333;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    h2 {
      margin: 0;
      color: #FFDD00;
    }
    p {
      margin: 5px 0;
    }
    .pesan {
      font-style: italic;
      color: #BBBBBB;
    }
    img {
      width: 50px;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="{{gifterPicture}}" alt="Profile">
    <h2>🎉 Makasih, {{gifterName}}!</h2>
    <p>Donasi: {{formattedAmount}}</p>
    <p class="pesan">"{{message}}"</p>
  </div>
</body>
</html>

2. Leaderboard

Nama Variabel	Contoh Info	Keterangan
`{{title}}`	`Top Donatur Bulan Ini`	Judul leaderboard dari pengaturan.
`{{rankings}}`	`[{"name":"BudiGaming","picture":"https://example.com/profile.jpg","badges":"VIP,TopDonator","amount":15000,"formattedAmount":"Rp15.000"}, ...]`	Daftar ranking (JSON) berisi nama, foto, badge, jumlah donasi, dan jumlah donasi yang diformat.

Contoh Kode:

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: white;
      background: none;
    }
    .box {
      padding: 16px;
      background: #333;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    h2 {
      margin: 0;
      color: #FFDD00;
    }
    p {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>{{title}}</h2>
    <div id="ranking-list"></div>
    <script>
      const rankings = JSON.parse('{{rankings}}');
      const list = rankings.map(r => `<p>${r.name}: ${r.formattedAmount}</p>`).join('');
      document.getElementById('ranking-list').innerHTML = list;
    </script>
  </div>
</body>
</html>

3. Milestone

Nama Variabel	Contoh Info	Keterangan
`{{title}}`	`Target 100K Donasi`	Judul milestone dari pengaturan.
`{{currentAmount}}`	`75000`	Jumlah donasi saat ini (angka mentah).
`{{formattedCurrentAmount}}`	`IDR 75.000`	Jumlah donasi saat ini yang diformat.
`{{targetAmount}}`	`100000`	Target donasi (angka mentah).
`{{formattedTargetAmount}}`	`IDR 100.000`	Target donasi yang diformat.
`{{startAt}}`	`2025-07-08`	Tanggal mulai milestone.
`{{startTime}}`	`09:30`	Waktu mulai milestone.

Contoh Kode:

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: white;
      background: none;
    }
    .box {
      padding: 16px;
      background: #333;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    h2 {
      margin: 0;
      color: #FFDD00;
    }
    p {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>{{title}}</h2>
    <p>Progres: {{formattedCurrentAmount}} / {{formattedTargetAmount}}</p>
    <p>Dimulai: {{startAt}} {{startTime}}</p>
  </div>
</body>
</html>

4. Polling

Nama Variabel	Contoh Info	Keterangan
`{{title}}`	`Pilih Game Selanjutnya!`	Judul polling dari pengaturan.
`{{pollingOptions}}`	`[{"id":1,"name":"Game A","totalAmount":5000,"formattedTotalAmount":"Rp5.000"}, ...]`	Daftar opsi polling (JSON) berisi ID, nama opsi, jumlah donasi, dan jumlah donasi yang diformat.
`{{startAt}}`	`2025-07-08`	Tanggal mulai polling.
`{{startTime}}`	`09:30`	Waktu mulai polling.
`{{endAt}}`	`2025-07-08`	Tanggal selesai polling.
`{{endTime}}`	`12:30`	Waktu selesai polling.

Contoh Kode:

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: white;
      background: none;
    }
    .box {
      padding: 16px;
      background: #333;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    h2 {
      margin: 0;
      color: #FFDD00;
    }
    p {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>{{title}}</h2>
    <div id="poll-options"></div>
    <p>Mulai: {{startAt}} {{startTime}} | Selesai: {{endAt}} {{endTime}}</p>
    <script>
      const options = JSON.parse('{{pollingOptions}}');
      const list = options.map(o => `<p>${o.name}: ${o.formattedTotalAmount}</p>`).join('');
      document.getElementById('poll-options').innerHTML = list;
    </script>
  </div>
</body>
</html>

5. Running Text

Nama Variabel	Contoh Info	Keterangan
`{{texts}}`	`[{"title":"Selamat datang!","backgroundColor":"#333","textColor":"#FFF"}, ...]`	Daftar teks tambahan (JSON) berisi judul, warna latar, dan warna teks.
`{{gifts}}`	`[{"gifterName":"BudiGaming","amount":15000,"formattedAmount":"Rp15.000"}, ...]`	Daftar donasi (JSON) berisi nama donatur, jumlah donasi, dan jumlah donasi yang diformat.

Contoh Kode:

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: white;
      background: none;
    }
    .box {
      padding: 16px;
      background: #333;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    #running-text span {
      margin-right: 20px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div id="running-text"></div>
    <script>
      const texts = JSON.parse('{{texts}}');
      const gifts = JSON.parse('{{gifts}}');
      const content = [
        ...texts.map(t => `<span style="background:${t.backgroundColor};color:${t.textColor}">${t.title}</span>`),
        ...gifts.map(g => `<span>${g.gifterName}: ${g.formattedAmount}</span>`)
      ].join(' | ');
      document.getElementById('running-text').innerHTML = content;
    </script>
  </div>
</body>
</html>

6. Soundboard

Nama Variabel	Contoh Info	Keterangan
`{{amount}}`	`15000`	Jumlah donasi (angka mentah).
`{{formattedAmount}}`	`Rp15.000`	Jumlah donasi yang diformat.
`{{soundName}}`	`Explosion`	Nama efek suara yang dipilih.
`{{gifterName}}`	`BudiGaming`	Nama donatur.
`{{gifterPicture}}`	`https://example.com/profile.jpg`	Link foto profil donatur.
`{{gifterBadges}}`	`VIP,TopDonator`	Daftar badge donatur, dipisah koma.
`{{isGifterVerified}}`	`true` atau `false`	Status verifikasi donatur (`true` jika terverifikasi).

Contoh Kode:

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: white;
      background: none;
    }
    .box {
      padding: 16px;
      background: #333;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    h2 {
      margin: 0;
      color: #FFDD00;
    }
    p {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>{{gifterName}} mainkan suara {{soundName}}!</h2>
    <p>Donasi: {{formattedAmount}}</p>
  </div>
</body>
</html>

7. Timer

Nama Variabel	Contoh Info	Keterangan
`{{title}}`	`Event Dimulai!`	Judul timer dari pengaturan.
`{{timeLeft}}`	`05:30`	Sisa waktu dalam format `MM:SS` (atau `00:00` jika habis).
`{{isEnabled}}`	`true` atau `false`	Status timer (`true` jika aktif).
`{{options}}`	`[{"durationAdded":300000,"minimumGiftAmount":10000}, ...]`	Daftar opsi timer (JSON) berisi durasi tambahan (milidetik) dan jumlah donasi minimum untuk menambah waktu.

Contoh Kode:

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: white;
      background: none;
    }
    .box {
      padding: 16px;
      background: #333;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    h2 {
      margin: 0;
      color: #FFDD00;
    }
    p {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>{{title}}</h2>
    <p>Sisa Waktu: {{timeLeft}}</p>
    <p>Status: {{isEnabled}}</p>
  </div>
</body>
</html>

Informasi Tambahan yang Mungkin Muncul

"⚠ Ini pesan uji coba": Muncul ketika overlay di tes atau preview.
"⛔ Dikirim oleh Admin": Muncul ketika hadiah dikirim oleh tim/admin Tako.

Cara Mengimplementasikan/Membuat Custom Overlay

Masuk Dashboard Kreator
Cari Menu "Overlays" di Bagian Kiri
Pilih Overlay (contoh: Alert)
Di bagian "Tema", ubah ke "Custom HTML".
Copy-paste kode yang udah kamu bikin ke kolom/textarea yang muncul.
Cek Preview pada bagian atas.

Diperbarui pada: 29/07/2025

Apakah artikel ini berguna?

Terima kasih!