PushPushGo
Search…
SDK
SDK is a set of tools that you can use to manage resources on PushPushGo application. For the full SDK API documentation check the API section.
Setup
Getting started
To start using SDK you need to have a PushPushGo account. If you don’t have it, you should register first.
- 1.
- 2.Create a project
Properties that you need to configure SDK are:
isHTTPS- whether your project is usinghttpsorhttpprotocol
Initialization
Once you have a project in the application you can setup the SDK client.
- 1.Add script tag to head section of your html file
index.html
1
<head>
2
<script src="https://cdn.pushpushgo.com/scripts/sdk.js"></script>
3
</head>
Copied!
2. Put
sw.js file under root path of your service, with the projectId value from the applicationsw.js
1
importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');
Copied!
If you already have the
sw.js file in your service, add the above content to itIf you put
sw.js file in other path than root, specify it on client initialization with additional param swPath: '$serviceWorkerPath'3. Initialize the client
1
const config = {
2
projectId: $projectId,
3
vapidPublicKey: $vapidPublicKey,
4
isHTTPS: $isHTTPS,
5
endpoint: 'https://api.pushpushgo.com',
6
swPath?: $serviceWorkerPath,
7
websitePushId?: $websitePushId,
8
};
9
​
10
const client = new ppg.sdk.Client(config);
Copied!
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.
Custom subscribe button
- 1.Initialize SDK client
- 2.Use it to add web push registry functionality to button elements
subscribe.js
index.html
sw.js
1
let client;
2
​
3
function getClient() {
4
if (!client) {
5
const config = {
6
projectId: $projectId,
7
isHTTPS: $isHTTPS,
8
vapidPublicKey: $vapidPublicKey,
9
endpoint: 'https://api.pushpushgo.com',
10
};
11
​
12
client = new ppg.sdk.Client(config);
13
}
14
return client;
15
}
16
​
17
function subscribeButtonClickedHandler(event) {
18
event.preventDefault();
19
client
20
.register()
21
.then(subscriberId => {
22
setState(`user subscribed with id: ${subscriberId}`, false)
23
});
24
}
25
​
26
function unsubscribeButtonClickedHandler(event) {
27
event.preventDefault();
28
client
29
.unsubscribe()
30
.then(() => {
31
setState('user unsubscribed', true)
32
});
33
}
34
​
35
function setState(status, canSubscribe) {
36
const li = document.createElement('li');
37
li.innerText = status;
38
39
document.querySelector('#state').appendChild(li);
40
document.querySelector('#unsubscribe').disabled = canSubscribe;
41
document.querySelector('#subscribe').disabled = !canSubscribe;
42
}
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7
<title>Subscribe button demo</title>
8
<script src="https://cdn.pushpushgo.com/scripts/sdk.js"></script>
9
<script type="application/javascript" src="subscribe.js"></script>
10
</head>
11
<body>
12
<ul id="state">
13
<li>checking push notifications state...</li>
14
</ul>
15
<button id="subscribe" disabled="disabled">click to subscribe</button>
16
<button id="unsubscribe" disabled="disabled">click to unsubscribe</button>
17
</body>
18
<script>
19
window.addEventListener('load', function() {
20
const unsubscribeButton = document.querySelector('#unsubscribe');
21
const subscribeButton = document.querySelector('#subscribe');
22
​
23
subscribeButton.addEventListener('click', subscribeButtonClickedHandler);
24
unsubscribeButton.addEventListener('click', unsubscribeButtonClickedHandler);
25
​
26
getClient()
27
.isPushSupport()
28
.then(() => client.isSubscribed())
29
.then(() => client.getId())
30
.then(subscriberId => {
31
setState('push notifications are supported');
32
if (!subscriberId) {
33
setState('activate subscribe button', true);
34
} else {
35
setState('user already subscribed with id: ' + subscriberId, false);
36
}
37
})
38
.catch((err) => {
39
setState('ops, sth went wrong, check console')
40
console.log(err)
41
setState('push notifications are not supported')
42
});
43
​
44
});
45
</script>
46
</html>
Copied!
1
importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');
Copied!
3. To test if the subscription was successful, you can send a transactional web push notification via API​
subscriberId- from demo
1
curl --request POST \
2
--url https://api.pushpushgo.com/project/$projectId/send/push \
3
--header 'accept: application/json' \
4
--header 'x-token: $x-token \
5
--header 'content-type: application/json' \
6
-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/"}}'
Copied!
​
Set Custom ID
You can link web push
subscriberId with your own identifier by setting the customId with client.setCustomId()​subscribe.js
index.html
sw.js
1
let client;
2
​
3
function getClient() {
4
if (!client) {
5
const config = {
6
projectId: $projectId,
7
isHTTPS: $isHTTPS,
8
vapidPublicKey: $vapidPublicKey,
9
endpoint: 'https://api.pushpushgo.com',
10
};
11
​
12
client = new ppg.sdk.Client(config);
13
}
14
return client;
15
}
16
​
17
function subscribe() {
18
getClient()
19
.isPushSupport()
20
.then(() => client.isSubscribed())
21
.then(isSubscribed => {
22
if (!isSubscribed) {
23
return client.register();
24
} else {
25
return client.getId();
26
}
27
})
28
.catch(() => console.log('push is not supported'));
29
}
30
​
31
function setState(status) {
32
const li = document.createElement('li');
33
li.innerText = status;
34
​
35
document.querySelector('#state').appendChild(li);
36
}
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7
<title>Set customId demo</title>
8
<script src="https://cdn.pushpushgo.com/scripts/sdk.js"></script>
9
<script type="application/javascript" src="subscribe.js"></script>
10
</head>
11
<body>
12
<div id="crmId">SomeIdentifier</div>
13
14
<ul id="state">
15
<li>checking push notifications state...</li>
16
</ul>
17
​
18
</body>
19
<script>
20
window.addEventListener('load', function() {
21
const crmId = document.querySelector('#crmId').innerText;
22
23
subscribe()
24
.then(() => client
25
.setCustomId(crmId)
26
.then(() => setState('subscriber customId set to' + crmId))
27
28
.catch((err) => {
29
setState('ops, sth went wrong, check console')
30
console.error(err)
31
});
32
});
33
</script>
34
</html>
Copied!
1
importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');
Copied!
Add subscriber tags
subscribe.js
index.html
sw.js
1
let client;
2
​
3
function getClient() {
4
if (!client) {
5
const config = {
6
projectId: $projectId,
7
isHTTPS: $isHTTPS,
8
vapidPublicKey: $vapidPublicKey,
9
endpoint: 'https://api.pushpushgo.com',
10
};
11
​
12
client = new ppg.sdk.Client(config);
13
}
14
return client;
15
}
16
​
17
function subscribe() {
18
getClient()
19
.isPushSupport()
20
.then(() => client.isSubscribed())
21
.then(isSubscribed => {
22
if (!isSubscribed) {
23
return client.register();
24
} else {
25
return client.getId();
26
}
27
})
28
.catch(() => console.log('push is not supported'));
29
}
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7
<title>Add subscriber tags</title>
8
<script src="https://cdn.pushpushgo.com/scripts/sdk.js"></script>
9
<script type="application/javascript" src="subscribe.js"></script>
10
</head>
11
<body>
12
</body>
13
<script>
14
window.addEventListener('load', function() {
15
16
subscribe()
17
.then(() => Promise.all([
18
client.appendTags(['Demo tag', 'Other demo tag']),
19
client.appendTags(['label:tag']),
20
]))
21
.then(() => client.send());
22
23
});
24
</script>
25
</html>
Copied!
1
importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');
Copied!
​
Send automation data
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.subscribe.js
index.html
sw.js
1
let client;
2
​
3
function getClient() {
4
if (!client) {
5
const config = {
6
projectId: $projectId,
7
isHTTPS: $isHTTPS,
8
vapidPublicKey: $vapidPublicKey,
9
endpoint: 'https://api.pushpushgo.com',
10
};
11
​
12
client = new ppg.sdk.Client(config);
13
}
14
return client;
15
}
16
​
17
function subscribe() {
18
getClient()
19
.isPushSupport()
20
.then(() => client.isSubscribed())
21
.then(isSubscribed => {
22
if (!isSubscribed) {
23
return client.register();
24
} else {
25
return client.getId();
26
}
27
})
28
.catch(() => console.log('push is not supported'));
29
}
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7
<title>Set automation data</title>
8
<script src="https://cdn.pushpushgo.com/scripts/sdk.js"></script>
9
<script type="application/javascript" src="subscribe.js"></script>
10
</head>
11
<body>
12
</body>
13
<script>
14
window.addEventListener('load', function() {
15
16
subscribe()
17
.then(() => Promise.all([
18
client.setSelector('basket', 19),
19
client.appendTags(['Some condition tag', 'Other demo tag']),
20
client.addTagsToRemove(['label:tag']),
21
client.setCustomId('SomeIdentifier')
22
]))
23
.then(() => client.send());
24
25
});
26
</script>
27
</html>
Copied!
1
importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');
Copied!
Last modified 1mo ago