Web SDK Setup with Web Push

Requirements

  • D-engage Application Definition
  • Access to your Website Files

D·engage Web SDK provides an interface that handles device subscriptions and web push notifications. Optionally, it also provides event tracking functionality for your website.

1. Creating the D·engage Application

In order to use the Web SDK you have to create a Push Application definition in the D·engage platform and add the necessary files and code to your website.

1.1 From the D·engage admin panel go to Settings > Applications and select “Add a New Website”

1.2 Enter your website and default logo URL and enable Push Notifications

1.3 Select the appearance of the Web Push permission message from the “Prompt Type” options

Note: If you enable the “Show Prompt Automatically” option, the permission prompt will be shown automatically.

2. Updating your Website Code

Once you have created the Push Application from the D·engage web UI, your website integration information will appear as shown below.

2.1 Download the service worker file and add it to your website’s root folder. 2.2 Insert the given code snippet to your website’s HTML code.

If you enabled the “Show Prompt Automatically” option, your web push integration will automatically work. Alternatively, you can manually trigger the notification using the SDK functions.

3. Usage of the Web SDK

Once you insert the Web SDK code to the main HTML file, the main functionality of the SDK will start automatically. This includes showing Web Push Notification permission prompts and tracking the notification subscriptions. So the initialization function is important.

<script type="text/javascript">
…….
dengage(‘initialize’);
</script>

3.1 Triggering Notification Prompt Manually

If you enabled the “Show Prompt Automatically” option in the D·engage admin panel, you don’t have to implement this step. Otherwise, to trigger the prompt manually, use the showNativePrompt or showCustomPrompt functions

showNativePrompt shows browser’s native prompt immediately.

showCustomPrompt shows the type of prompt you have selected in your application settings. For example a Slide or a Banner. Native prompt will be shown after the user accepts.

dengage('showCustomPrompt'); //for showing selected prompt in app settings
dengage('showNativePrompt'); //for showing native prompt

If you have a Button or Banner for getting notification permission you can use showNativePrompt in the click handler of that Button or Banner.

3.2 Getting Notification Permission

You can use getNotificationPermission function for getting the user’s current notification permission. This function returns a string value that can be ‘granted’, ‘denied’ or ‘default’.

dengage('getNotificationPermission', function(permission) {
    if (permission == 'granted') {
       //permission granted
    } else {
       //permission not granted
    }
});

3.3 Getting Current Web Push Token

Use the getToken function in order to get the current Web Push Token. This function returns null when the Web Push permission was not granted.

dengage(‘getToken’, function(token) {
    if (token == null) {
       //token is not available
    } else {
       //we have token
    }
});

3.4 Checking the Web Push Browser Support

Use isPushNotificationsSupported function to learn whether the browser supports Web Push Notifications. This function returns true if Web Push Notifications are supported.

dengage(‘isPushNotificationsSupported’, function(isSupported) {
    if (isSupported) {
       //push notification is supported
		    } else {
       //push notification is not supported
    }
});

3.5 Using the User Information

When the user logs in you get the user information, which means you have a contact_key for that user. You can set a contact_key in order to match the user with the browser. There are two functions for getting and setting a contact_key.

dengage(‘setContactKey’, userId);
dengage(‘setDeviceId’, yourDeviceId);
dengage(‘getContactKey’, function(userId) {
     //use userId (contact_key) here
});

3.6 Sending Device (Browser) Specific Events

Use the sendDeviceEvent function for sending browser events. Events are sent to a big data table defined in your D-engage account. The given table must have relation to the master_device table. If you set a contact_key for that browser, collected events will be associated for that specific user.

dengage(‘sendDeviceEvent’, tableName, dataObject [, callback]);

// for example if you have a table named "events"
// and events table has "key", "event_date", "event_name", "product_id" columns
// you just have to send the columns except "key" and "event_date", because those columns sent by the SDK

var eventData = {
  event_name: ‘page_view’,
  product_id: 12345,
};
dengage(‘sendDeviceEvent’, ‘events’, eventData);