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

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

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="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>

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">

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