AMP Web Push Setup

How to Set Up Web Push on AMP Pages

📘
For Wordpress setup, see below

1. Add the AMP Web Push script

For all AMP pages on your site that you'd like to enable web push notifications, add the following script within your AMP page's <head> section:

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

2. Configure the AMP Web Push extension

For HTTPS Sites

Download these files and add them to the root of your site, right click these files and "Save Link as...":

Then add this code in your AMP site's <body>.

<amp-web-push
    id="amp-web-push"
    layout="nodisplay"
    helper-iframe-url="https://YOURDOMAIN.COM/amp-helper-frame.html?appId=YOUR-APP-ID"
    permission-dialog-url="https://YOURDOMAIN.COM/amp-permission-dialog.html?appId=YOUR-APP-ID"
    service-worker-url="https://YOURDOMAIN.COM/OneSignalSDKWorker.js?appId=YOUR-APP-ID"
  ></amp-web-push>

🚧

Replace YOURDOMAIN.COM with the domain/subdomain users subscribe to

Replace YOUR-APP-ID with your app ID

3. Add a Subscribe widget

This widget will let users subscribe and unsubscribe to push notifications from your AMP pages.

Here's an example AMP Web Push widget:

First, add the following styles into your existing <style amp-custom></style> (AMP does not allow multiple style tags):

<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: 10px 15px;
      cursor: pointer;
      outline: none;
      font-size: 15px;
      font-weight: 400;
      background: #4A90E2;
      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>

Then, add the AMP Web Push widget code at the bottom of your AMP page content.

<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="245" height="45">
  <button class="subscribe" on="tap:amp-web-push.subscribe">
    <amp-img
             class="subscribe-icon"
             width="24"
             height="24"
             layout="fixed"
             src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=">
    </amp-img>
    Subscribe to updates
  </button>
</amp-web-push-widget>
           

<!-- 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>
</amp-web-push-widget>

We recommend putting your AMP Web Push widget below the main content of your page for three important reasons:

AMP widgets take up a fixed amount of vertical space, which cannot be hidden even if a user has subscribed. In other words, putting a widget at the top means every user (subscribed or not) coming to your AMP page has to scroll more to see the content they came for.
The default AMP Web Push widget changes from a subscribe button to an unsubscribe button once a user subscribes. Thus, the unsubscribe button would be presented above the page contents and may be accidentally tapped.
It's best practice to get users to understand the value of your site before asking them to sign up for push notifications. Placing a button at the bottom of the page is a natural stopping point for the user that you can use to convert them to subscribers.

👍
Once you've added your AMP Web Push widget, you should be all set!

Additional Step: Remove OneSignal JavaScript code on AMP pages

If you've already added OneSignal on your non-AMP pages, you may added a OneSignal SDK script reference, and the initialisation code (similar to the below). This code should be removed for your AMP pages.

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
  window.OneSignal = window.OneSignal || [];
  OneSignal.push(function() {
    OneSignal.init({
      appId: "ONESIGNAL_APP_ID",
    });
  });
</script>

How to Set up AMP Web Push for Wordpress sites

1. Set up OneSignal on your Wordpress site

First follow our Wordpress setup guide to setup your OneSignal account and Wordpress site.

2. Set up AMP on your Wordpress site

The AMP for WP plugin allows you to add AMP to your Wordpress site, and supports Wordpress AMP Web Push. Follow the setup process for this plugin to get started.

3. Enable AMP Web Push

Follow the AMP for WP OneSignal Integration documentation to enable AMP Web Push on Wordpress.

👍
You're all set! You should be able to send AMP Web Push notifications on your Wordpress site.