Getting Started With Browser Notifications

You can now ask your website users for permission to show notifications even when they’re not on your site via Google Chrome and then set up web-push notifications to users who allow. Here are the instructions to get started.

Important: Your website needs to be SSL to set up and send Chrome notifications. You can use browser notifications if at least one page of your domain is SSL. But if your site is not SSL, there is a work-around to use them still (please reach out to us at support@connecto.io)

1. Go to http://app.connecto.io and create an account.

2. Install Connecto’s snippet on your site pages.

You’ll need to place the below JS on all pages of your site where (if a user lands) you want to ask notification permission. You’ll need to replace LicenseKey with your license key available on the settings page.

!function(){var t=window._connecto=window._connecto||[];window._connecto.VAPIDDetails = {};
window._connecto.VAPIDDetails.publickey = ‘XXXXXXX’;t.methods=[“track”,”identify”,”page”],t.factory=function(e){return function(){var o=Array.prototype.slice.call(arguments);return o.unshift(e),t.push(o),t}};for(var e=0;e<t.methods.length;e++){var o=t.methods[e];t[o]=t.factory(o)}t.load=function(t){window._connecto.writeKey=t;var e=document.createElement(“script”);e.type=”text/javascript”,e.async=!0;var o=”http:”===document.location.protocol?”http://cdn“:”https://api“;e.src=o+”.connecto.io/javascripts/chrome_connecto.prod.min.js“;var n=document.getElementsByTagName(“script”)[0];n.parentNode.insertBefore(e,n)},t.load(“licenseKey“)}();

3. Install Chrome Push Package on your site

A. Go to Settings in your account on app.connecto.io and enter your GCM Api Key.(For GCM Api key generation refer to this link)

B. Download Chrome Push Package.

C. Follow instructions in README file – the downloaded package contains a README file with instructions to install the package on your web server. In particular,

Copy other two files (connecto_manifest.json and connecto_service_worker.js) to the root directory of your web server. These should be accessible via https://example.com/connecto_manifest.json and https://example.com/connecto_service_worker.js respectively if your website is https://example.com.
Update the “gcm_sender_id” in connecto_manifest.json. “gcm_sender_id” is the Sender Id which you will find in firebase project created for GCM API here. (For more details refer to this link.)Refer to the below image for exact position of sender Id.
Once these files are uploaded and served via your server, you need to link connecto_manifest.json on all your web pages by adding following in the <head> section:
<link rel=”manifest” href=”/connecto_manifest.json”>

D. Ask user for permission via JS

Finally, you’ll need to call _connecto.initPushRegistration(param1,param2,param3,param4) from JS on the client side to ask notifications permission. This call can be placed in one of the JS functions that you use or can also be placed on load of connecto snippet like.

_connecto.push([‘onload’, function() { _connecto.initPushRegistration(param1,param2,param3,param4) }]);

Here is the value of the arguments passed in the method: _connecto.initPushRegistration

param1: boolean value: false

param2: noSupportCallback (optional): If the browser doesn’t support notifications, then this callback is triggered.

param3: allowCallback (optional): If the user has subscribed to notifications, then this callback is triggered.

param4: blockCallback (optional): If the user has blocked notifications, then this callback is triggered.

All the optional params need to be passed with null if the callbacks are not to be handled.

Once these steps are done you’ll start receiving subscriptions which will be logged in your dashboard. And you’ll be able to send Chrome notifications anytime to subscribed user base. Connecto also allows your to tag your users and send segmented Chrome notifications tagged users.

Please reach out to us at support@connecto.io for any help.