logoDocumentación
Buscar
Iniciar sesión

Integration Guide

Support Description for overseas users of each channel

Channel type Users in other regions Mainland China users Note
EngageLab Support Support Supported by SDK by default
W3C Support Support /

Quick test

Engagelab WebPush integration demonstration and examples

Pre-integration preparation

1、Prepare a domain name for an accessible https web service where testing and debugging will take place. web push does not support local debugging or working under non-https.
2、Visit Engagelab WebPush, set the website domain in Integration Settings -> web and fill in the prepared https web service domain.
截屏2022-11-29 11.06.12.png

Tips

This article is a standard integration guide document for the MTpush Web SDK.

Description

The Web SDK provides a push development framework for web applications based on the kernel notification and websocket of each browser, and provides a concise API interface to facilitate third-party applications to quickly integrate push functions. Browser kernel notification supports mainstream browsers such as Edge, Chrome, Safari, Firefox, Opera, and websocket supports most mainstream browsers.

Main scenes:

Notifications and customize messages.

integrates the contents of the compressed package

  • example
    • This is a web page that demonstrates the basic usage of the MTpush SDK. It can be used as a reference.

Obtaining Application Information

Create an application in the console. After the application is created, an AppKey is automatically generated to identify the application. For more information, see application Settings .

Integrate the SDK

Visit Engagelab WebPush and download the SDK.Config the sdk js file like below in the web page:

<script type="text/javascript" src="./webPushSdk.min.2.1.2.js"></script>
              
              <script type="text/javascript" src="./webPushSdk.min.2.1.2.js"></script>

            
Este bloque de código se muestra en una ventana flotante

After the sdk js file is integrated, the global object MTpushInterface on the Window can be used.

tips

The package includes sw.xxx.js. This file is a service worker file and is used to receive messages. The SDK will load this file from the root directory by default. The largest scope of service worker is the location of the worker (in other words, if the script sw.js is located in /js/sw.js, it can only control the URL under /js/ by default). So please use the default configuration as much as possible and place it in the root directory of the website. If there are special circumstances and it is stored in a third-party CDN, please use the Service-Worker-Allowed header on the server side to specify the maximum scope of the worker.
              
              The package includes sw.xxx.js. This file is a service worker file and is used to receive messages.
The SDK will load this file from the root directory by default.
The largest scope of service worker is the location of the worker (in other words, if the script sw.js is located in /js/sw.js, it can only control the URL under /js/ by default).
So please use the default configuration as much as possible and place it in the root directory of the website.
If there are special circumstances and it is stored in a third-party CDN, please use the Service-Worker-Allowed header on the server side to specify the maximum scope of the worker.

            
Este bloque de código se muestra en una ventana flotante

The SDK initialization

Generate user_str

It is recommended to use browser fingerprinting to generate a unique user_str to prevent invalid user registrations:

// Omitted: Canvas, WebGL, and plugin fingerprint collection code (unchanged) const visitorId = getFingerprint(); console.log('user_str', visitorId);
              
              // Omitted: Canvas, WebGL, and plugin fingerprint collection code (unchanged)
const visitorId = getFingerprint();
console.log('user_str', visitorId);

            
Este bloque de código se muestra en una ventana flotante

Example Code

// Register event listeners before initialization // Callback when the Aurora channel disconnects MTpushInterface.mtPush.onDisconnect(function () { console.log("onDisconnect"); }); // Receive push messages (Web Push, browser vendor channels) MTpushInterface.onMsgReceive((msgData) => { // msgData structure: {data:{xxx},type:0} type:0 is Aurora channel, 1 is system channel console.log("Received push message:", msgData); }); // Push initialization MTpushInterface.init({ appkey: "", // Required, see above for app info user_str: visitorId, // Required, user identifier fail(err) { console.log("Online push setup failed", err); }, success(data) { console.log("Online push setup successful", data); }, webPushcallback(code, tip) { console.log("User status code and message", code, tip); }, swUrl: '', // Default: "/sw.min." + sdkEnv.version + ".js". This config is the server worker file path, which must be under the current domain and determines the worker's scope. canGetInfo(data) { // At this point, notification config data can be retrieved. After this callback, RegId can be obtained. console.log(data); // Related config info console.log("Obtained RegId", MTpushInterface.getRegistrationID()); }, custom: (fuc) => { // When using custom prompt settings, manually call fuc() to request notification permissions. The permission request function is only available via 'custom'. // fuc() triggers the notification permission request. }, });
              
                // Register event listeners before initialization
  // Callback when the Aurora channel disconnects
  MTpushInterface.mtPush.onDisconnect(function () {
    console.log("onDisconnect");
  });
  // Receive push messages (Web Push, browser vendor channels)
  MTpushInterface.onMsgReceive((msgData) => {
    // msgData structure: {data:{xxx},type:0} type:0 is Aurora channel, 1 is system channel
    console.log("Received push message:", msgData);
  });
  // Push initialization
  MTpushInterface.init({
    appkey: "", // Required, see above for app info
    user_str: visitorId, // Required, user identifier
    fail(err) {
      console.log("Online push setup failed", err);
    },
    success(data) {
      console.log("Online push setup successful", data);
    },
    webPushcallback(code, tip) {
      console.log("User status code and message", code, tip);
    },
    swUrl: '', // Default: "/sw.min." + sdkEnv.version + ".js". This config is the server worker file path, which must be under the current domain and determines the worker's scope.
    canGetInfo(data) {
      // At this point, notification config data can be retrieved. After this callback, RegId can be obtained.
      console.log(data); // Related config info
      console.log("Obtained RegId", MTpushInterface.getRegistrationID());
    },
    custom: (fuc) => {
      // When using custom prompt settings, manually call fuc() to request notification permissions. The permission request function is only available via 'custom'.
      // fuc() triggers the notification permission request.
    },
  });

            
Este bloque de código se muestra en una ventana flotante

More API

For details about how to use other apis, see the interface documentation:Web SDK API.

Run the demo

The example in the package is an API demo. You can run it directly in your browser for test.

icon
Contacto