Implement web push notifications on AMP web pages.

To integrate our web push notifications tool on your page you need our web sdk, the installation guide is here:

[Installation]

And the following files:

⚠️
If the links of AMP website are broken, you can download these versions of our storage: AMP html push files

Integration

Developers compose widgets that appear based on a user's subscription state. Widgets are composed of AMP elements and can be as simple as a button or a text link.
Clicking the subscription widget pops up a page prompting the user for notification permissions and signals the service worker (configured below) to subscribe the user to push in the background.

<amp-web-push-widget
  visibility="unsubscribed"
  layout="fixed"
  width="250"
  height="80"
>
  <button on="tap:amp-web-push.subscribe">Subscribe to Notifications</button>
</amp-web-push-widget>

Configuration

The amp-web-push component requires extra integration on your site. You will need to upload two HTML files (provided) on your site as well as the service worker JavaScript file. These three files form the configuration described below.

<head>
   <script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
</head>

<amp-web-push
  layout="nodisplay"
  helper-iframe-url="https://example.com/helper-iframe.html"
  permission-dialog-url="https://example.com/permission-dialog.html"
  service-worker-url="https://example.com/worker.min.js"
></amp-web-push>

All properties are required, and all URLs must begin with the same origin (e.g. https://example.com).

Initialization

On the permission-dialog you have to delete the script tags, and add the following code:

<script
  src="/en/indigitall/sdk.min.js"
  onload="indigitall.init({
    appKey:'YOUR_APPKEY',
    onInitialized: function() {
      window.close();
    },
  })"
  async>
</script>

appKey: your personal appKey

🚧
The appKey value is unique and personal. You can get it by accessing your account> settings> App Key value

Custom Initialization

 <script
  src="../indigitall/sdk.min.js"
  onload="indigitall.init({
    appKey: 'YOUR_APPKEY',
    workerPath: './worker.min.js',
    requestLocation: true,
    logLevel: indigitall.LogLevel.DEBUG,
    urlDeviceApi:'YOUR_DOMAIN'
    onInitialized: function() {
      //Do something
    },
    onPushPermissionChanged: function(permission) {
      if (permission.state != 'granted') {
          //Do something
	        window.close();
      }      
    },
    onLocationPermissionChanged: function() {
      //Do something
      window.close();
    },
  })"
  async>
</script>

window.close(): you can choose when put it on code to close the permission popup.

logLevel: INFO/DEBUG/WARNING/ERROR. We recommend DEBUG level.

urlDeviceApi: if you are ENTERPRISE CUSTOMER you have to add this parameter in the configuration so that the SDK points to the correct environment.

Other SDK features

You have to create a script file where you can call the different functionalities of the web sdk. For example, if you want to subscribe to topics, we would create the following file:

let topicJson =  document?.currentScript.getAttribute("json");
let json = JSON.parse(topicJson);
if (json?.topicsSubscribe?.length > 0) {
    indigitall.topicsSubscribe(json.topicsSubscribe, (succcess) => {
        console.log("succcess Subscribe topics", succcess);
    }, (error) => {
        console.log("error Subscribe topics", error);
    });
}

if (json?.topicsUnsubscribe?.length > 0) {
    indigitall.topicsUnsubscribe(json.topicsUnsubscribe, (succcess) => {
        console.log("succcess unsubscribe topics", succcess);
    }, (error) => {
        console.log("error unsubscribe topics", error);
    });
}

Next, in your index.html add the following lines with subscribe or/and unsubscribe:

    <script src="./topicScript.js" width="300" height="100"
      json='{"topicsSubscribe":["TOPIC_ONE","TOPIC_TWO",...], "topicsUnsubscribe":["TOPIC_ONE","TOPIC_TWO",...]}' >
    </script>