Web Push

Add amp web push to let user subscribe for push.

Suggest Edits

AMP WEB PUSH

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

📘

Note:

Replace yoursite.com with your main domain.

<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>
  1. Add the script tag given below in your head section. It will load amp-web-push and amp-light box library, that is provided by amp project.
<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>
  1. Place these styles inside head tag of <style type="text/css" amp-custom> </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}
  1. Next, place this code inside the body tag. It will generate the path, from where user can subscribe to push notification.
<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. Change background color of .amp_notification class and fill color in svg tag to change the notification icon color.

Q. How to change notification icon position?

A. The default notification icon is positioned on bottom-left,you can change the position of notification icon to the bottom-right by pacing the push-icon-left class with push-icon-right .

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

A. You can change subscribe/unsubscribe button's color by changing the 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 you can hide this on your page by replacing the show-unsubscribe to hide-unsubscribe class.

Updated almost 4 years ago

What’s Next