Push notifications can help you dramatically grow your business by driving traffic and boosting conversion. This is easily done with PushBots in a few-minutes set-up!  

Please make sure your website supports https before following this guide:

 1. Setting up PushBots Application:

A. After creating PushBots application, click on settings:

Click on Push tab, then scroll to Web Push section:

B.  in Web Push section, Update
     1. (Optional but recommended) Safari certificate if you have one (How to generate safari certificate?) [Only for safari]
     2. Website URL, it has to be HTTPS and hit enter.
. Upload website default notification icon.
     4. (Optional but recommended) Enter GCM API key for Opera and Chrome browsers, here are detailed instructions on how to generate GCM API key.  [optional]

2.  Setting up your website:

A. Download and upload these files to your root directory:

B. Update site name and short name pushbots-push-manifest.json file in your root directoy:
You should update gcm_sender_id if you've created your own ID in step 1.

  "name": "SITE_NAME",
  "short_name": "SHORT_NAME",
  "start_url": "/",
  "display": "standalone",
  "gcm_sender_id": "519659307484"

These files should be accessible through these links:

C. Add the code below in your <head>:
     1.  Update APPLICATION_ID with your PushBots application Id
     2. Update  https://yoursite.com with your domain.
     3. Update safari_push_id if you've generated your own certificate. [Safari only].

//some default pre init
var PB = PB || {};PB.q = PB.q || [];PB.events = PB.events || [];

//********** Update these fields ********
//PushBots ApplicationId (required)
//Your domain name, must be HTTPS or localhost  (required)
PB.domain = "https://yoursite.com";
//Update and uncomment it if you are using custom safari certificate for your app
//PB.safari_push_id = "web.com.pushbots.main";

PB.logging_enabled = false;
PB.auto_subscribe = true;
// Show background overlay on webpage while asking for notification permission
PB.overlay = true;

//Custom worker and manifest URL
//PB.worker_url = PB.domain + "/pushbots-worker.js";
//PB.manifest_url = PB.domain + "/pushbots-push-manifest.json";

//Welcome notification message
PB.welcome = {title:"Welcome 🙌🎉",message:"Thanks for subscribing!", url :PB.domain};

function sendNotification(){
      PB.q.push(["sendNotification", {title:"Hey 🐬",message:"Why not?", url :"https://google.com"}]);


<script src="//cdn.pushbots.com/js/sdk.min.js" type="text/javascript" onload="PB.init()" async></script>

3. Update device tag or alias:

//Update tags
PB.q.push(["tag", ['test', "test3"]]);
PB.q.push(["untag", ['test', "test3"]]);

//Update alias
PB.q.push(["alias", "username"]);

//Toggle notification subscription
PB.q.push(["subscribe", true]);

PB.q.push(["email", "a@as.cc"]);

4. Registration listener:

//Pushbots events
PB.events.push(["onRegistered", function(data){
console.log("onRegistered" , data);

PB.events.push(["onRegisteredOnPushBots", function(data){
console.log("onRegisteredOnPushBots", data);

5. Notification listener:

PB.events.push(["onReceived", function(data){
console.log("onReceived" , data);

5. Tracking events:

Did this answer your question?