Cara Mengganti Warna Tombol Notifikasi Onesignal

- 4 February 2023 | 08:37

Premis.id – Beberapa website sudah banyak menggunakan notifikasi untuk memberikan informasi dan upate pada artikel atau website ke pembaca.

Fitur ini tentu sangat berguna bagi para pemilik website agar mereka bisa memberikan notifikasi tanpa ribet dan manual untuk dibagikan.

Harapan pemilik website terhadap pengunjung adalah mempertahankan pengunjung dan membuat pengunjung itu datang kembali mengunjungi situs website.

Baca Juga : Cara Menghilangkan Notifikasi 3 (Tri) Pop Up Secara Permanent

Cara membuat nofifikasi di wordpress dan Blogspot mempunyai banyak cara. Tedapat layanan push notification yang berkualitas, salah satunya yaitu OneSginal.

Apa Itu OneSignal?

OneSignal merupakan plugin atau layanan yang menyediakan fitur notifikasi untuk segala kebutuhan developer website maupun aplikasi.

Ada banyak layanan push notification di onesigal, salah satu notification ke browser yang di gunakan secara realtime.

Baca Juga : Cara Membuat Logo Untuk Quotes di Pixellab

Selain itu Onesignal juga banyak di gunakan oleh programmer mobile untuk membuat notifikasi, karena onesignal sendiri juga menyediakan SDK.

Cara Mendaftar di Onesignal

Untuk menggunakan layanan di onesignal harus mendaftar dan melakukan konfigurasi. Yang kita butuhkan dari oneginal berupa kode APP ID dan API KEY.

Silahkan melakukan pendaftaran pada layanan onesignal dan melakukan login.

Jika tidak ingin ribet dapat melakukan login menggunakan akun google mail. Onesignal sudah terintegrasi dengan google mail. Jadi lebih mudah untuk melaukan pendaftaran.

Untuk melakukan pendaftaran silahkan kunjungi : https://onesignal.com/.

Baca Juga : Begini Cara Buat Notif Dynamic Island Di HP Xiaomi

Cara Membuat Notifikasi OneSignal

Untuk membuat notifikasi OneSignal, berikut adalah tahapan-tahapannya:

  1. Daftar atau masuk ke akun OneSignal Anda.
  2. Buat aplikasi baru atau pilih aplikasi yang sudah ada untuk membuat notifikasi.
  3. Integrasikan OneSignal dengan website atau aplikasi mobile Anda menggunakan plugin atau SDK yang tersedia.
  4. Buat pesan notifikasi yang ingin Anda kirimkan, termasuk judul, teks, gambar, dan tautan.
  5. Tentukan target penerima notifikasi, seperti pengguna yang sudah terdaftar, lokasi geografis, perangkat, atau segmen lainnya.
  6. Kirim notifikasi dengan menekan tombol “Kirim”.

Catatan: Pastikan bahwa integrasi OneSignal sudah benar dan dapat menerima notifikasi push. Ini bisa mempengaruhi kemampuan OneSignal untuk mengirimkan notifikasi dengan benar.

Baca Juga : Kode CK-769 Free Fire, Apakah Benar Kode Redeem Diamond Gratis?

Cara Merubah Warna Default di OneSignal

Secara default widget ini memiliki warna biru pada tombolnya, kalian juga bisa mengubah warna nya agar sesuai dengan template kalian.

Admin sudah menyiapkan css nya dan sudah support darkmode juga, tinggal kalian sesuaikan class darkmodenya saja jika berbeda. css ini bisa kalian letakkan di atas kode ]]></b:skin>.

Buat pengguna wordpress kalian bisa menempatkan kode css ini ke css tambahan atau editor theme kalian.

/* css costom warna onesignal */
#onesignal-slidedown-allow-button{background-color:#f09800!important}
#onesignal-slidedown-container #onesignal-slidedown-dialog .primary.slidedown-button+.secondary.slidedown-button{color: #f09800!important;background-color:transparent!important}
/* css untuk darkmode, sesuaikan classnya jika berbeda atau bisa hapus bagian ini */
.dark-mode #onesignal-slidedown-container #onesignal-slidedown-dialog .slidedown-body-message {color:#fff!important}
.dark-mode #onesignal-slidedown-container #onesignal-slidedown-dialog {background-color:#2d2d30!important}

Ubah kode warna #f09800 sesuai dengan warna website kalian, jika fitur darkmode tidak sesuai kalian sesuaikan classnya jika berbeda atau bisa hapus bagian ini.

Sampai di tahap ini kalian seharunya sudah bisa melihat warna tombol pada notifikasi website kaliian sudah berubah.

Topik

Follow Kami:

Terkini

               [Beasiswa] Penuh S2 – S3 di Arab Saudi oleh KAUST Fellowship

1 November 2024 | 15:57
Internship Program PT Freeport Indonesia

               Internship Program PT Freeport Indonesia

17 October 2024 | 16:01
ASEAN Youth, Green Ideas, and Innovations

               ASEAN Youth, Green Ideas, and Innovations

16 October 2024 | 15:56