Documentation: Push Notifications Onsite Messaging REST API
  1. Documentation
  2. Web Push Notifications
  3. Integration
  4. AMP Web Push

AMP Web Push Notifications

What is AMP?

AMP or Accelerated Mobile Pages helps make webpages load almost instateneously on mobile devices. This is an open source project by Google and you will see these pages in Google Search, generally with a lightning icon next to them.

Google has now approved the Web Push AMP extension that allows subscriptions on AMP pages as well. This is great for news publishers as they now can reach to a huge user base with faster loading AMP pages and also increase their push subscriber base at the same time.

AMP Web Push is currently available on Android devices. Although iOS does support AMP, but Apple has not yet added support for Web Push notifications. Once Apple adds the requitive support, AMP Web Push would be supported on iPhones and iPads as well.

AMP Web Push Demo

Click on this link to see an example of how AMP Web Push would work on your website.

How to setup AMP Web Push on your webpages

  • Add the AMP Web Push script to your web page.

    For the AMP pages on your website where you would like to enable web push notifications, add the following script within the <head> section.

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

  • Add the following CSS to your AMP Page.

    This CSS is used to customize the Subcribe/Unsubscribe buttons on your AMP web page. You can change colors, design of the buttons. Place this CSS in the <head> section as well under <style amp-custom> (create if it does not exist).

    .pa-web-push{padding-top:10px;text-align:center}.pa-amp-subscribe,.pa-amp-unsubscribe{padding:8px 15px;cursor:pointer;outline:0;font-weight:400;-webkit-tap-highlight-color:transparent}.pa-amp-subscribe{border-radius:2px;border:1px solid #007ae2;margin:0;font-size:16px;background:#0e82e5;color:#fff}.pa-amp-subscribe amp-img{width:20px;height:20px;vertical-align:sub;margin-right:4px}.pa-amp-unsubscribe{border-radius:2px;border:1px solid #b3b3b3;margin:0;font-size:15px;background:#bdbdbd;color:#555}.pa-amp-subscribe:active,.pa-amp-unsubscribe:active{transform:scale(.99)}
    Copy

  • Upload required files

    Head to the Integrate Section on your PushAlert Dashboard. Click on AMP and download the following two files and add them to the root of your website:

    • pushalert-amp-permission-dialog.html
    • pushalert-amp-helper-frame.html

    If you have not yet configured Web Push for your non-AMP pages, then you would also have to upload manifest.json and sw.js files to your website root as well. These can be found in the Integrate section under Universal Javascript.

  • Configure the AMP Web Push extension

    Add the following code where you want to show the Subscribe/unscubscribe buttons to appear. Preferably at the end of the article or web page.

    Replace mydomain.com with your registered domain at PushAlert that users subscribe to. 

    <amp-web-push
        id="amp-web-push"
        layout="nodisplay"
        helper-iframe-url="https://mydomain.com/pushalert-amp-helper-frame.html"
        permission-dialog-url="https://mydomain.com/pushalert-amp-permission-dialog.html"
        service-worker-url="https://mydomain.com/sw.js">
</amp-web-push>

<div class="pa-web-push">
    <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="40">
        <button class="pa-amp-subscribe" on="tap:amp-web-push.subscribe">
            <amp-img
                width="20"
                height="20"
                layout="fixed"
                src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij48dGl0bGU+UHVzaEFsZXJ0PC90aXRsZT48ZyBpZD0iRm9ybWFfMSIgZGF0YS1uYW1lPSJGb3JtYSAxIj48ZyBpZD0iRm9ybWFfMS0yIiBkYXRhLW5hbWU9IkZvcm1hIDEtMiI+PHBhdGggZD0iTTEzMi4wNywyNTBjMTguNjIsMCwzMy43MS0xMS41MywzMy43MS0yMUg5OC4zNkM5OC4zNiwyMzguNDIsMTEzLjQ2LDI1MCwxMzIuMDcsMjUwWk0yMTksMjAwLjUydjBhNTcuNDIsNTcuNDIsMCwwLDEtMTguNTQtNDIuMzFWMTE0LjcyYTY4LjM2LDY4LjM2LDAsMCwwLTQzLjI0LTYzLjU1VjM1LjlhMjUuMTYsMjUuMTYsMCwxLDAtNTAuMzIsMFY1MS4xN2E2OC4zNiw2OC4zNiwwLDAsMC00My4yMyw2My41NXY0My40NmE1Ny40Miw1Ny40MiwwLDAsMS0xOC41NCw0Mi4zMXYwYTEwLjQ5LDEwLjQ5LDAsMCwwLDYuNTcsMTguNjdIMjEyLjQzQTEwLjQ5LDEwLjQ5LDAsMCwwLDIxOSwyMDAuNTJaTTEzMi4wNyw0NS40MmExMS4zMywxMS4zMywwLDEsMSwxMS4zNi0xMS4zM0ExMS4zMywxMS4zMywwLDAsMSwxMzIuMDcsNDUuNDJabTczLjg3LTE3LjY3LTYuNDUsOS43OGE4My40Niw4My40NiwwLDAsMSwzNi4xNSw1NC43N2wxMS41My0yLjA2YTk1LjIzLDk1LjIzLDAsMCwwLTQxLjIzLTYyLjVoMFpNNjQuNDYsMzcuNTJMNTgsMjcuNzVhOTUuMjMsOTUuMjMsMCwwLDAtNDEuMjMsNjIuNWwxMS41MywyLjA2QTgzLjQ2LDgzLjQ2LDAsMCwxLDY0LjQ1LDM3LjU0aDBaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4="></amp-img>
            Subscribe to Notifications
        </button>
    </amp-web-push-widget>
    <amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="40">
          <button class="pa-amp-unsubscribe" on="tap:amp-web-push.unsubscribe">Unsubscribe from Notifications</button>
    </amp-web-push-widget>
</div>
    Copy

    You may want to modify the exact call to action of the Subscribe button. Here are some choices:

    • Subscribe to updates
    • Enable notifications for latest updates
    • Get Notifications on latest (e.g. offers, news, products)

Some points to keep in mind while adding the AMP Web Push widget on your website:
1. The AMP widgets take up fixed amount of vertical space and it cannot be hidden.
2. We recommend adding the widget below your main content, so the users have a chance of going through the website before asking them for permission. This presents a value proposition, if they find the content useful, they will subscribe to notifications and this would decrease the chances of unsubscription.
3. Users cannot be automatically prompted to subscribe to notifications on AMP pages. They have to click on the Subscribe button.
4. The AMP Web push Subscribe button will change to Unsubscribe once the user subscribes to notifications.