Cara Membuat Notifikasi di Blog Menggunakan One Signal

1. Pertama anda harus melakukan pendaftaran di situs OneSignal.
Untuk pendaftaran dapat menggunakan email, facebook, Github.
Pada kasus ini saya memakai gmail.

NOTE :
Saat pertama kali daftar, bukalah email yang telah didaftarkan untuk dikonfirmasi. Kemudian akan memperoleh pemberitahuan "Your email address has been successfully confirmed".

2. Ketika sudah dalam keadaan login. Skip jika ada popup. Pada halaman admin lakukan klik pada "Add new app"


Maka akan muncul tampilan "Add a new app" seperti ini. Isikan sesuai nama aplikasi yang anda inginkan, lalu klik Create.


3. Kemudian pilih "Website Push" dan pilih "Next".


lalu pilih "Google Chrome & Mozilla Firefox" dan pilih "Next".


4. Berikutnya, "Site URL" isikan menggunakan alamat url website anda. Untuk "Default Notification icon URL" dapat di isi dengan "http://www.slimby.net/p/notifikasi.html", lalu centang pada "My site not fully HTTPS" lalu geser scroll ke bawah.


5. Pada bagian Choose Subdomain copy saja Choose Subdomain ya jangan dirubah. Misalkan "https://slimby.onesignal.com" simpan pada notepad, lalu pilih save.


 6. Pada bagian select SDK pilih "Website Push", pilih "Next".


 7. Berikutnya akan muncul tampilan seperti dibawah. Lalu simpan kode "Your App ID" pada notepad. Karena nanti ini akan kita gunakan pada langkah selanjutnya, jangan close dulu tab ini.


8. Ini langkah selanjutnya, Masuk dahulu ke dashboard blog anda, pilih Template -> Edit HTML, lalu copy semua kode dibawah dan paste setelah tag <head> atau sebelum tag </head>.
Gantilah appid dengan appid anda tadi dan subdomainName dengan choose domain anda. Klik save template.



 <!-- SDK Push Notification by slimby.net -->
  <script async='async' src='https://cdn.onesignal.com/sdks/OneSignalSDK.js'/>
    <a href='https://slimby.net'/>
    <script>
      var OneSignal = window.OneSignal || [];
      OneSignal.push([&quot;init&quot;, {
        appId: &quot;69e7d44f-f429-4c0f-b075-40734ef1b6b6&quot;,
        autoRegister: false, /* Set to true to automatically prompt visitors */
        subdomainName: &#39;https://slimby.onesignal.com&#39;,   
        notifyButton: {
            enable: true /* Set to false to hide */
        }
    }]);
  </script>
<!-- SDK Push Notification by slimby.net -->





10. Pada tahap ini, silahkan coba refresh blog anda. Jika telah mengikuti langkah diatas dengan benar, maka ikon notifikasi "lonceng" akan muncul di bagian sudut kanan bawah.


Comments

  1. sangat membantu, dengan memasang notifikasi seperti dalam metode ini kita bisa lebih fast response kali ya? tapi saya belum nyoba soalnya saya pake wp mas..

    ReplyDelete

Post a Comment