Cara Membuat Web Push Notification pada Blog (via One Signal)

byKurazone Net -
KURAZONE ~ Pernahkah sahabat Kurazer menjumpai sebuah blog/web yang secara tiba - tiba memunculkan Notifikasi berlangganan disertai logo blog tersebut seperti gambar dibawah ini?

Itulah yang disebut dengan Web Push Notification (WPN). Fungsi utama dari Web Push Notification ini adalah untuk mengajak pengunjung supaya kelak bisa datang kembali mengunjungi Blog kita. Sehingga dengan adanya fitur ini, pengunjung dapat mengetahui kabar terbaru dari blog kita melalui notifikasi pada perangkatnya. Sederhananya fitur ini mirip dengan notifikasi berlangganan Channel Youtube.

Untuk membuat Web Push Notification tersebut kita bisa menggunakan layanan dari One Signal, berikut adalah Cara Membuat Web Push Notification pada Blog (via OneSignal).

1. Buka situs One Signal, dan langsung saja Login via Github, Google+ maupun FB atau Daftar menggunakan akun lain.
2. Setelah berhasil masuk. Klik Add a New App.
3. Masukkan nama aplikasi yang kalian inginkan, misalnya Kurazone, kemudian klik Create


4. Selanjutnya kalian akan dibawa pada option pemilihan jenis platforms, Pilih yang Web Push, kemudian Next
Darisini kalian akan diarahkan untuk mensetting Widget Notification nya .. 😊😊

1. Choose Integration

Pilih platform yang kalian gunakan, dalam contoh kali ini saya memilih Blogger (karena blog saya menggunakan Blogger)

2. Blogger Site Setup

Setting nama web, url web, ikon web dan label web.
Baca keterangan disampingnya agar mengerti maksud dari option yang satu ini. Untuk ikon web bisa menggunakan gambar berukuran 192x192 pixel ber-ekstensi JPG maupun PNG


3. Permission Prompt Setup

Merupakan pesan apa yang muncul ketika Web Push ini tampil di blog. Setting Prompt ini terdiri dari 2 macam.
  • a. Pesan yang muncul ketika blog dikunjungi
  • b. Pesan yang muncul ketika ada user yang bersedia berlangganan

a. Pesan yang muncul ketika blog dikunjungi

Pilih ADD A PROMPT

    PROMPT TYPE pilih yang Slide Prompt, lalu aktifkan SLIDEDOWN PROMPT

    Isi kolom yang telah disediakan, silahkan kalian rancang kata kata yang menarik untuk mendapatkan pelanggan. Kemudian Save


    Setelah SLIDE PROMPT selesai dibuat, maka akan muncul PROMPT baru untuk mensetting pesan yang muncul ketika User akan berlangganan.

    b. Pesan yang muncul ketika ada user yang bersedia berlangganan

    Klik tombol CLICK HERE TO CONFIGURE HTTP POP-UP

    Aktifkan HTTP POP-UP PROMPT nya

    Isi beberapa kolom yang telah disediakan, lihat juga bagaimana live preview nya agar dapat menentukan bagaimana hasilnya kelak. Kemudian Save


    Alhasil kalian akan memiliki 2 PROMPT seperti dibawah ini :

    4. Welcome Notification

    Merupakan Pesan selamat datang kepada user yang melakukan langganan. Pesan bisa berupa ucapan selamat datang atau ucapan terimakasih karena sudah berlangganan. Silahkan kalian rancang dengan kata kata yang menarik.

    5. Advanced

    1. Untuk bagian WebHooks bisa kalian abaikan, 
    2. Untuk bagian Click Behavior digunakan untuk mensetting "apa yang terjadi ketika pesan diklik", apakah pesan akan terbuka pada halaman baru atau terbuka pada halaman yang saat ini dibuka. 
    3. Untuk Persistence adalah untuk mensetting keberadaan pesan, jika aktif maka pesan akan hilang setelah diklik, jika tidak aktif maka pesan akan hilang sendiri setelah 20 detik.
    Kemudian SAVE untuk mendapatkan kode

    6. Add code to Site

    Copy kode yang telah disediakan pada akun kalian, letakkan kode tersebut dibawah kode <head> atau diatas kode </head>

    YANG TERJADI KETIKA ADA USER YANG BERLANGGANAN

    Tampilan Statistik pada Akun Kita (Lihat pada Menu Users)

    Tampilan Notifikasi pada User yang berlangganan




    FYI
    1. Kami merekomendasikan kepada teman - teman Blogger untuk menggunakan fitur keren ini, karena fitur ini lebih simple daripada fitur berlangganan email
    2. Dengan fitur ini, user tidak perlu repot - repot memasukkan email untuk berlangganan.
    3. Tampilan pesan yang muncul pada perangkat user, lebih menarik daripada isi pesan yang berada pada email langganan
    4. Ketika pesan diklik, akan langsung mengarahkan user ke halaman yang kita tentukan
    5. Kita bisa mengirim pesan ke user mengenai "apa yang baru" pada blog kita (artikel lama pun juga bisa kita rekomendasikan kepada user melalui notifikasi ini)
    6. User bisa berhenti berlangganan sewaktu - waktu
    7. Javascript yang digunakan pada One Signal tidak begitu memberatkan loading blog, karena kode tersebut bersifat Asinkron, sehingga pesan akan muncul setelah halaman blog telah selesai termuat
    8. dan masih banyak hal menarik lainnya yang belum kami explore lebih mendalam
    Gimana? Tertarik ingin menggunakan fitur WPN One Signal ini? Pakai aja, GRATIS kok..
    Itulah informasi mengenai "Cara Membuat Web Push Notification pada Blog (via OneSignal)", selamat mencoba dan semoga bermanfaat. Goodluck !!

    Baca juga artikel selanjutnya : Cara Mengirim Push Notification Kepada User One Signal


    Tags





    أحدث أقدم