Great News! Try our new tool to convert img to amp-img. Try Now!

Saturday, August 25, 2018

Setup OneSignal Web Push Notification in AMP Blogger [Part 2]

Setup OneSignal Web Push Notification in AMP Blogger [Part 2]. Implement Web Push Notification in AMP Blogger without Javascript

Install and Setup Web Push Notification Subscribe Button in Google AMP Blogger Template

Warning! This Tutorial is for AMP Page Only, Don't implement this on Non-AMP Page, it's will do nothing
Go to: [Part 1] Setup OneSignal Push Notif in AMP Blogger

Web Push Notification is a web service that website provides a simple and effective way to reconnect with users.

Web Push Notification is very effective, so that your visitors receive notifications of the latest updates from your website. Users can press the "subscribe button" to get to the latest updates from web.

Currently there are many third party applications that offer this service, both free and paid. Among them, there are OneSignal, SendPulse, UrbanAirship, and others.

They distribute the latest messages or updates from your website, with a very easy configuration and support both on http: // and https: //.. 

Go to: [Part 1] Setup OneSignal Push Notif in AMP Blogger

Configuring Button Subscription --OneSignal AMP Web Push Notification on Blogger AMP

Unlike in the Non-AMP page, which is enough to enter the JavaScript code provided by OneSignal, the subscribe button will appear by itself. At AMP Page, you need a subscribe button, which can later be clicked by your website visitor.

Here's how to setup OneSignal amp-web-push  on the Blogger AMP Template.

Copy the following amp-web-push component, copy before the code </ head>

<script async='async' custom-element="amp-web-push" src=""></script>

Copy the following code, paste it before </ body>. Please replace the yellow mark with your OneSignal APP ID. And change your with the address of your OneSignal label, for example For how to make it, I explained it at PART 1 Article.


Then we will put the button, I implemented the button in the body of the article, precisely at the end of the article. Search for <data: post.body />, paste the following code below it:

<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="245" height="45">
  <button class="subscribe" on="tap:amp-web-push.subscribe">
    Subscribe to updates

For a more attractive appearance, copy this CSS code, and paste it under <style amp-custom = '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:#fff;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)}

Please SAVE changes to your template. Then the results will be like this:

Try testing the page, whether the subscribe button has appeared or not. If it doesn't appear, please make sure you have correctly replaced your APP ID and

If there are questions, please discuss in the comments column.