Saturday, August 25, 2018

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

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