Examples

With the SDK client configured, except from basic subscription to web push notifications, you can use it to create your own component for subscribing to web push notifications, segment your subscribers with tags, link them with your CRM database by setting custom id, or send data for automation purposes.

Initialize SDK client
Use it to add web push registry functionality to button elements

let client;

function getClient() {
  if (!client) {
    const config = {
      projectId: $projectId,
      isHTTPS: $isHTTPS,
      vapidPublicKey: $vapidPublicKey,
      endpoint: 'https://api.pushpushgo.com',
    };

    client = new ppg.sdk.Client(config);
  }
  return client;
}

function subscribeButtonClickedHandler(event) {
  event.preventDefault();
  client
    .register()
    .then(subscriberId => {
      setState(`user subscribed with id: ${subscriberId}`, false)
    });
}

function unsubscribeButtonClickedHandler(event) {
  event.preventDefault();
  client
    .unsubscribe()
    .then(() => {
      setState('user unsubscribed', true)
    });
}

function setState(status, canSubscribe) {
  const li = document.createElement('li');
  li.innerText = status;
  
  document.querySelector('#state').appendChild(li);
  document.querySelector('#unsubscribe').disabled = canSubscribe;
  document.querySelector('#subscribe').disabled = !canSubscribe;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Subscribe button demo</title>
    <script src="https://cdn.pushpushgo.com/scripts/sdk.js"></script>
    <script type="application/javascript" src="subscribe.js"></script>
</head>
<body>
  <ul id="state">
      <li>checking push notifications state...</li>
  </ul>
  <button id="subscribe" disabled="disabled">click to subscribe</button>
  <button id="unsubscribe" disabled="disabled">click to unsubscribe</button>
</body>
<script>
  window.addEventListener('load', function() {
    const unsubscribeButton = document.querySelector('#unsubscribe');
    const subscribeButton = document.querySelector('#subscribe');

    subscribeButton.addEventListener('click', subscribeButtonClickedHandler);
    unsubscribeButton.addEventListener('click', unsubscribeButtonClickedHandler);

    getClient()
      .isPushSupport()
      .then(() => client.isSubscribed())
      .then(() => client.getId())
      .then(subscriberId => {
        setState('push notifications are supported');
        if (!subscriberId) {
          setState('activate subscribe button', true);
        } else {
          setState('user already subscribed with id: ' + subscriberId, false);
        }
      })
      .catch((err) => {
        setState('ops, sth went wrong, check console')
        console.log(err)
        setState('push notifications are not supported')
      });

  });
</script>
</html>

importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');

3. To test if the subscription was successful, you can send a transactional web push notification via API

subscriberId - from demo

curl --request POST \
  --url https://api.pushpushgo.com/project/$projectId/send/push \
  --header 'accept: application/json' \
  --header 'x-token: $x-token \
  --header 'content-type: application/json' \
  -d '{"to": $subscriberId, "message": {"title": "sdk example title", "body": "test sdk subscription example", "icon": "https://via.placeholder.com/150/150", "redirectLink": "https://www.google.com/"}}'

Set Custom ID

let client;

function getClient() {
  if (!client) {
    const config = {
      projectId: $projectId,
      isHTTPS: $isHTTPS,
      vapidPublicKey: $vapidPublicKey,
      endpoint: 'https://api.pushpushgo.com',
    };

    client = new ppg.sdk.Client(config);
  }
  return client;
}

function subscribe() {
  getClient()
    .isPushSupport()
    .then(() => client.isSubscribed())
    .then(isSubscribed => {
      if (!isSubscribed) {
        return client.register();
      } else {
        return client.getId();
      }
    })
    .catch(() => console.log('push is not supported'));
}

function setState(status) {
  const li = document.createElement('li');
  li.innerText = status;

  document.querySelector('#state').appendChild(li);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Set customId demo</title>
    <script src="https://cdn.pushpushgo.com/scripts/sdk.js"></script>
    <script type="application/javascript" src="subscribe.js"></script>
</head>
<body>
  <div id="crmId">SomeIdentifier</div>
  
  <ul id="state">
      <li>checking push notifications state...</li>
  </ul>

</body>
<script>
  window.addEventListener('load', function() {
    const crmId = document.querySelector('#crmId').innerText;
      
    subscribe()
      .then(() => client
        .setCustomId(crmId)
        .then(() => setState('subscriber customId set to' + crmId))
        
      .catch((err) => {
        setState('ops, sth went wrong, check console')
        console.error(err)
      });
  });
</script>
</html>

importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');

Add subscriber tags

let client;

function getClient() {
  if (!client) {
    const config = {
      projectId: $projectId,
      isHTTPS: $isHTTPS,
      vapidPublicKey: $vapidPublicKey,
      endpoint: 'https://api.pushpushgo.com',
    };

    client = new ppg.sdk.Client(config);
  }
  return client;
}

function subscribe() {
  getClient()
    .isPushSupport()
    .then(() => client.isSubscribed())
    .then(isSubscribed => {
      if (!isSubscribed) {
        return client.register();
      } else {
        return client.getId();
      }
    })
    .catch(() => console.log('push is not supported'));
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Add subscriber tags</title>
    <script src="https://cdn.pushpushgo.com/scripts/sdk.js"></script>
    <script type="application/javascript" src="subscribe.js"></script>
</head>
<body>
</body>
<script>
  window.addEventListener('load', function() {
    
    subscribe()
      .then(() => Promise.all([
        client.appendTags(['Demo tag', 'Other demo tag']),
        client.appendTags(['label:tag']),
      ]))
      .then(() => client.send());
  
  });
</script>
</html>

importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');

Send automation data

let client;

function getClient() {
  if (!client) {
    const config = {
      projectId: $projectId,
      isHTTPS: $isHTTPS,
      vapidPublicKey: $vapidPublicKey,
      endpoint: 'https://api.pushpushgo.com',
    };

    client = new ppg.sdk.Client(config);
  }
  return client;
}

function subscribe() {
  getClient()
    .isPushSupport()
    .then(() => client.isSubscribed())
    .then(isSubscribed => {
      if (!isSubscribed) {
        return client.register();
      } else {
        return client.getId();
      }
    })
    .catch(() => console.log('push is not supported'));
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Set automation data</title>
    <script src="https://cdn.pushpushgo.com/scripts/sdk.js"></script>
    <script type="application/javascript" src="subscribe.js"></script>
</head>
<body>
</body>
<script>
  window.addEventListener('load', function() {
  
    subscribe()
      .then(() => Promise.all([
        client.setSelector('basket', 19),
        client.appendTags(['Some condition tag', 'Other demo tag']),
        client.addTagsToRemove(['label:tag']),
        client.setCustomId('SomeIdentifier')
      ]))
    .then(() => client.send());
    
  });
</script>
</html>

importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');

Last updated 2 months ago

Was this helpful?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Subscribe button demo</title> <script src="https://cdn.pushpushgo.com/scripts/sdk.js"></script> <script type="application/javascript" src="subscribe.js"></script> </head> <body> <ul id="state"> <li>checking push notifications state...</li> </ul> <button id="subscribe" disabled="disabled">click to subscribe</button> <button id="unsubscribe" disabled="disabled">click to unsubscribe</button> </body> <script> window.addEventListener('load', function() { const unsubscribeButton = document.querySelector('#unsubscribe'); const subscribeButton = document.querySelector('#subscribe'); subscribeButton.addEventListener('click', subscribeButtonClickedHandler); unsubscribeButton.addEventListener('click', unsubscribeButtonClickedHandler); getClient() .isPushSupport() .then(() => client.isSubscribed()) .then(() => client.getId()) .then(subscriberId => { setState('push notifications are supported'); if (!subscriberId) { setState('activate subscribe button', true); } else { setState('user already subscribed with id: ' + subscriberId, false); } }) .catch((err) => { setState('ops, sth went wrong, check console') console.log(err) setState('push notifications are not supported') }); }); </script> </html>

curl --request POST \ --url https://api.pushpushgo.com/project/$projectId/send/push \ --header 'accept: application/json' \ --header 'x-token: $x-token \ --header 'content-type: application/json' \ -d '{"to": $subscriberId, "message": {"title": "sdk example title", "body": "test sdk subscription example", "icon": "https://via.placeholder.com/150/150", "redirectLink": "https://www.google.com/"}}'

Custom subscribe button

Set Custom ID

Add subscriber tags

Send automation data

Custom subscribe button

Set Custom ID

Add subscriber tags

Send automation data