OBS Overlay Suite adalah alat gratis berbasis browser yang membantu live streamer membuat overlay untuk OBS Studio: Chat popout, Alert Box, Ending Screen, dan Goal Bar. Anda dapat menghubungkan akun YouTube secara opsional agar chat, member baru, Super Chat, dan jumlah subscriber dari siaran Anda sendiri tampil otomatis di overlay. Atur warna & font sekali di tab "Chat Overlay", tiga widget lainnya otomatis ikutan senada.
Mengapa kami memerlukan Google Sign-In: Login dengan akun Google bersifat opsional dan hanya digunakan untuk membaca data siaran YouTube Anda sendiri secara read-only — chat publik, member/Super Chat, dan jumlah subscriber — agar dapat ditampilkan sebagai overlay di layar OBS Anda. Data ini diproses langsung di browser Anda dan tidak pernah disimpan atau dibagikan ke pihak lain.
Terinspirasi struktur kontrol dari Septapus Chat v2.0, dibangun ulang dari nol dengan tampilan sendiri.
Pilih template buat set warna role, font, outline & bentuk bubble sekaligus — semua masih bisa diutak-atik manual di bawah.
Preset (simpan / buka setting)▸
Export nyalin semua pengaturan (warna, font, animasi, dst) jadi teks. Simpan teks itu di catatan kamu — nanti tinggal tempel & Import buat balikin setting yang sama, kapan pun.
Cara lain buat simpan preset — jadi file .json di komputer, gampang dibagi ke orang lain atau dipindah antar perangkat.
CSS tambahan (manual, opsional)▸
Ditempel apa adanya di paling bawah CSS hasil generate. Berguna buat badge VIP per user (kalau kamu tahu channel-id-nya) atau tweak lain yang gak ada di panel.
Background foto sendiri▸
Sertakan di CSS hasil generate
Kalau ON, foto ikut ditempel jadi background asli di CSS (dipakai kalau live chat dibuka sebagai halaman sendiri, bukan lewat transparansi OBS). Kalau cuma buat tes tampilan di sini, biarkan OFF.
⚠ Foto ukuran besar bikin file CSS jadi besar juga — kompres dulu foto sebelum upload kalau mau disertakan di CSS.
Background bubble pesan (gambar sendiri)▸
Pakai gambar ini di setiap bubble pesan
Menggantikan warna glass bubble. Slider "Opacity bubble" di panel Background & kaca jadi ngatur gelap-terang overlay hitam di atas gambar biar teks tetap kebaca.
⚠ Gambar besar bikin CSS jadi berat — kompres dulu sebelum upload.
Jenis alert & teks▸
Alert yang di-preview
Judul — member baru
Template pesan — member baru
Pakai {name} buat nama pengirim.
Judul — SuperChat
Template pesan — SuperChat
Pakai {name}, {amount}, dan {message}.
Judul — milestone
Template pesan — milestone
Judul — custom
Template pesan — custom
Tampilan & durasi▸
Tampilkan avatar/ikon
Durasi tampil6s
Bunyi notifikasi
Nada pendek sintesis, gak perlu file audio.
Teks utama▸
Judul
Subjudul
Jadwal live berikutnya
Sosial media▸
Countdown▸
Tampilkan countdown
Hitung mundur dari saat overlay dibuka di OBS — cocok buat layar "BRB" atau jeda.
Durasi countdown05:00
Target & nilai▸
Label goal
Nilai sekarang
Target
Awalan (mis. Rp)
Akhiran (mis. subs)
Tampilkan persentase
Milestone (opsional)▸
Titik milestone
Angka dipisah koma — muncul jadi penanda kecil di bar.
Sambungan live (WebSocket)▸
Aktifkan trigger jarak jauh
Alert Box & Goal Bar bisa dipicu dari Control Panel (halaman terpisah) lewat server relay kecil di komputer kamu sendiri — gak perlu ketik di console lagi.
Port server
Download server.js & control-panel.html di bawah, jalanin server-nya sekali (node server.js), lalu buka Control Panel di tab/HP terpisah. Alert Box & Goal Bar yang kamu download dengan opsi ini nyala otomatis konek ke server itu.
Sambungan langsung ke YouTube▸
Belum login. Channel & video live kedeteksi otomatis setelah login — sesi tetap nyala selama halaman ini gak ditutup/di-reload.
Aktifkan sambungan setelah login
Chat asli, member/SuperChat, dan subscriber count langsung nyala begitu berhasil login.
Cara manual (API key), tanpa login▸
API Key YouTube Data v3
Dari Google Cloud Console → aktifkan "YouTube Data API v3" → buat API key.
Channel ID
Video ID live sekarang
Bagian setelah watch?v= di URL live streaming kamu.
⚠ Kalau kamu download Alert Box/Goal Bar pas tersambung, sesi/API key ikut tertanam di file .html itu biar widget-nya jalan sendiri di OBS.
Live preview
Generated CSS
tersalin ✓
ALERT BOXterunduh ✓
Preview di kiri nampilin persis apa yang bakal kelihatan di OBS setelah widget ini di-download dan ditambahin sebagai Browser Source (ukuran & posisi bisa diatur di OBS setelahnya).
Tinggal ditambahin sebagai Browser Source baru di OBS (bukan ditempel ke CSS custom). Alert Box punya window.showAlert(); Goal Bar punya window.setGoal(current, target) buat dipicu dari luar — atau nyalain "Sambungan langsung ke YouTube" biar otomatis dari member baru/SuperChat/subscriber asli.
⚠ Widget yang didownload jalan sendiri di OBS tanpa sesi login kamu — kalau mau fitur otomatisnya ikut, isi API key manual juga (di "Cara manual" pada panel Sambungan YouTube) sebelum download, bukan cuma login lewat tombol.