(Legacy) How To Go Live With AMP Pages?

Accelerated Mobile Page is an open-source Framework from Google and Twitter that helps to load content on the mobile pages quickly.  Now, Google has started supporting subscriptions on AMP pages, and here’s how you can integrate PushEngage web push notifications on your AMP pages.

1.Add the code mentioned below to the <head> section of your website.

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

2. Navigate to Settings > Installation Settings and select the AMP tab. From step 2 download the package file, unzip it and add the service-worker.js file to the root directory of your website such that it is accessible.

PushEngage Installation Settings for AMP pages and its serviceworker file

3. Add AMP HTML to your <body> section where u want to show `Subscribe to updates’ and ‘Unsubscribe from updates’ button.

A. Here’s the AMP web push HTML configuration –

AMP Web Push HTML configuration

B. Here’s the code for ‘Subscribe to Updates’ button –

C. Here’s the code for ‘Unsubscribe from Updates’ Button –

Unsubscribe from updates` button.

4. Add AMP css to your <body> section. This help to customize your `Subscribe to updates’ and ‘Unsubscribe from updates’ button.

amp web push css

That would be it and your installation will be complete.

Still stuck? How can we help?
Last updated on March 1st, 2022

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