Panduan pemasangan

Pasang alert Anda dalam hitungan menit

Panduan lengkap FrameWork Alerts untuk OBS dan Streamlabs — dalam video dan langkah demi langkah tertulis.

Streamlabs + OBS

Semua alert FrameWork dipasang dengan cara yang sama: Browser Source di OBS, variasi Text Over Image di Streamlabs, dan Custom Fields yang ada di unduhan Anda. Tonton videonya sekali, atau ikuti langkah tertulis di bawah.

Panduan video lengkap, dalam bahasa Inggris · Streamlabs + OBS

Bagian 1

Siapkan Browser Source di OBS

  1. Buka platform alert Anda (Streamlabs) dan masuk ke bagian Alerts.

  2. Pilih jenis alert yang ingin Anda atur (Followers, Subscribers, Donations, dll.) dan hapus centang jenis alert yang tidak Anda gunakan untuk alert layar penuh.

  3. Salin Widget URL yang diberikan platform.

  4. Buka OBS → tambahkan source baru → pilih Browser Source → beri nama yang jelas (mis. Alerts - Fullscreen).

  5. Tempel URL yang sudah disalin ke kolom URL.

  6. Atur Width dan Height sesuai resolusi kanvas Anda:

    • Anda dapat menemukannya di OBS pada Settings → Video → Base (Canvas) Resolution

  7. Aktifkan “Shutdown source when not visible”.

  8. Klik OK dan pastikan Browser Source ini berada paling atas di daftar source Anda, di atas semua source lain.

Bagian 2

Atur variasi alert

  1. Di platform alert Anda, tambahkan variasi baru untuk jenis alert yang dipilih dan beri nama yang jelas.

  2. Atur Layout ke “Text Over Image” (wajib agar alert tampil dengan benar).

  3. Di bagian Image, seret dan lepas file alert Anda, lalu klik Select.

  4. Atur Alert Duration:

    • Putar alert dan catat durasi penuhnya.
    • Kurangi durasi itu 1 detik dan masukkan ke kolom Alert Duration.
    • Contoh: jika alert berdurasi 35 detik → masukkan 34 detik.

  5. Sound → biarkan apa adanya (abaikan).

  6. Alert Animation → atur ke Fade In / Fade Out (disarankan).

  7. Text Animation dan Font → sesuaikan sesuka Anda.

Bagian 3

Tambahkan HTML / CSS / JS kustom

  1. Aktifkan tombol Custom HTML/CSS.

  2. Kembali ke folder alert Anda dan buka file bernama “Custom Fields — For Full Screen Alerts”.

  3. Salin dan tempel setiap file ke bagian yang sesuai di platform:

    • HTML → ke tab HTML
    • CSS → ke tab CSS
    • JS → ke tab JS

  4. Klik “Custom Fields” → “Edit Custom Fields” → tempel file Custom Fields.

  5. Klik “Update Custom Fields”, lalu klik Save (kanan bawah).

Bagian 4

Penyesuaian akhir dengan Custom Fields

Setelah disimpan, buka Custom Fields untuk mengakses opsi berikut:

Text DelayPutar alert dan jeda saat layar menjadi hitam. Catat waktu itu — semua alert memiliki ~4 detik layar hitam di akhir. Masukkan waktu persisnya di sini.
Text Horizontal PositionMengatur posisi teks ke kiri dan kanan. Atur ke 50 untuk menempatkannya di tengah.
Text Vertical PositionMengatur posisi teks ke atas dan bawah. Atur ke 50 untuk menempatkannya di tengah.
Alert VolumeSudah dioptimalkan secara bawaan. Kecilkan jika perlu.

Setelah semuanya diatur, klik Test Alert untuk memastikan alert berfungsi dengan benar.

Bagian 5

Perbaiki alert kecil di bagian yang sama

Jika Anda memiliki alert layar penuh dan alert kecil dalam kategori yang sama (mis. alert Follower layar penuh + alert Follower kecil), alert kecil akan tampil dengan ukuran yang salah karena keduanya memakai tautan widget yang sama. Ikuti langkah berikut untuk memperbaikinya.

  1. Buka variasi alert kecil.

  2. Aktifkan Custom HTML/CSS.

  3. Kembali ke folder alert Anda dan buka “Custom Fields — For Non-Full-Screen Alerts”.

  4. Salin dan tempel setiap file ke tab yang benar:

    • HTML → tab HTML
    • CSS → tab CSS
    • JS → tab JS

  5. Klik “Edit Custom Fields” → tempel file Custom Fields → klik “Update Custom Fields” → klik Save.

  6. Buka Custom Fields untuk variasi ini dan atur:

    • Horizontal Position: atur ke 50
    • Vertical Position: atur ke 25
    • Image Size: mengatur seberapa besar alert tampil
    • Alert Layout: atur ke Image Above dengan opsi layout bawaan platform (bukan yang ada di Custom Fields)

Alert Anda kini sudah terpasang dan teratur sepenuhnya. Jika mengalami masalah, kirim tiket dukungan dari situs web kami dan kami akan membalas secepatnya.

Tersendat di salah satu langkah?

Kirimkan tiket dukungan dengan platform Anda dan langkah yang sedang Anda kerjakan, dan studio akan memandu Anda.

Kirim tiket dukungan