Introduction to AMP

AMP — which stands for Accelerated Mobile Pages — was first introduced by Google in October of 2015. AMP is an open-source custom web development framework created to speed up the loading time of web pages on mobile devices.

Limitation

This documentation only applies to websites that are NOT using our WordPress Plugin to enable push notifications. As of March 6th 2020, our WordPress plugin does not offer support for AMP websites. We will be adding support for AMP sites soon. Having said that, Webpushr is one of the very few web push notifications vendor that offers push notification support for AMP websites.

Subscribe Button for AMP sites

Webpushr’s current support AMP requires site visitors to click on a custom opt-in button for push notifications. We recommend that you place this button on your page where the user is most likely to opt in.

Integration Steps

Add AMP amp-web-push component:
Add the following line inside <head> tag of every AMP page you want to enable push notifications on:
```
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
```

Configuration

Setup for HTTPS sites

Add/Upload the following 3 files to your site’s root directory.

To download right click these files and choose "Save Link as...". Important: These files must be accessible on your site's root directory.

webpushr-amp-helper.html webpushr-amp-optin.html webpushr-sw.js

Now add the following code in your AMP site's <body> tag.

<amp-web-push
   id="amp-web-push"
   layout="nodisplay"
   helper-iframe-url="https://www.YOUR-SITE.com/webpushr-amp-helper.html"
   permission-dialog-url="https://www.YOUR-SITE.com/webpushr-amp-optin.html?public_key=<YOUR-PUBLIC-KEY>"
   service-worker-url="https://www.YOUR-SITE.com/webpushr-sw.js"
></amp-web-push>

Replace YOUR-SITE with your domain and <YOUR-PUBLIC-KEY> with your webpushr Public Key for this site.

Setup for HTTP sites

Add the following code in your AMP site's <body> tag.

<amp-web-push
   id="amp-web-push"
   layout="nodisplay"
   helper-iframe-url="https://www.YOUR-SITE.com/webpushr-amp-helper.html"
   permission-dialog-url="https://www.YOUR-SITE.com/webpushr-amp-optin.html?public_key=<YOUR-PUBLIC-KEY>"
   service-worker-url="https://www.YOUR-SITE.com/webpushr-sw.js"
></amp-web-push>

Replace DOMAIN-LABEL with your webpushr domain label and <YOUR-PUBLIC-KEY> with your webpushr Public Key for this site.

Setup Button
Add the following lines where you want the subscribe button to show.

<amp-web-push-widget visibility="unsubscribed" layout="fixed" height="50" width="290">
  <button class="webpushr-amp-subscribe" on="tap:amp-web-push.subscribe" style="background-color: #0043ff;font-size:16px; padding:10px 10px 10px 10px;vertical-align: middle;color:#ffffff;font-family:Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:500;text-transform:none;">
    <amp-img style="display: inline-block; vertical-align: middle; padding-right: 15px;"
             class="webpushr-amp-subscribe-icon"
             width="24"
             height="24"
             layout="fixed"
             src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDQwLjgzMiA0NDAuODMyIiBzdHlsZT0iZmlsbDojZmZmZmZmIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMzgxLjQ0LDI2NS43MjhWMTYxLjc5MkMzODEuNDQsNzIuMTkyLDMwOS4yNDgsMCwyMTkuNjQ4LDBTNTguMzY4LDcyLjE5Miw1OC4zNjgsMTYxLjc5MnYxMDMuOTM2bC00MS45ODQsODIuOTQ0aDQwOC4wNjQNCgkJCUwzODEuNDQsMjY1LjcyOHoiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCgk8Zz4NCgkJPHBhdGggZD0iTTE1MS41NTIsMzcyLjczNmMwLDM3LjM3NiwzMC43Miw2OC4wOTYsNjguMDk2LDY4LjA5NmMzNy4zNzYsMCw2OC4wOTYtMzAuNzIsNjguMDk2LTY4LjA5NkgxNTEuNTUyeiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K">
    </amp-img>
    Subscribe to Push Notifications
  </button>
</amp-web-push-widget>

Remove Webpushr Standard Code Snippet

Remove Webpushr standard code snippet from your AMP website. Feel free to contact us at support@webpushr.com if you face any integration related issues.

Validate Integration with our AMP troubleshooter

You can use our AMP troubleshooter to test integration.

Test Integration Now