D.engage Web SDK Setup

D.engage Web SDK Setup

Requirements

  • D.engage Application Definition
  • Access to your website files

D.engage Web SDK provides an interface that handles web push notifications. Optionally, It also provides event tracking functionality for your website.

1. Create D.engage Application

In order to use web SDK you have to create a push application definition in D.engage platform and add necessary files and code to your website.

1.1 Go to D.engage admin panel and settings page. Then, go to Applications and click Add a new website.















1.2 Enter website and default logo URL then set push notifications enabled.

1.3 Select how to prompt web push permission. You can change how the prompt will look like.

If you select “Show Prompt Automatically”, the permission prompt will be shown automatically.

2. Update your website code

After you created push application in dEngage admin panel. Your website integration information will be shown like below.

You have to download the service worker file and put it in your website’s root folder. After that, you have to insert the given code snippet into your website’s HTML code. If you selected “Show Prompt Automatically”, web push integration will work automatically. But you can trigger notification prompt manually by SDK functions.

3. Usage of Web SDK

When you insert Web SDK code into your main HTML file, the main functionality of the SDK will start automatically. This includes showing notification permission prompt and tracking subscription. So the initialization function is important.
  1. <script type="text/javascript">dengage(‘initialize’);</script>;

3.1 Triggering Notification Prompt Manually

If you enabled the “Show Prompt Automatically” option on Admin Panel, you don’t have to implement this step. Otherwise -if you want to trigger it manually- you can use showNativePrompt or showCustomPrompt functions to show prompt manually on your site. showNativePrompt shows the browser’s native prompt immediately. showCustomPrompt shows the prompt you have selected in your application settings. For example slide or banner. But native prompt will be shown after the user accepted.

  1. 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 user’s current notification permission. This function returns a string value that can be ‘granted’, ‘denied’ or ‘default’.

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

3.3 Getting current token

For getting current push token, use getToken function. If push permission is not granted, this function returns null.

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

3.4 Check push support for browser

If you want to learn whether the browser supports Push notifications or not, use isPushNotificationsSupported function. This function return true if it is supported.

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

3.5 Using user information

If the user loggs in or you have user information, this means you have contact_key for that user. You can set contact_key in order to match user with the browser. There are two functions for getting and setting contact_key.

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

3.6 Send device (browser) specific events

You can use sendDeviceEvent function for sending events for the browser. Events are sent to a big data table defined in your D.engage account. That table must have relation to the master_device table. If you set contact_key for that browser. Collected events will be associated with that user.

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

  1. // 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);​



    • Related Articles

    • Web Push SDK Implementation

      With D·engage's Web Push SDK you can collect session and event data from your website. You can also use the Web SDK to engage with your users by sending web push notifications.  Please check the following page to implement D·engage's Mobile Push SDK: ...

    • How can I implement web SDK?

      Execute the following steps to implement web SDK: Create a web application on Admin Panel. Then, the system will provide a JavaScript code and service worker file. Add the JavaScript code to your website's source code (You must put it into <head> ...

    • How can I import my previously collected web push tokens?

      Import your previous web push tokens using file import. OR By creating an automation job But, you will not be able to use them to send push notification because for the service worker file to be updated the person should do these steps Remove all ...

    • Huawei SDK Setup

      Huawei SDK Setup Requirements Huawei Developer Account Java JDK installation package Android SDK package Android Studio 3.X HMS Core (APK) 4.X or later Huawei Device or Huawei Cloud Debugging Supports Android API level 4.4 or higher. Information ...

    • Woocommerce Plugin for D·engage Integration

      D·engage is now able to integrate with the most go to platform for Ecommerce, i.e Woocommerce. Integrating with D·Engage via WP plugin is a couple of steps process that provides ease and flexibility to your tech team. Let me guide you here the steps ...