# 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
{% tabs %}
{% tab title="subscribe.js" %}
```javascript
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;
}
```
{% endtab %}
{% tab title="index.html" %}
```javascript
Subscribe button demo
checking push notifications state...
```
{% endtab %}
{% tab title="sw\.js" %}
```javascript
importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');
```
{% endtab %}
{% endtabs %}
3\. To test if the subscription was successful, you can send a transactional web push notification via API
* `subscriberId` - from demo
* `x-token` - generate in the application [access keys section](https://app.pushpushgo.com/user/access-manager/keys)
```bash
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
You can link web push `subscriberId` with your own identifier by setting the `customId` with [`client.setCustomId()`](#setcustomid-customid-string-or-number-promise-less-than-void-greater-than)
{% tabs %}
{% tab title="subscribe.js" %}
```bash
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);
}
```
{% endtab %}
{% tab title="index.html" %}
```bash
Set customId demo
SomeIdentifier
checking push notifications state...
```
{% endtab %}
{% tab title="sw\.js" %}
```javascript
importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');
```
{% endtab %}
{% endtabs %}
To be notified when `customId` is set, you can integrate with a [Webhook](https://docs.pushpushgo.company/integrations/webhooks) `subscriber:update`
### Add subscriber tags
To add tags to subscriber, use [`client.appendTags()`](#appendtags-tags-string-promise-less-than-string-greater-than)
{% tabs %}
{% tab title="subscribe.js" %}
```javascript
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'));
}
```
{% endtab %}
{% tab title="index.html" %}
```javascript
Add subscriber tags
```
{% endtab %}
{% tab title="sw\.js" %}
```javascript
importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');
```
{% endtab %}
{% endtabs %}
### Send automation data
When you have automation configured in the [app.pushpushgo,](https://app.pushpushgo.com/automation) you will need to feed it with data, by sending a beacon by [`client.send()`](#send-immediately-boolean-promise-less-than-boolean-greater-than) . 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.
{% tabs %}
{% tab title="subscribe.js" %}
```javascript
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'));
}
```
{% endtab %}
{% tab title="index.html" %}
```javascript
Set automation data
```
{% endtab %}
{% tab title="sw\.js" %}
```javascript
importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');
```
{% endtab %}
{% endtabs %}