Getting Started
Here you’ll find the complete process on how to start using web push notifications with Infobip. In this section, you will follow the steps on how to set up a connection to your web pages and the steps required thereafter.
Configure Web Push Notifications
Contact your Infobip point of contact to enable Web Push Notifications. You will not need to go through any 3rd party approval procedures.
Requirements and Prerequisites
- Infobip account with Web Push Notifications enabled on the Channels and Numbers page.
If you do not have an Infobip account, register for an account. To enable Web Push Notifications, contact your Account Manager.
Add New Website
Web pages are the locations on your website where you are going to generate your web push notifications and display them to page visitors.
- Log in to the Infobip web interface, navigate to Channels and Numbers > Web App Messaging > Websites > ADD NEW WEBSITE.
- Fill out the necessary details. This is the website which you will send the web notifications from.
- Provide the name of your web page. This is the name that will appear throughout the web interface for selection when creating your communications.
- Provide the domain where the web push notification is to be displayed. Make sure to include 'www' in the domain.
- Add a website icon. Make sure to keep the dimensions square, with a minimum size of 256px by 256px (aspect ratio 1:1). Use .png files only.
- For Chrome and Firefox, you'll need to provide your vapid keys to avoid any preventions in sending web push notifications.
- For Apple devices, or any devices using Safari, provide your web notifications push ID.
- You will be redirected to the Web Push Notifications main page where you can view the list of all websites. Click the three dots and then click Get Web SDK.
- Here are the integration instructions on how to use Web Push SDK. The last step is to insert the automatically generated script into your web page. We'll cover these steps in the JS Integration Guide.
After you've added the script to your page and closed the pop-up, it should appear on the list of web pages. You can come back later and configure your pages if needed.
Repeat the procedure to add more web pages if required. Or use the Duplicate option in the actions toggle if you need to replicate a web page. You can then go back and edit the duplicated WPN as required.
JS Integration Guide
- Include the script in the target domain pages.
Include the <script>
tag provided in the previous step (Configure Web Push Notifications, article above) to all of the pages of the target domain. This is sufficient for the minimal integration to start receiving two-step opt-in slide window and requesting permissions when user visits the page for the first time.
- Add the Service Worker to the root folder.
Download Service Worker and place it in the root folder of your website. It must be available from URL: https://
Using SDK
The following script downloads the Web Push SDK and binds its interfaces to browser window object. The code is loaded asynchronously, but it can be interacted with at any point of the window lifecycle.
(function(I,n,f,o,b,i,p){
I[b]=I[b]||function(){(I[b].q=I[b].q||[]).push(arguments)};
I[b].t=1*new Date();i=n.createElement(f);i.async=1;i.src=o;
p=n.getElementsByTagName(f)[0];p.parentNode.insertBefore(i,p)})
(window,document,'script','https://webpush.infobip.com/bundle-latest.js','infobipWebPush');
You can interact with SDK by using the infobipWebPush
function in a browser window. Interactions happen by invoking the infobipWebPush
function with the command as a first argument, its parameter as a second argument, and callback as a third argument.
infobipWebPush("commandName", "commandParameter", "optionalCallback")
To initialize the Web Push SDK, you need to make the following call:
infobipWebPush('init', {
applicationCode: 'applicationCode',
vapidPublicKey: 'vapidPublicKey from Infobip portal',
safariWebsitePushId: 'safariWebsitePushId from apple Developer portal'
});
To subscribe to any SDK event, you need to call:
infobipWebPush('on', eventName, callback)
For example, to subscribe to permissionChanged
event, you would make the following call:
infobipWebPush('on', 'permissionChanged', function (perimssion) {
if (permission === 'default') {
console.log('default');
} else if (permission === 'granted') {
console.log('granted');
} else if (permission === 'denied') {
console.log('denied');
}
});
Supported Events
'init'
'permissionChanged'
'optInChanged'
'browserRegistered'
'notificationReceived'
'notificationTapped'
'notificationClosed'
SDK Two-Step Opt-In Configuration
To configure the two-step opt-in window for Web Push Notifications, you need to configure optIn
object for the init
command.
infobipWebPush('init', {
applicationCode: '',
vapidPublicKey: '',
safariWebsitePushId: '
You can customize how the pop-up window looks like by styling it based on the className
option. The class with this className
is applied to the top level of the element so it can be customized in any way possible.
Save Custom Attributes for Web Push Destination with SDK for Future Segmentation
To set custom attribute with SDK, the following code needs to be executed.
infobipWebPush('on', 'init', function(sdk) {
sdk.saveCustomAttributes({
customStringAttribute: 'string',
customNumberAttribute: 42,
customBooleanFlag: true,
});
});
After executing the code, custom attributes will be assigned to the destination and will be visible in the Infobip web interface > People module under Contact Information.
NOTE
If a user doesn't have browser permissions for sending web push messages, the attributes will not be saved, as there is no destination in the People module to save them to.
Next Steps
Once you have completed the above steps, you can start sending web push notifications straight away.