Integration Guide

Last updated:2024-04-12

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. Note that an appkey can only be bound to one domain name.
截屏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>

        
This code block in the floating window

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.

        
This code block in the floating window

The SDK initialization

// Register event listeners before initialization // Callback when Engagelab/**Mtpush** Channel disconnected MTpushInterface.mtPush.onDisconnect(function () { console.log("onDisconnect"); }); //Get push messages (web push, browser vendor channel)/"Callback function when receive the message from web push, browser channel" MTpushInterface.onMsgReceive((msgData) => { //msgData Data structure{data:{xxx},type:0} type:0 is the engagelab channel and 1 is the system channel console.log("Get push Messages:", msgData); }); // Push initialization MTpushInterface.init({ appkey: "", // Required. See above for application information user_str: "adminDemo", // Required. User identifier, which identifies the user fail(err) { console.log("Failed to create an online push", err); }, success(data) { console.log("The online push is created successfully. Procedure", data); }, webPushcallback(code, tip) { console.log("The status code and prompt obtained by the user", code, tip); }, swUrl: '', //The default **like this:**"/sw.min." + sdkEnv.version + ".js" ,This configuration item is the serverworker file address, the domain name must be the current domain name, and the path determines the serverworker scope. canGetInfo(data) { //Some configuration data that can be notified at this point is available to RegId after this callback function console.log(data); //Related Configuration Information console.log("get the RegId", MTpushInterface.getRegistrationID()); }, custom: (fuc) => { //When using a custom prompt configuration, you need to manually call fuc() to request notification rights/**permission**. The request notification permission function can only be obtained through custom. //fuc() Notification rights are requested when invoked/**it will get notification permission when invoked** }, });
            // Register event listeners before initialization	
  // Callback when Engagelab/**Mtpush** Channel disconnected
  MTpushInterface.mtPush.onDisconnect(function () {
    console.log("onDisconnect");
  });
  //Get push messages (web push, browser vendor channel)/"Callback function when receive the message from web push, browser channel"
  MTpushInterface.onMsgReceive((msgData) => {
    //msgData Data structure{data:{xxx},type:0} type:0 is the engagelab channel and 1 is the system channel
    console.log("Get push Messages:", msgData);
  });
  //  Push initialization
  MTpushInterface.init({
    appkey: "", // Required. See above for application information
    user_str: "adminDemo", // Required. User identifier, which identifies the user
    fail(err) {
      console.log("Failed to create an online push", err);
    },
    success(data) {
      console.log("The online push is created successfully. Procedure", data);
    },
    webPushcallback(code, tip) {
      console.log("The status code and prompt obtained by the user", code, tip);
    },
    swUrl: '', //The default **like this:**"/sw.min." + sdkEnv.version + ".js" ,This configuration item is the serverworker file address, the domain name must be the current domain name, and the path determines the serverworker scope.
    canGetInfo(data) {
      //Some configuration data that can be notified at this point is available to RegId after this callback function
      console.log(data); //Related Configuration Information
      console.log("get the RegId", MTpushInterface.getRegistrationID());
    },
    custom: (fuc) => {
      //When using a custom prompt configuration, you need to manually call fuc() to request notification rights/**permission**. The request notification permission function can only be obtained through custom.
      //fuc() Notification rights are requested when invoked/**it will get notification permission when invoked**
    },
  });

        
This code block in the floating window

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
Contact Sales