Tips & Trik Overlay Kustom

Apa itu overlay kustom?

Overlay kustom memungkinkan kamu mendesain tampilan donasi sendiri dengan HTML dan CSS. Tipzy mengganti variabel dinamis (nama donatur, nominal, progress, dll.) saat overlay ditampilkan di OBS atau browser source.

Overlay yang mendukung Custom HTML

1. Alert — notifikasi donasi penuh (teks + progress durasi alert/TTS)
2. Media Share — hanya panel pesan donatur di bawah video/GIF; pemutar media dan progress durasi media tetap dari widget Tipzy
3. Soundboard — notifikasi donasi + nama efek suara + progress durasi soundboard

Overlay lain (Subathon, Voting, Wheel, Milestone, Leaderboard, Running Text, QR Code) hanya memakai tampilan Simple lewat pengaturan warna dan teks di dashboard.

Cara mengaktifkan

1. Buka menu Overlay di dashboard kreator.
2. Pilih tab overlay (Alert, Media Share, atau Soundboard).
3. Di bagian Tema overlay, pilih Custom HTML.
4. Tulis atau tempel HTML/CSS di textarea. Kotak bisa diperbesar manual (drag sudut kanan bawah).
5. Klik Simpan Tampilan agar tersimpan ke OBS.
6. Untuk uji di OBS, klik Memunculkan — template otomatis disimpan dulu.
7. Periksa preview di panel kanan sebelum dipasang di OBS.

Klik Muat template contoh untuk mengisi HTML/CSS dasar selaras tampilan Simple Tipzy.

Tips penulisan HTML/CSS

• Variabel Tipzy: {{namaVariabel}} — tanpa spasi di dalam kurung kurawal ganda.
• Tempel CSS di kolom CSS. Hindari <link rel="stylesheet"> eksternal; @import font di CSS masih didukung.
• Jangan pakai position: absolute pada body overlay OBS.
• Gunakan px atau rem untuk ukuran. Hindari vh/vw pada overlay widget.
• Lebar acuan maksimal: 1100px (Alert/Soundboard penuh; Media Share panel pesan memenuhi lebar kartu).
• Progress bar animasi: gunakan class tipzy-progress-fill (atau tipzy-alert-progress-fill) pada elemen isi bar, dan tipzy-progress-pct pada teks persen — Tipzy meng-update lebar/teks tanpa reload gambar.
• Sembunyikan progress: data-show-progress="{{showProgressBar}}" pada container, lalu CSS [data-show-progress="false"] .tipzy-progress { display: none; }
• Progress fill: tambahkan transition: none; agar animasi halus tanpa kedip.
• Tinggi progress bar diatur global di tab Alert (field Tinggi Progressbar). Nilai ini disinkron ke Media Share & Soundboard saat kamu simpan Alert.

Variabel donasi (Alert, Media Share, Soundboard)

Variabel	Contoh	Keterangan
{{gifterName}}	BudiGaming	Nama donatur
{{formattedAmount}}	Rp15.000	Nominal donasi format IDR
{{rawAmount}}	15000	Nominal angka mentah
{{amount}}	15000	Alias {{rawAmount}}
{{message}}	Semangat streaming!	Pesan donatur
{{templateText}}	baru saja mendukung sebesar	Teks tengah dari pengaturan Alert (tts_template)

Variabel gaya & progress (ketiga overlay)

Variabel	Contoh	Keterangan
{{backgroundColor}}	#2c5f52	Warna latar (background_color)
{{highlightColor}}	#e7eb0f	Warna highlight / text2
{{textColor}}	#ffffff	Warna teks utama / text1
{{textWeight}}	500	Font weight teks (text1_weight)
{{progressHeight}}	14	Tinggi progress bar (px) — global dari tab Alert
{{progressTrackColor}}	#ffffff	Warna track progress (mengikuti text1)
{{progressFillColor}}	#e7eb0f	Warna isi progress (mengikuti highlight)
{{progressPercent}}	25	Persentase progress 0–100, otomatis
{{showProgressBar}}	true	true/false — toggle progress di pengaturan Alert

