AMP Web Push Notifications

Documentation to integrate PushEngage web push notifications.

AMP Web Push Notifications

Web push notification service: PushEngage

Below mentioned are the key parameters needed in AMP integration.

Step 1 – Add the AMP web push script

Add the script mentioned below to the AMP pages where you would like to enable web push notifications. The script should be added to the <head> section.

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

Step 2 – Configure the AMP web push extension (For HTTPS Site)

Download these files from your subdomain on PushEngage and add them to the root directory of your site

  • amp-helper-frame.html – Download it from https://your_subdomain.pushengage.com/amp-helper-frame.html
  • amp-permission-dialog.html - Download it from https://your_subdomain.pushengage.com/amp-permission-dialog.html
  • service-worker.js – Settings -> Installation Settings -> HTTPS section
If the service-worker.js file is already present in the root directory you can ignore the adding it again.

Upload all the downloaded files from above in your root folder.

Notice: Replace YOURDOMAIN.COM with the domain where you are actually collecting subscribers. For example, if you have a site at PushEngage registered as https://www.pushengage.com so instead of YOURDOMAIN it will be PushEngage. Also, make sure to replace App ID.

Add the code mentioned below to your AMP site's <body> section.

<amp-web-push
  id="amp-web-push"
  layout="nodisplay"
  helper-iframe-url="https://www.YOURDOMAIN.com/amp-helper-frame.html?appId=your-app-id"
  permission-dialog-url="https://www.YOURDOMAIN.com/amp-permission-dialog.html?appId=your-app-id"
  service-worker-url="https://www.YOURDOMAIN.com/service-worker.js?appId=your-app-id">
</amp-web-push>

Step 3 – Set up your widget

You can add the code mentioned below within your AMP pages if you customize the subscription widget. You can do it by changing the CSS (assets/scss/amp/_web-push-notifications.scss)

Notice: You must activate the css class $enable-amp-web-push-notification in the options.scss file.
<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: 8px 15px;
    cursor: pointer;
    outline: none;
    font-size: 15px;
    font-weight: 400;
    background: #399bff;
    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);
  }

  amp-web-push-widget button.unsubscribe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    border: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
    font-size: 15px;
    font-weight: 400;
    background: transparent;
    color: #B1B1B1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
</style>

Add the code mentioned below to your AMP site's <body> section.

<!-- Subscripe pushengage -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" height="37" width="50">
  <button class="btn btn-danger" on="tap:amp-web-push.subscribe"><i class="fa fa-bell"></i></button>
</amp-web-push-widget>
<!-- Unubscripe pushengage -->
<amp-web-push-widget visibility="subscribed" layout="fixed" height="37" width="50">
  <button class="btn btn-primary btn-amp-bell" on="tap:amp-web-push.unsubscribe"><i class="fa fa-bell-slash"></i></button>
</amp-web-push-widget>

Thats it. Now your integration for web push on AMP Pages with PushEngage will be complete.

PushEngage web push notification documentation

Read more
We use cookies to optimize site functionality and give you the best possible experience.