Add OneSignal Push on WordPress AMP by Automattic

OneSignal AMP Push on WordPress for free

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.

Written by Ankur Shrivastava

Twitter @ankshva | Ankur Shrivastava is a Tech enthusiast, a Digital Marketer and a Finance Geek with an experience in SEO and Affiliate Marketing. He writes primarily about digital startups, digital marketing, WordPress, and B2B topics. Being a Finance geek, he also writes about Financial Fixes.

2 Comments

Ask a question

You have to agree to the comment policy.

10 Remarkable Telegram Messenger App Tricks You Should Try Today

Google Play Instant – Try Android Games Before Downloading

Google Play Instant