Cara Membuat Web Push Notification di Blog

Pada kesempatan kali ini kami akan membahas tentang notifikasi blog yaitu bagaimana cara membuat web push notification di blog sehingga tampil di layar desktop ataupun smartphone. Web push notifications adalah sebuah pesan atau notifikasi pop up yang tampil pada layar web browser baik di desktop maupun smartphone ketika kita sedang membuka halaman website atau blog tertentu. Sehingga dapat dikatakan bahwa web push notification ini memiliki kegunaan untuk menginformasikan kepada pengunjung blog website apakah bersedia mendapatkan sebuah informasi terbaru dari website kita dilain waktu atau dikemudian hari.

Melihat kegunaan web push notification tersebut maka si pemilik blog website akan sangat diuntungkan dari sisi pageview, karena dari sekian pengunjung yang menerima notifikasi setidaknya beberapa diantaranya akan berkunjung kembali. Bagaimana cara pengunjung tersebut berkunjung kembali? saat pengunjung menyetujui push notification, maka setiap ada update di blog website, si pengunjung tersebut akan mendapatkan notifikasi nya. Semoga paham dengan penjelasan ini.

Agar dapat memasang web push notification diperlukan sebuah plugin, sebetulnya push notification awalnya dikembangkan untuk digunakan oleh website yang menggunakan platform WordPress. Namun saat ini dapat juga di gunakan di blogger blogspot, sehingga pemilik blogspot dapat membuat web push notification di blog ini.

Berikut adalah penjelasan step by step bagaimana cara membuat web push notification di blog blogger menggunakan plugin OneSignal dengan gratis.

1. Daftar akun ke di situs OneSignal

Perhatikan gambar di atas, kita dapat mendaftar menggunakan akun email atau akun sosial media seperti Github, Facebook, dan Google. Disini kami menggunakan akun google untuk mendaftar, jadi silahkan klik tombol Google tersebut.

2. Login ke akun google agar dapat terhubung dengan situs app OneSignal.

Setelah terhubung dengan akun google, kemudian akan diarahkan langsung ke halaman dashboard akun di OneSignal, langsung saja klik ADD APP, maka akan tampil isian nama app. Isi dengan nama app yang kita inginkan.

Setelah APP NAME diisi, silahkan klik ADD APP.

3. Selanjutnya pilih salah satu platform pust notification pada langkah berikutnya.

Pada gambar di atas, sebagai contoh kita memilih Web Push sebagai platform nya, kemudian klik NEXT.

4. Lakukan konfigurasi Web Push

Selanjutnya adalah melakukan konfigurasi web push yang terdiri dari Choose Integration, Site Setup, Permission Prompt Setup, dan Welcome Notification (Optional).

Sebagaimana pendahuluan artikel ini bahwa cara membuat web push notification di blog adalah dilakukan pada web blogger. Maka pada konfigurasi Choose Integration, silahkan klik WordPress Plugin or Website Builder, kemudian pada bagian "select your website builder / CMS" klik Blogger.

5. Lakukan Blogger Site Setup

Gulir ke bawah maka akan tampil beberapa kolom isian Blogger Site Setup, karena kita menggunakan CMS Blogger.

Silahkan tentukan pilihan dan isian pada label site name, site url, auto resubscribe, default icon url, dan choose a label pada setiap kolom yang tersedia.

6. Kemudian set Permission Prompt Setup

Pada setingan ini adalah kita melakukan konfigurasi bagaimana style push notification ini nanti tampil di setiap halaman blog ketika pengunjung website datang.

Ada beberapa setingan yang harus kita lakukan disini yaitu Prompt Type dan Slidedown Prompt, dan setiap pilihan ada tampilan preview nya. Setelah yakin dengan setingan nya, silahkan klik SAVE.

7. Kemudian seting pada Welcome Notification dan Advanced

Bagian ini opsional, artinya boleh di setup boleh juga diabaikan, untuk mempersingkat waktu kami mengabaikan setingan pada bagian ini. Namun jika ingin dicoba, boleh saja karena akan sama-sama berfungsi sebagai cara membuat web push notification di blog blogger.

8. Gulir ke bagian paling bawah, lalu klik SAVE.

9. Maka akan tampil Add Code to Site

Yaitu kode javascript web push notification yang harus disematkan ke dalam template blogger blogspot.

Pastikan tambahkan kode javascript tersebut di atas pada tag head html yaitu antara <head> dan atau di atas </head>

10. Terakhir klik FINISH.