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: //..
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: //..
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>
Copy the following code, paste it before </ body>. Please replace the yellow mark with your OneSignal APP ID. And change your LABEL.os.tc with the address of your OneSignal label, for example amp-blogger.os.tc. 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:
For a more attractive appearance, copy this CSS code, and paste it under <style amp-custom = 'amp-custom'>:
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 Label.os.tc.
If there are questions, please discuss in the comments column.
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="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>Copy the following code, paste it before </ body>. Please replace the yellow mark with your OneSignal APP ID. And change your LABEL.os.tc with the address of your OneSignal label, for example amp-blogger.os.tc. For how to make it, I explained it at PART 1 Article.
<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>
<!-- 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>
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 Label.os.tc.
If there are questions, please discuss in the comments column.