How do I retrieve custom keys/extra values from Web Notifications?

Custom keys/extra values are one of the ways that additional data can be sent to a mobile device, allowing you to provide extra functionality in your app when a push notification is sent. This functionality also extends to web browsers (Chrome, Firefox and Opera. Excludes Safari) and allows you to retrieve custom keys from a push notification while a user is on your website.

Sending a Web push with Custom Keys

When composing a message in the dashboard, make sure to select the Custom Keys switch. You can then add as many custom keys as you'd like.

Screen_Shot_2019-05-10_at_2.40.45_PM.png

To send custom keys/extra values via the API, make sure to add the "extra" key in the notification section:

/api/push/
POST

{
"audience": "all",
"device_types": [
"web"
],
"notification": {
"web": {
"extra": {
"testkey": "testvalue"
}
},
"alert": "test"
}
}

 Retrieving Custom Keys/Extra Values

Custom keys can be retrieved via an event listener in the Web SDK, particularly the push event listener:

 UA.then(function(sdk) { 
sdk.addEventListener('push', function (ev) {
console.log(ev.push.data.extras)
});
});

The custom keys are located in the push object, under data. An array of keys will be populated here.

It is important to note that custom keys will only be available to be retrieved when the user is on your website (in scope of the web SDK) when a notification goes out, so do make sure that your use case accounts for that.

NOTE: Custom keys/Extra Values are also not retrievable in Safari.


You can read more about Web Notifications and the Web SDK in our Getting Started Guide.

Related Content: