PushEngage Web Push Notifications For AMP Pages

What is the AMP Pages?

AMP stands for Accelerated Mobile Page. It is an open source Framework from Google and Twitter that helps to load content on the mobile pages quickly. It displays the content which is important and removes the one that takes time to load on your site and affects the site performance.

Google now supports web push AMP extensions that allow subscription on AMP Pages. 

Hence it is a great opportunity for the sites to increase their subscriber base as the reach will be better now and the subscription to the push notifications is also possible at the same time.

PushEngage now supports web push subscription on AMP Pages and here’s how you can integrate it.

How To Integrate PushEngage Web Push Notification for AMP Pages?

Below mentioned are the key parameters needed in AMP integration. We request you to request the same by your Account Managers or drop an mail at care@pushengage.com.

  1. PushEngage subdomain (your_subdomain)
  2. App ID

The values to be replaced are highlighted in yellow in the below documentation.

You can enable PushEngage web push notifications for AMP Pages in 3 steps.

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 –

  1. amp-helper-frame.html – Download it from https://your_subdomain.pushengage.com/amp-helper-frame.html
  2. amp-permission-dialog.html – Download it from  https://your_subdomain.pushengage.com/amp-permission-dialog.html
  3. 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. This is also a mandatory step during PushEngage Installation.

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

This will be used in Step 3.

Please note –  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 –


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.

<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);

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

<!– A subscription widget –>
<amp-web-push-widget visibility=”unsubscribed” layout=”fixed” width=”245″ height=”45″>
<button class=”subscribe” on=”tap:amp-web-push.subscribe”>

Subscribe to updates
<!– An unsubscription widget –>
<amp-web-push-widget visibility=”subscribed” layout=”fixed” width=”230″ height=”45″>
<button class=”unsubscribe” on=”tap:amp-web-push.unsubscribe”>Unsubscribe from updates</button>

Now your integration for web push on AMP Pages with PushEngage will be complete. If you have any issues with integration or want it verified, please email us at care@pushengage.com.

Register for Web Push Notifications

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

2 comments on “PushEngage Web Push Notifications For AMP Pages

Engage and Retain Visitors AfterThey’ve Left Your Website

Increase the value of every web visit with Push Notifications that are hard to miss.

  • Forever Free Plan
  • Easy Setup
  • 5 Star Support