Alert — variabel tambahan

Variabel	Contoh	Keterangan
{{mediaDuration}}	5	Durasi alert / TTS / audio notifikasi (detik)

Alert — struktur bawaan Simple

1. Baris 1: nama donatur + templateText + nominal IDR
2. Baris 2: pesan donatur
3. Progress bar durasi alert di bawah kotak

Contoh template Alert Custom

<div class="tipzy-alert" data-show-progress="{{showProgressBar}}" style="--tz-bg:{{backgroundColor}};--tz-highlight:{{highlightColor}};--tz-text:{{textColor}};--tz-text-weight:{{textWeight}};--tz-progress-track:{{progressTrackColor}};--tz-progress-fill:{{progressFillColor}};">
  <p class="tipzy-alert-line1">{{gifterName}} <span class="tipzy-alert-action">{{templateText}}</span> {{formattedAmount}}</p>
  <p class="tipzy-alert-message">{{message}}</p>
  <div class="tipzy-alert-progress">
    <div class="tipzy-alert-progress-labels">
      <span class="tipzy-alert-progress-label">Progress durasi alert</span>
      <span class="tipzy-alert-progress-pct">{{progressPercent}}%</span>
    </div>
    <div class="tipzy-alert-progress-track" style="height:{{progressHeight}}px;">
      <div class="tipzy-alert-progress-fill" style="width:{{progressPercent}}%;"></div>
    </div>
  </div>
</div>

Klik Muat template contoh di tab Alert untuk HTML/CSS lengkap.

Media Share — custom HTML

Custom HTML Media Share hanya mengganti panel pesan (nama, nominal, pesan, progress). Video YouTube/TikTok/GIF diputar oleh widget di atas panel. Tidak ada variabel tambahan di luar daftar donasi + gaya + progress di atas. Gunakan max-width: 100% dan border-radius: 0 0 16px 16px agar panel menyatu di bawah video.

Contoh cuplikan Media Share Custom

<div class="container" data-show-progress="{{showProgressBar}}" style="--amount:{{highlightColor}};--text:{{textColor}};--progress-track:{{progressTrackColor}};--progress-fill:{{progressFillColor}};">
  <p><span>{{gifterName}}</span> membagikan <span>{{formattedAmount}}</span></p>
  <p>{{message}}</p>
  <div class="tipzy-progress">
    <div class="tipzy-progress-labels">
      <span>Media Share</span>
      <span class="tipzy-progress-pct">{{progressPercent}}%</span>
    </div>
    <div class="tipzy-progress-track" style="height:{{progressHeight}}px;">
      <div class="tipzy-progress-fill" style="width:{{progressPercent}}%;"></div>
    </div>
  </div>
</div>

Soundboard — variabel tambahan

Variabel	Contoh	Keterangan
{{soundName}}	Explosion	Nama efek suara yang diputar

Contoh cuplikan Soundboard Custom

<div class="tipzy-overlay-box" data-show-progress="{{showProgressBar}}" style="--tz-bg:{{backgroundColor}};--tz-highlight:{{highlightColor}};--tz-text:{{textColor}};">
  <p>{{gifterName}} <span>{{ttsTemplate}}</span> {{formattedAmount}}</p>
  <p class="tipzy-sound-name">{{soundName}} ♪</p>
  <p>{{message}}</p>
  <div class="tipzy-progress">
    <span class="tipzy-progress-pct">{{progressPercent}}%</span>
    <div class="tipzy-progress-track" style="height:{{progressHeight}}px;">
      <div class="tipzy-progress-fill" style="width:{{progressPercent}}%;"></div>
    </div>
  </div>
</div>

Preview & OBS

Preview dashboard menampilkan data contoh. Di OBS, tambahkan Browser Source dengan URL widget overlay Tipzy (/widgets/alert, /widgets/mediashare, atau /widgets/soundboard + stream_key). Refresh browser source setelah menyimpan template custom.

Daftar variabel di dashboard (panel Variabel yang tersedia pada setiap tab overlay) selalu selaras dengan halaman ini.

Butuh bantuan? Hubungi tim support atau baca FAQ.