Press "Enter" to skip to content

Add OneSignal Push on WordPress AMP by Automattic

Ankur Shrivastava 2

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.

OneSignal AMP Push on WordPress for free

Animated GIF - Find & Share on GIPHY

Step # 1: Add AMP to your website.

Install AMP Plugin by Automattic on your WordPress website.

How to Add OneSignal AMP Push on WordPress for FREE
Image: WordPress

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.

How to Add OneSignal AMP Push on WordPress for FREE
Image: WinSCP

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:

How to Add OneSignal AMP Push on WordPress for FREE

How to Add OneSignal AMP Push on WordPress for FREE

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.

How to Add OneSignal AMP Push on WordPress for FREE

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

How to Add OneSignal AMP Push on WordPress for FREE
Image: OneSignal

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

How to Add OneSignal AMP Push on WordPress for FREE

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

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.

Buckle Up

Join 1827 other subscribers



  1. Pawan Pawan

    Wonderful post. I’m gonna apply it rightaway

    • Ankur Ankur

      Thank you!

Ask a question

You have to agree to the comment policy.

8 + nineteen =