Google AMP Web Push Notifications

Web push notification service: PushEngage

Below mentioned are the key parameters needed in Google AMP integration.

Step 1 – Add the Google AMP web push script

Add the script mentioned below to the Google 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 Google 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 Google 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 Google 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 Google 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="far 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="far fa-bell-slash"></i></button>
</amp-web-push-widget>

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

Google AMP Web Push Notifications