Copied To Clipboard

AMP Configuration

NOTE :

Important Points to note to activate Web Push Notification or PWA on your AMP pages.
  1. Your AMP page must pass in validation.
  2. Your site must be on https.

To integrate AMP PWA / Web Push, you will need to add some files to your root folder.
Go to following link (https://push.notifyvisitors.com/brand/webapp/manifest) to configure and download the package.

On downloading the package, you should have :
  • notifyvisitors_push folder
  • service-worker.js

PWA on AMP

1.Add manifest and script in head of the AMP pages

  • Meta Tags and Javascript

            
<meta name="theme-color" content="#000">
<link rel="manifest" href="https://yoursite.com/notifyvisitors_push/chrome/manifest.json">
<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>              
                
            

2. Now add this AMP tag in body and replace "yoursite.com" with you domain

  • PWA on AMP Configuration

            
<amp-install-serviceworker 
    src="https://yoursite.com/service-worker.js" 
    data-iframe-src="https://yoursite.com/notifyvisitors_push/amp/install-serviceworker.html"
    layout="nodisplay">
</amp-install-serviceworker>               
                
            

AMP Web Push

Add this amp-web-push tag inside body tag which loads the all three files.

  • AMP Web Push Extension Configuration

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

NOTE :

Replace yoursite.com with your main domain.

2. Add the script tag given below in your head section. This will load amp-web-push and amp-lightbox library provided by amp project.

  • Javascript


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

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

3. Place this style inside head tag of <style type="text/css" amp-custom> </style>

  • Style


.amp_notification{margin:7px;bottom:7px;border-radius:50%;background-color:red;padding:4px;width:33px;height:33px;box-shadow:2px 12px 14px rgba(0,0,0,0.3);position:fixed;cursor:pointer}.amp_notification:focus,.close-push:focus,.subscribe-btn:focus{outline:0}.lightbox{background:rgba(0,0,0,.9);width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center}.push-desc{color:#fff;padding:20px;text-align:center}.close-push{position:absolute;top:10px;right:10px;height:30px;width:30px;cursor:pointer}.subscribe-btn{background:teal;border:1px solid #fff;color:#fff;text-transform:uppercase;margin:10px;cursor:pointer;line-height:3;width:150px;border-radius:50px;height:41px;font-weight:600}.subscribe-btn amp-img{width:20px;height:20px;position:relative;bottom:-4px;right:5px}.nv-sv-pro{position:absolute;right:6px;text-align:right;bottom:6px;width:100%;margin-bottom:0}.nv-sv-pro a{color:#fff;font-size:10px;display:inline-block;text-decoration:none}.nv-sv-pro a amp-img{display:inline-block;width:90px;height:13px;position:relative;top:3px}.unsubscribe-btn{width:175px;height:75px;clear:both;display:block;margin:auto;position:relative;top:-150px}.unsubscribe-btn button{color:#ccc;background:transparent;border:0;border-bottom:1px solid #ccc}.hide-unsubscribe{display:none;visibility:hidden}.amp-push-icon{box-sizing:border-box;border:2px solid #fff;padding-left:6px;border-radius:50%}.push-icon-right{right:7px}

4.Now place this code inside body tag. This will generate from where user can subscribe to push notification.

  • Subscribe/Unsubscribe widget overlay


<a class="amp_notification push-icon-left" on="tap:my-lightbox" tabindex="0"><svg width="25pt" height="25pt" viewBox="0 0 150 150" version="1.1" xmlns="http://www.w3.org/2000/svg" class="amp-push-icon"><path fill="red" d=" M 0.00 0.00 L 150.00 0.00 L 150.00 150.00 L 0.00 150.00 L 0.00 88.50 C 11.05 88.35 22.10 88.64 33.15 88.46 C 33.14 85.49 33.14 82.51 33.15 79.54 C 22.10 79.36 11.05 79.64 0.00 79.52 L 0.00 71.84 C 13.07 71.74 26.14 72.31 39.20 71.74 C 38.92 68.34 38.81 64.92 38.88 61.51 C 25.92 61.49 12.96 61.50 0.00 61.50 L 0.00 54.09 C 8.35 53.33 16.74 54.58 25.11 54.12 C 31.70 53.53 38.31 54.55 44.89 53.80 C 44.82 50.38 44.88 46.95 45.17 43.54 C 30.11 43.39 15.05 43.59 0.00 43.52 L 0.00 0.00 Z"></path><path fill="#ffffff" d=" M 75.93 20.92 C 76.72 20.84 77.51 20.75 78.30 20.67 C 81.65 22.00 84.02 24.65 85.36 27.94 C 87.69 29.33 90.52 29.84 92.96 31.09 C 94.99 32.81 96.77 34.79 98.42 36.88 C 99.82 40.12 100.29 43.64 101.44 46.96 C 101.60 49.61 101.65 52.27 101.98 54.91 C 102.86 59.90 102.88 65.00 103.91 69.99 C 107.23 82.28 114.47 93.43 124.60 101.20 C 124.74 104.59 124.72 107.97 124.69 111.36 C 112.46 110.79 100.20 111.69 87.99 110.81 C 86.33 110.95 84.67 111.13 83.01 111.17 C 74.31 110.66 65.64 111.37 56.93 111.14 C 52.31 110.34 47.67 111.32 43.03 111.19 C 38.45 111.15 33.86 111.21 29.27 111.35 C 29.16 108.00 29.09 104.65 29.34 101.31 C 32.17 99.17 34.72 96.71 37.25 94.23 C 40.55 90.14 43.75 85.89 45.92 81.08 C 47.31 78.55 48.26 75.81 49.26 73.12 C 50.87 67.05 51.64 60.87 51.80 54.60 L 52.40 54.60 C 52.33 47.90 53.33 40.81 57.10 35.12 C 59.80 31.54 63.96 29.59 68.14 28.29 C 69.75 25.84 71.24 23.23 73.70 21.49 C 74.25 21.35 75.37 21.06 75.93 20.92 Z"></path><path fill="#ffffff" d=" M 0.00 61.50 C 12.96 61.50 25.92 61.49 38.88 61.51 C 38.81 64.92 38.92 68.34 39.20 71.74 C 26.14 72.31 13.07 71.74 0.00 71.84 L 0.00 61.50 Z"></path><path fill="#ffffff" d=" M 0.00 79.52 C 11.05 79.64 22.10 79.36 33.15 79.54 C 33.14 82.51 33.14 85.49 33.15 88.46 C 22.10 88.64 11.05 88.35 0.00 88.50 L 0.00 79.52 Z"></path><path fill="#ffffff" d=" M 74.02 115.77 C 75.98 115.74 77.94 115.76 79.90 115.84 C 81.74 116.63 83.65 117.19 85.56 117.78 C 85.81 119.80 85.68 121.82 85.38 123.81 C 83.56 125.74 81.42 127.31 79.09 128.56 C 77.68 128.55 76.26 128.52 74.85 128.49 C 71.00 126.81 65.97 122.24 68.76 117.83 C 70.54 117.20 72.30 116.54 74.02 115.77 Z"></path></svg></a> <amp-lightbox id="my-lightbox" layout="nodisplay"><div class="lightbox" tabindex="0"> <amp-img class="close-push" tabindex="0" role="button" height="30" width="30" layout="responsive" src="https://s3.amazonaws.com/notifyvisitors/site/amp/push-close.png" on="tap:my-lightbox.close"></amp-img><div class="push-desc"> <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="220" height="175"><p>Subscribe to our push notification for regular updates...</p> <button class="subscribe subscribe-btn" on="tap:amp-web-push.subscribe"> <amp-img class="subscribe-icon" width="20" height="20" layout="fixed" src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4="> </amp-img> Subscribe </button> </amp-web-push-widget> <amp-web-push-widget class="unsubscribe-btn show-unsubscribe" visibility="subscribed" layout="fixed" width="220" height="175"><p>You have been already subscribed to our push notification...</p> <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">Unsubscribe</button> </amp-web-push-widget></div><p class="nv-sv-pro"> <a href="https://www.notifyvisitors.com?utm_source=poweredby_amp_push" target="_blank">poweredBy <amp-img layout="responsive" src="https://s3.amazonaws.com/tagnpin/static/brandimages/custom/notifylogo_whilte.png" width="100" height="20"></amp-img></a></p></div></amp-lightbox>

WEB PUSH FAQs

Q. How to change notification icon color ?

A. To change notification icon color, change background color of .amp_notification class and fill color in svg tag.

Q. How to change notification icon position?

A. By default notification icon is positioned on bottom-left,you can change notification icon position to bottom-right by replacing push-icon-left class with push-icon-right .

Q. How to change color of subscribe/unsubscribe button?

A. You can change subscribe/unsubscribe button color by changing background-color of subscribe-btn class.

Q. Can we remove unsubscribe button?

A. No, you can't remove unsubscribe button from AMP Web push page because it is recommended by google for better user experiences, but yo can hide this on your page by replacing show-unsubscribe to hide-unsubscribe class.