> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.tako.id/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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? 1. **Alert** (Tidak termasuk media seperti Voice Note ataupun GIF) 2. **Media Share** (Hanya bagian pesan, bagian media/video dan progress bar tidak dapat di custom) 3. **Leaderboard** 4. **Timer** (Re-render tiap detik **kalau** kode kamu pake `{{timeLeft}}` atau `{{timeLeftMs}}`. Pake `{{timerEndAt}}` aja terus jalanin countdown sendiri di ` ``` 💡 `{{timestamp}}` dan `{{showTimestamp}}` jalan di Alert maupun Media Share. Nilai `{{showTimestamp}}` ngikutin toggle overlay yang sedang tampil — kalo hadiahnya mediashare, dia baca toggle di pengaturan Media Share, bukan Alert. --- ### 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): nama, foto, badge (nama doang, dipisah koma — **gak ada URL ikon**), jumlah donasi, jumlah donasi diformat. | **Contoh Kode:** ```html

``` --- ### 3. Milestone | Nama Variabel | Contoh Info | Keterangan | | ---- | | `{{title}}` | `Keliling Nusantara` | Judul milestone dari pengaturan. | | `{{currentAmount}}` | `75000` | Total donasi terkumpul dari semua langkah (angka mentah). | | `{{formattedCurrentAmount}}` | `IDR 75.000` | Total donasi terkumpul, diformat. | | `{{targetAmount}}` | `100000` | Total target dari semua langkah (angka mentah). | | `{{formattedTargetAmount}}` | `IDR 100.000` | Total target, diformat. | | `{{overallPercentage}}` | `75` | Persentase progres keseluruhan (0-100, bisa lebih dari 100 kalo kelebihan). | | `{{stepProgress}}` | `25000` | Progres dalam langkah yang sedang aktif saja (angka mentah). | | `{{formattedStepProgress}}` | `IDR 25.000` | Progres langkah aktif, diformat. | | `{{stepTarget}}` | `50000` | Target langkah yang sedang aktif (angka mentah). | | `{{formattedStepTarget}}` | `IDR 50.000` | Target langkah aktif, diformat. | | `{{percentage}}` | `50` | Persentase progres langkah aktif (0-100). | | `{{stepIndex}}` | `2` | Nomor urut langkah aktif (mulai dari 1). | | `{{stepCount}}` | `4` | Total jumlah langkah. | | `{{stepTitle}}` | `Langkah 2: Bali` | Judul langkah yang sedang aktif (kosong kalo gak diset). | | `{{steps}}` / `{{milestoneSteps}}` | `[{"title":"Langkah 1","target":25000,"currentAmount":25000,"percentage":100,"isActive":false}, ...]` | Daftar semua langkah (JSON), tiap item punya `formattedTarget`/`formattedCurrentAmount`. | **Contoh Kode:** ```html

Langkah {{stepIndex}} / {{stepCount}}

``` --- ### 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): ID, nama, jumlah donasi, jumlah donasi 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

{{startAt}} {{startTime}} — {{endAt}} {{endTime}}

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

``` Dua kali `buildItems()` di-append itu buat scroll seamless (dua salinan isi bersebelahan, `translateX(-50%)` berhenti pas salinan kedua persis nyampe posisi salinan pertama). Overlay ini gak ada progress-tick per-250ms kayak Song Share, jadi CSS animation loop aman jalan terus tanpa restart. --- ### 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 (nama doang, dipisah koma) — **gak ada URL ikon** dari sistem. | | `{{isGifterVerified}}` | `true` atau `false` | Status verifikasi donatur (`true` jika terverifikasi). | **Contoh Kode:** ```html

🔊

🔈 {{soundName}}

``` --- ### 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). **Berubah tiap detik** — bikin overlay di-render ulang tiap detik. | | `{{timeLeftMs}}` | `330000` | Sisa waktu dalam milidetik (angka mentah). **Berubah tiap detik** juga. | | `{{timerEndAt}}` | `1757568540000` | Waktu timer habis dalam epoch milidetik (`0` = timer gak aktif / belum jalan). Nilainya **cuma berubah kalo waktu ditambah/dikurang/di-reset**, jadi kalo kode kamu pake ini aja (tanpa `{{timeLeft}}`/`{{timeLeftMs}}`), overlay render sekali dan countdown-nya kamu jalanin sendiri pake JS — animasi kamu gak kereset tiap detik. | | `{{timerAddedMs}}` | `60000` | Perubahan waktu terakhir dalam milidetik. Minus = waktu dikurangi. `0` kalo belum ada perubahan sejak overlay dibuka. | | `{{timerAddedSeconds}}` | `60` | Sama kayak di atas, dalam detik. | | `{{timerAdded}}` | `+01:00` | Sama, tapi udah diformat lengkap dengan tanda plus/minus. Kosong kalo belum ada perubahan. | | `{{isEnabled}}` | `true` atau `false` | Status timer (`true` jika aktif). | | `{{options}}` | `[{"durationAdded":300,"minimumGiftAmount":10000}, ...]` | Daftar aturan pertambahan waktu (JSON): `durationAdded` = waktu yang ditambah dalam **detik**, `minimumGiftAmount` = jumlah donasi minimum buat dapat tambahan itu. Contoh di samping: donasi Rp10.000 nambah 300 detik (5 menit). | 💡 Alur pertambahan waktu: viewer donasi → Tako hitung dari aturan di "Aturan Pertambahan Waktu" → `{{timerEndAt}}` mundur sesuai tambahannya → `{{timerAddedSeconds}}` & `{{timerAdded}}` keisi jumlah yang baru ditambah. Jadi kalo aturannya Rp10.000 = 1 menit dan ada yang donasi Rp10.000, `{{timerAdded}}` bakal jadi `+01:00` — pas buat dipakein animasi "waktu nambah!". **Contoh Kode:** ```html

{{title}} Active

--:--

``` Contoh di atas gak nyentuh `{{timeLeft}}` sama sekali, jadi overlay-nya render sekali doang — `setInterval` di dalam iframe yang ngurus countdown-nya. Animasi/transisi kamu jadi aman gak kereset tiap detik. Kalo kamu lebih suka simpel dan gak masalah overlay re-render tiap detik, tinggal ganti isi `.countdown` jadi `{{timeLeft}}` dan buang script countdown-nya. --- ### 8. VIP Queue | Nama Variabel | Contoh Info | Keterangan | | ---- | | `{{title}}` | `Antrian VIP` | Judul dari pengaturan. | | `{{totalEntries}}` | `7` | Total jumlah orang dalam antrian. | | `{{hiddenCount}}` | `2` | Jumlah entri yang gak ditampilin karena kelebihan limit (`displayedQueueLimit` di pengaturan). | | `{{showFields}}` | `"true"` atau `"false"` (string) | Status apakah custom field (misal alamat, catatan) ditampilkan. | | `{{visibleEntries}}` | `[{"index":1,"id":"1","name":"BudiGaming","picture":"https://example.com/profile.jpg","badges":"VIP,TopDonator","badgeItems":[{"url":"https://tako.id/images/badges/verified-creator.png","title":"Verified Creator"}],"isVerified":true,"amount":15000,"formattedAmount":"Rp15.000","fields":[{"label":"Alamat","value":"Jl. Merdeka 1"}]}, ...]` | Daftar antrian yang **sudah** dipotong sesuai limit tampilan (JSON) — dipake buat render. Tiap entri punya `badgeItems`: array badge asli (ikon + judul), ini yang dipake buat nampilin badge sebagai **gambar**, bukan cuma teks. | | `{{entries}}` / `{{queue}}` | sama struktur kayak `visibleEntries` | Daftar **semua** antrian (JSON), belum dipotong limit. | | `{{fields}}` | `[{"label":"Alamat","value":"Jl. Merdeka 1"}, ...]` | Semua custom field dari semua entri, digabung jadi satu array datar (JSON). | **Contoh Kode:** ```html

``` --- ### 9. Song Share | Nama Variabel | Contoh Info | Keterangan | | ---- | | `{{title}}` / `{{songTitle}}` | `Judul Lagu` | Judul lagu yang sedang diputar. | | `{{songArtist}}` | `Nama Artis` | Nama artis lagu yang sedang diputar. | | `{{songCoverArtUrl}}` | https://example.com/cover.jpg | Link cover art lagu yang sedang diputar. | | `{{requesterName}}` | `BudiGaming` | Nama pe-request lagu. | | `{{requesterPicture}}` | https://example.com/profile.jpg | Link foto profil pe-request. | | `{{requesterBadges}}` | `VIP,TopDonator` | Daftar *badge* pe-request (nama doang, dipisah koma) — **gak ada URL ikon** dari sistem buat baris "Now Playing" ini. Isi manual di `BADGE_ICON_URLS` dalam script kalo mau tampil sebagai gambar — kode di bawah udah diisiin 6 badge sistem resmi Tako, liat tabelnya di bagian Alert (§1). | | `{{isRequesterVerified}}` | `true` atau `false` | Status verifikasi pe-request. | | `{{duration}}` | `215` (dalam detik) | Durasi lagu (angka mentah). | | `{{formattedDuration}}` | `03:35` | Durasi lagu yang sudah diformat. | | `{{elapsed}}` | `42` (dalam detik) | Waktu lagu yang sudah berjalan (angka mentah). | | `{{formattedElapsed}}` | `00:42` | Waktu lagu yang sudah berjalan, diformat. | | `{{progressPercent}}` | `19` | Persentase progres lagu (0-100) — pakai buat bikin progress bar sendiri. | | `{{isPlaying}}` | `true` atau `false` | Status lagu sedang diputar. | | `{{isPaused}}` | `true` atau `false` | Status lagu sedang di-pause. | | `{{isInGap}}` | `true` atau `false` | Status sedang dalam jeda antar lagu. | | `{{gapRemaining}}` | `3` (dalam detik) | Sisa waktu jeda antar lagu. | | `{{gapText}}` | `Lagu Berikutnya Pada 00:03` | Teks status jeda antar lagu. | | `{{error}}` | `Lagu gagal diputar` | Pesan error jika ada, kosong jika tidak ada. | | `{{nowPlaying}}` | `{"id":"1","title":"Judul Lagu","artist":"Nama Artis","coverArtUrl":"...","duration":215,"formattedDuration":"03:35","sender":{"name":"BudiGaming"},...}` | Objek (JSON) lagu yang sedang diputar, `null` jika tidak ada. | | `{{queue}}` / `{{queues}}` | `[{"id":"2","title":"Lagu Antrian","artist":"Artis Lain","duration":180,"senderName":"Pendukung Lain","senderBadges":"VIP,TopDonator","senderBadgeItems":[{"url":"https://tako.id/images/badges/verified-creator.png","title":"Verified Creator"}],...}, ...]` | Daftar antrian lagu berikutnya (JSON). Tiap item punya `senderBadgeItems` — array badge asli (ikon + judul) buat requester lagu itu, ini yang beneran bisa dirender sebagai **gambar**. | **Contoh Kode:** ```html

Now Playing

♪

{{formattedElapsed}} / {{formattedDuration}}

Up Next

``` --- ## 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 1. **Masuk Dashboard Kreator** 2. **Cari Menu "Overlays" di Bagian Kiri** 3. **Pilih Overlay** (contoh: Alert) 4. **Di bagian "Tema", ubah ke "Custom HTML"**. 5. Copy-paste kode yang udah kamu bikin ke kolom/textarea yang muncul. 6. **Cek Preview** pada bagian atas. ${youtube}[Cara Bikin Custom Overlay di Tako!](8PEOMWGBN4w)