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.

If you need any further assistance, feel free to contact me in my Facebook Group:  Brandnol Digital Marketing Group

Subscribe to our Premium Content

Categories: WordPress

Ankur Shrivastava

Ankur Shrivastava is a certified Full Stack Digital Marketing Professional with solid knowledge of Digital Business Transition, SEO, Keyword Research, PPC, Site Audit, Social Media Optimization, Social Media Marketing, Link Building and more.

2 Comments

Pawan · March 15, 2018 at 7:33 pm

Wonderful post. I’m gonna apply it rightaway

    Ankur · March 16, 2018 at 4:09 pm

    Thank you!

Leave a Reply

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

3 Shares
Share
Tweet