Push Notifications on your Accelerated Mobile Pages(AMP) using Wingify Engage

#Overview

An Accelerated Mobile Page (or AMP, for short) is a project from Google and Twitter designed to make really fast mobile pages. In essence, it's a stripped-down form of HTML that loads your website faster on mobile browsers.

Note: AMP Feature is enabled only for HTTPS Implementation of Wingify Engage.

#How to Set Up Wingify Engage on your AMP?

1. For all AMP pages on your site that you'd like to enable web push notifications, add the following script within your AMP page's section to enable the components:

   <script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
   

2. Configure the AMP Push Notifications extension by downloading the files below(right-click these files and select 'Save Link As...') and adding them to the root directory (/) of your website:                               i. amp-web-push-helper-frame.html
   ii. amp-web-push-permission-dialog.html

3. Add the Code in your AMP site's to initialize amp-web-push

   <amp-web-push id="amp-web-push" layout="nodisplay"  
   helper-iframe-url="https://yourdomain.com/amp-web-push-helper-frame.html"  
   permission-dialog-url="https://yourdomain.com/amp-web-push-permission-dialog.html"  
   service-worker-url="https://yourdomain.com/pushcrew-sw.js"></amp-web-push>
   

   Note: Replace ‘YOURDOMAIN’ with the domain where your users subscribe and ensure you enter the 'service-worker-url' path with the path of your service worker file(pushcrew-sw.js) placed in the root directory of your website.

4. Then, add the code in the to show the Opt-in on your AMP Pages:

   <!-- A subscription widget -->  
   <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="48">  
       <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,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNTI1MjUgMjRDNy45Njg3NyAyNCA2LjcwNjIxIDIyLjczODYgNi43MDYyMSAyMS4xODA5SDEyLjM0MzlDMTIuMzQ0MiAyMi43Mzg2IDExLjA4MTcgMjQgOS41MjUyNSAyNFpNMTkuMDUxMiAxOC4zNTQyQzE5LjA1MTIgMTkuMzk2NiAxOC4yMDU4IDE5LjQ2NTEgMTcuMTY0MSAxOS40NjUxSDEuODg2MTFDMC44NDQwMjQgMTkuNDY1MSAwIDE5LjM5NjUgMCAxOC4zNTQxVjE4LjE3NDVDMCAxNy40MjQ5IDAuNDQwMjI4IDE2Ljc4MyAxLjA3Mjc0IDE2LjQ3ODVMMS42NzE1NiAxMS4zMDk2QzEuNjcxNTYgNy41MjU1MSA0LjM0NzYzIDQuMzY3MTUgNy45MTAyMiAzLjYyMjAxVjEuNjE1MzNDNy45MTAyMiAwLjcyMzMwNCA4LjYzMzUyIDAgOS41MjU5OCAwQzEwLjQxOCAwIDExLjE0MTMgMC43MjMzMDQgMTEuMTQxMyAxLjYxNTMzVjMuNjIyMTZDMTQuNzAzOSA0LjM2NzE1IDE3LjM4IDcuNTI1MjIgMTcuMzggMTEuMzA5N0wxNy45Nzg4IDE2LjQ3OTRDMTguNjExMyAxNi43ODQzIDE5LjA1MTIgMTcuNDI1MSAxOS4wNTEyIDE4LjE3NDdWMTguMzU0MloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=">  
           </amp-img>  
           Subscribe to updates  
       </button>  
   </amp-web-push-widget>  
     
      
   <!-- An unsubscription widget -->  
   <amp-web-push-widget visibility="subscribed" layout="fixed" width="300" height="48">  
       <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">Unsubscribe from updates</button>  
   </amp-web-push-widget>
   

5. Add the styling for your widget using the CSS below:

<style amp-custom>  
 amp-web-push-widget button.subscribe,  
 amp-web-push-widget button.unsubscribe {  
 display: inline-flex;  
 width: 100%;  
 align-items: center;  
 justify-content: center;  
 border-radius: 4px;  
 border: 0;  
 box-sizing: border-box;  
 margin: 0;  
 padding: 0 25px;  
 cursor: pointer;  
 outline: none;  
 font-size: 16px;  
 font-weight: 600;  
 background: #3D7CF5;  
 color: white;  
 height: 48px;  
 line-height: 48px;  
 }   
 amp-web-push-widget button.subscribe .subscribe-icon {  
 margin-right: 16px;  
 }  
 amp-web-push-widget button.unsubscribe {  
 background-color: #fff;  
 border: 1px solid #D9DDE1;  
 color: #788290;  
 padding: 0 40px;  
 }  
</style>

After you have completed the above-mentioned steps, Wingify Engage will be live on your AMP pages. Your visitors will be shown a Two-Step Opt-in to become a subscriber:

#Need more help?

For further assistance or more information, contact Wingify Support.