Add OneSignal Push on WordPress AMP by Automattic

OneSignal is the best push notification plugin for WordPress. Yup, it’s free and very easy to set up. If you are using the default AMP Plugin by Automattic, it doesn’t have push feature built-in. Here I present you a super easy method to set up OneSignal AMP Push on WordPress. AMP (Accelerated Mobile Pages) is an open source initiative that aims to provide mobile-optimized content that can load instantly everywhere. I’ll provide you with a Step-by-Step Guide to Add OneSignal Push on WordPress AMP for free. In order to set up OneSignal AMP Push on WordPress, just follow the below steps mindfully.

Step # 1: Add AMP to your website.

Install AMP Plugin by Automattic on your WordPress website.

Step #2: Get Access to your Website Files

You could access your files within your WordPress Dashboard, but the safer method is to access them using File Transfer Protocol (FTP). I recommend using WinSCP to access your files over FTP/SFTP. It has a Graphical user interface, Integrated text editor, and many other mind-blowing features.

Step #3: Add the OneSignal AMP Push script into your AMP Header.

In order to do this, you need to open html-start.php and add the following script to 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

Step #4: Configure the OneSignal AMP Push Extension

For HTTPS Sites, download these files and add them to the root of your site:

  1. amp-helper-iframe.html
  2. amp-permission-dialog.html

Then add this code to your AMP site’s body section as shown below.

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

Don’t forget to replace YOURDOMAIN.COM with the domain/subdomain users subscribe to and YOUR-APP-ID with your app ID. You can find APP-ID in your OneSignal Dashboard.

For HTTP Sites, add this code in your AMP site’s <body>.

<amp-web-push
   id="amp-web-push"
   layout="nodisplay"
   helper-iframe-url="https://LABEL.os.tc/amp/helper_frame?appId=YOUR-APP-ID"
   permission-dialog-url="https://LABEL.os.tc/amp/permission_dialog?appId=YOUR-APP-ID"
   service-worker-url="https://LABEL.os.tc/OneSignalSDKWorker.js?appId=YOUR-APP-ID"
 ></amp-web-push>

Don’t forget to replace LABEL with your chosen label and YOUR-APP-ID with your app ID Keep the .os.tc (e.g. yourlabel.os.tc) part. You can find this information in your OneSignal Dashboard. You can also contact OneSignal Customer Support in case of any problem.

Step #5: Add Subscribe button to AMP Pages

Up to now, you must have configured, AMP, OneSignal, and AMP Push Extensions correctly. Now all you need to do is to Add Subscribe button.

In order to do that, first add the following styles in your head in html-start.php file.

 <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 pages content in single.php file (I  recommend adding it just after the content like I did):

<!-- 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>

Done!

Some bonus tips:

  1. Don’t remove the HTTPS or HTTP to make it protocol-relative URL.
  2. Do not add any custom styling in the AMP head section.
  3. Don’t add any HTML comment in the style section.
  4. Read the right way to customize a plugin.

Signup for Premium Content!

Enter Your Email Below to Get Access To Exclusive Content

3 thoughts on “Add OneSignal Push on WordPress AMP by Automattic”

Leave a Comment

Your email address will not be published. Required fields are marked *

Learn How I Generated Organic Traffic Worth $1,600,000

close-link

Signup for Premium Content!

Enter Your Email Below to Get Access To Exclusive Content