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.
Custom subscribe button
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;
}
When you have automation configured in the app.pushpushgo, you will need to feed it with data, by sending a beacon by client.send() . Assume you have a selector with a name basket defined in the application, and you need to set it's value for the automation. In addition lets operate on tags that might be used in automation conditions and set the 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'));
}