Integration Guide

Last updated:2023-02-22

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 /

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.

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.

在文档中心打开