How to Add OneSignal Push on WordPress AMP by Automattic

OneSignal पुश

Web push notification is one of the best way to market your content and Product as well, and with web push notification there’s no need of email or anything as it needs only browser permission and because of this most of the user opt for it Here you’ll see OneSignal Push Notification implementation.

As web Push Notification is one of the must Part of your Blog so is AMP page’s, the best way to send a notification one signal leads this but there’s Problem there is no built-in subscribe button on AMP pages If you are using the default AMP Plugin by Automattic.

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.

Install AMP for WordPress Plugin

Install AMP Plugin by Automattic on your WordPress website.

AMP for WordPress

Install OneSignal Push Plugin

Install OneSignal Push Plugin from WordPress Plugin Directory on your WordPress website.

OneSignal Push Notification

Get Access to your Website Files

You can access your files from your WordPress Dashboard, but the safer method is to access them using File Transfer Protocol (FTP) or via Cpanel File Manager. I recommend using FileZilla or WinSCP to access your files over FTP/SFTP. Both have a Graphical user interface, Integrated text editor, and many other mind-blowing features and are very easy to use.

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:

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.

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

Add Subscribe button to AMP Pages

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

OneSignal Push

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

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!

Now your all AMP Pages and Post will have subscribed button at Bottom.

Note:

  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.

Related

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to Add OneSignal Push on WordPress AMP by Automattic

by Ashish Yadav time to read: 5 min
0