Web Push for AMP

WebEngage supports tracking of users and events on web pages built using the AMP framework. In addition, WebEngage also allows users of your AMP pages to opt-in to receive web push notifications. Please note that this is available only for HTTPS websites.

Before you proceed with the steps below, please ensure you've completed the SDK setup for your AMP pages as per our SDK documentation.

Steps to Enable Users to Opt-in to Receive Web Push Notifications on Your AMP Pages

Please note that this is available only for HTTPS websites

  1. You need to include the following code snippet to load the amp-web-push component on your AMP pages.
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
  1. The amp-web-push tag needs to be placed on each of your AMP pages where you would like to enable web push. This tag requires 3 mandatory parameters: helper-iframe-url, permission-dialog-url, service-worker-url.
<amp-web-push id="amp-web-push" layout="nodisplay"
    helper-iframe-url="https://<yourdomain.com>/amp-web-push-helper-frame.html"
    permission-dialog-url="https://<yourdomain.com>/amp-web-push-permission-dialog.html"
    service-worker-url="https://<yourdomain.com>/service-worker.js?licensecode=<YOUR_PROJECT_LICENSE_CODE>">
</amp-web-push>

helper-iframe-url: This is a HTML page that is used as a helper to sync data between amp-permission-dialog-box and the page. This needs to hosted on your website's root domain. You can download the code for this HTML page from here.

permission-dialog-url: This is a HTML page that will be used to ask the user for permission to opt-in to receive web push notification. This also needs to be hosted on your website's root domain. You can download the code for this HTML page from here.

service-worker-url: This would load the WebEngage AMP service worker. This also needs to be hosted on your website's root domain. Please use the code snippet below for your service-worker.js file. Please use code snippet either under Global Data Center or India Data Center depending on the WebEngage data center your data is stored in. More details below.

For Global Data Center (Default): By default, your data is stored in our global data centers. Therefore, if you're not specifically using our India data center to store/access your data, please use the following code.

//service-worker.js code snippet for Global Data Center
var lc = (new URL(self.location)).searchParams.get('licensecode');
if (lc) {
  importScripts('https://wsdk-files.webengage.com/webengage/' + lc +'/v4.js');
  importScripts('https://ssl.widgets.webengage.com/js/service-worker-amp.js')
}

For India Data Center: If you're using our India data center to store/access your data, please ensure that you use the following code instead of the code above.

//service-worker.js code snippet for India Data Center
var lc = (new URL(self.location)).searchParams.get('licensecode');
if (lc) {
  importScripts('https://wsdk-files.in.webengage.com/webengage/' + lc +'/v4.js');
  importScripts('https://widgets.in.webengage.com/js/service-worker-amp.js')
}

Make sure you replace <yourdomain.com> with the URL of your website and <YOUR_PROJECT_LICENSE_CODE> with your WebEngage license code.

In your contract with WebEngage, if you have not specifically requested for your data to be stored in our India data center, then your data will be stored in our Global data center.
-
If your WebEngage dashboard URL starts with dashboard.webengage.com, then it means you're using our Global data center.
-
If your WebEngage dashboard URL starts with dashboard.in.webengage.com, then it means you're using our India data center.

  1. A permission control widget also needs to be set up on your AMP pages. This will help display a widget to your users asking them to opt in to receive web push notifications.
Permission control widget

Permission control widget

Once they click on this widget a new browser window opens that shows a native browser prompt asking the user to opt in to web push notifications. If the user clicks Allow, they would now be reachable on Web Push.

Window that opens asking user to opt in to web push

Window that opens asking user to opt in to web push

You can use the code snippet below for the permission control widget. Please feel free to modify it to suit your requirements.

<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="245" height="45">
    <button class="subscribe" on="tap:amp-web-push.subscribe">
      <amp-img
               class="subscribe-icon"
               width="24"
               height="24"
               layout="fixed"
               src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=">
      </amp-img>
      Would you like to subscribe to our notifications?
    </button>
</amp-web-push-widget>

Use the following code to style the widget above.

<style amp-custom>
        amp-web-push-widget button.subscribe {
          display: inline-flex;
          align-items: center;
          border-radius: 2px;
          border: 0;
          box-sizing: border-box;
          margin: 0;
          padding: 10px 15px;
          cursor: pointer;
          outline: none;
          font-size: 15px;
          font-weight: 400;
          background: #3d404e;
          color: white;
          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
     
        amp-web-push-widget button.subscribe .subscribe-icon {
          margin-right: 10px;
        }
     
        amp-web-push-widget button.subscribe:active {
          transform: scale(0.99);
        }
</style>

Web Push for AMP


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.