{"id":1077,"date":"2017-10-23T07:45:12","date_gmt":"2017-10-23T07:45:12","guid":{"rendered":"https:\/\/www.nvecta.com\/blog\/?p=1077"},"modified":"2026-02-23T12:53:54","modified_gmt":"2026-02-23T12:53:54","slug":"how-to-integrate-web-push-notification-on-amp","status":"publish","type":"post","link":"https:\/\/www.nvecta.com\/blog\/how-to-integrate-web-push-notification-on-amp\/","title":{"rendered":"How To Integrate Web Push Notification on AMP"},"content":{"rendered":"<p><a href=\"https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/10\/Integrate-Web-Push-Notification-on-AMP1.png\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\" wp-image-11735 aligncenter\" src=\"https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/10\/Integrate-Web-Push-Notification-on-AMP1.png\" alt=\"integrate web push notification\" width=\"569\" height=\"300\" srcset=\"https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/10\/Integrate-Web-Push-Notification-on-AMP1.png 700w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/10\/Integrate-Web-Push-Notification-on-AMP1.png 300w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/10\/Integrate-Web-Push-Notification-on-AMP1.png 370w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/10\/Integrate-Web-Push-Notification-on-AMP1.png 270w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/10\/Integrate-Web-Push-Notification-on-AMP1.png 570w\" sizes=\"(max-width: 569px) 100vw, 569px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">AMP \u2013 or <a href=\"https:\/\/www.nvecta.com\/blog\/accelerated-mobile-pages-explained\">Accelerated Mobile Pages<\/a> \u2013 is a project backed by Google that aims to make the loading of mobile web pages much faster.<\/span><\/p>\n<p><!--more--><\/p>\n<p>According to Google, 40% of people abandon a website that takes more than 3 seconds to load. This demonstrates that users expect websites to load almost instantaneously.<\/p>\n<p>Essentially, AMP pages work by using a lighter version of HTML that allows websites to load much faster than regular HTML.<\/p>\n<p>As google give AMP pages more importance in search engines, you will get hell out of traffic. So it will be better idea to implement web push notifications on AMP pages and increase your subscribers.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.nvecta.com\/blog\/how-to-integrate-web-push-notification-on-amp\/#How_to_implement_Web_Push_Notification_on_AMP_pages\" >How to implement Web Push Notification on AMP pages<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.nvecta.com\/blog\/how-to-integrate-web-push-notification-on-amp\/#Add_this_amp-web-push_tag_in_html_page_which_loads_the_all_three_files\" >Add this amp-web-push tag in html page which loads the all three files.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.nvecta.com\/blog\/how-to-integrate-web-push-notification-on-amp\/#Now_question_is_for_what_purpose_we_are_adding_these_three_files\" >Now question is for what purpose we are adding these three files<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"How_to_implement_Web_Push_Notification_on_AMP_pages\"><\/span><b>How to implement Web Push Notification on AMP pages<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>There are 3 simple steps to implement Web Push Notifications:<\/strong><\/p>\n<p><b>1<\/b><span style=\"font-weight: 400;\">. Start with an empty html page with basic html structure. Add the script tag given below in your head section. This will load amp-web-push library provided by amp project.<\/span><\/p>\n<div style=\"width: 100%; *\/ background-color: #efefef; color: #b1b1b1; padding: 10px 10px 10px 20px; margin: 10px; border-left: 2px solid #f00;\">\n<p>&lt;script async custom-element=&#8221;amp-web-push&#8221;<br>\nsrc=&#8221;<a href=\"https:\/\/cdn.ampproject.org\/v0\/amp-web-push-0.1.js\" target=\"_blank\" rel=\"noopener\">https:\/\/cdn.ampproject.org\/v0\/amp-web-push-0.1.js<\/a>&#8220;&gt;<\/p>\n<\/div>\n<p><b>2<\/b><span style=\"font-weight: 400;\">. <\/span><span style=\"font-weight: 400;\">Now create a widget to give user to subscribe to push notification. Make two buttons , one for subscribe and one for unsubscribe. You can remove unsubscribe button but it will recommended by google for better user experiences. Add this code in body part.<\/span><\/p>\n<div style=\"width: 100%; *\/ background-color: #efefef; color: #b1b1b1; padding: 10px 10px 10px 20px; margin: 10px; border-left: 2px solid #f00;\">\n<p><span style=\"color: #3366ff;\"><i><span style=\"font-weight: 400;\">&lt;!&#8211; A subscription widget &#8211; subscribe button &#8211;&gt;<\/span><\/i><\/span><br>\n<span style=\"font-weight: 400;\">&lt;<\/span><b>amp-web-push-widget<\/b><span style=\"font-weight: 400;\">visibility<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">&#8220;<span style=\"color: #ff0000;\">unsubscribed<\/span>&#8220;<\/span> <span style=\"font-weight: 400;\">layout<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">&#8220;<span style=\"color: #ff0000;\">fixed<\/span>&#8220;<\/span> <span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">&#8220;<span style=\"color: #ff0000;\">250<\/span>&#8220;<\/span> <span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">&#8220;<span style=\"color: #ff0000;\">80<\/span>&#8220;<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;<\/span><b>button<\/b><span style=\"font-weight: 400;\">on<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">&#8220;tap:amp-web-push.subscribe&#8221;<\/span><span style=\"font-weight: 400;\">&gt;Subscribe to push Notifications&lt;\/<\/span><b>button<\/b><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"><br>\n<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><b>amp-web-push-widget<\/b><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<\/div>\n<div style=\"width: 100%; *\/ background-color: #efefef; color: #b1b1b1; padding: 10px 10px 10px 20px; margin: 10px; border-left: 2px solid #f00;\">\n<p><span style=\"color: #3366ff;\"><i><span style=\"font-weight: 400;\">&lt;!&#8211; An unsubscription widget &#8211; unsubscribe button &#8211;&gt;<\/span><\/i><\/span><\/p>\n<p><span style=\"color: #207191;\"><span style=\"font-weight: 400;\">&lt;<\/span><b>amp-web-push-widget<\/b><\/span> <span style=\"font-weight: 400; color: #4e8fcf;\">visibility<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">&#8220;<span style=\"color: #ff0000;\">subscribed<\/span>&#8220;<\/span> <span style=\"font-weight: 400;\">layout<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">&#8220;<span style=\"color: #ff0000;\">fixed<\/span>&#8220;<\/span> <span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">&#8220;<span style=\"color: #ff0000;\">250<\/span>&#8220;<\/span> <span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">&#8220;<span style=\"color: #ff0000;\">80<\/span>&#8220;<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"><br>\n<\/span><span style=\"font-weight: 400;\"> &nbsp;&lt;<\/span><b>button<\/b> <span style=\"font-weight: 400;\">on<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">&#8220;<span style=\"color: #ff0000;\">tap:amp-web-push.unsubscribe<\/span>&#8220;<\/span><span style=\"font-weight: 400;\">&gt;Unsubscribe from push Notifications&lt;\/<\/span><b>button<\/b><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\"><br>\n<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><b>amp-web-push-widget<\/b><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<\/div>\n<p><strong>Note<\/strong> : Visibility tag is required here. Visibility will take three value namely subscribe , unsubscribe or blocked . Widget will show and hide on the basis of user&#8217;s subscription state .For ex. first time user will see widget with visibility unsubscribe and if user subscribe the push, he will see widget with visibility subscribe .<\/p>\n<p>3 . Now it&#8217;s time to install service worker and other configuration. For this you have to integrate three files in your root folder of our web site and your site must be on https. This three files are as following:<\/p>\n<ol>\n<li><a href=\"https:\/\/cdn.ampproject.org\/v0\/amp-web-push-helper-frame.html\" target=\"_blank\" rel=\"noopener\">helper-iframe-url<\/a><\/li>\n<li><a href=\"https:\/\/cdn.ampproject.org\/v0\/amp-web-push-permission-dialog.html\" target=\"_blank\" rel=\"noopener\">permission-dialog-url<\/a><\/li>\n<li>service-worker-url<\/li>\n<\/ol>\n<p>You can download these files by clicking on them.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Add_this_amp-web-push_tag_in_html_page_which_loads_the_all_three_files\"><\/span>Add this amp-web-push tag in html page which loads the all three files.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div style=\"width: 100%; *\/ background-color: #efefef; color: #b1b1b1; padding: 10px 10px 10px 20px; margin: 10px; border-left: 2px solid #f00;\">\n<p><span style=\"font-weight: 400;\">&lt;<\/span><b>amp-web-push<\/b><span style=\"font-weight: 400;\"><br>\n<\/span><span style=\"font-weight: 400;\"> &nbsp;<\/span><span style=\"font-weight: 400;\">helper-iframe-url<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">&#8220;<a href=\"https:\/\/example.com\/helper-iframe.html\" target=\"_blank\" rel=\"noopener\">https:\/\/example.com\/helper-iframe.html<\/a>&#8220;<\/span><span style=\"font-weight: 400;\"><br>\n<\/span><span style=\"font-weight: 400;\"> &nbsp;<\/span><span style=\"font-weight: 400;\">permission-dialog-url<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">&#8220;<a href=\"https:\/\/example.com\/permission-dialog.html\" target=\"_blank\" rel=\"noopener\">https:\/\/example.com\/permission-dialog.html<\/a>&#8220;<\/span><span style=\"font-weight: 400;\"><br>\n<\/span><span style=\"font-weight: 400;\"> &nbsp;<\/span><span style=\"font-weight: 400;\">service-worker-url<\/span><span style=\"font-weight: 400;\">=<\/span><span style=\"font-weight: 400;\">&#8220;<a href=\"https:\/\/example.com\/service-worker.js\" target=\"_blank\" rel=\"noopener\">https:\/\/example.com\/service-worker.js<\/a>&#8220;<\/span><span style=\"font-weight: 400;\"><br>\n<\/span><span style=\"font-weight: 400;\">&gt;&lt;\/<\/span><b>amp-web-push<\/b><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Now_question_is_for_what_purpose_we_are_adding_these_three_files\"><\/span>Now question is for what purpose we are adding these three files<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>helper-iframe-url<\/strong> : This page works as a mediator between amp and service worker, to enable communication which subscribes and unsubscribes the user. Notification permission status is also determined by this page.<\/p>\n<p><strong>Permission-dialog-url<\/strong> : This page is for user interaction which open a page as a pop up and prompts for notification permissions.<\/p>\n<p><strong>Service-worker-url<\/strong> : As you know it will run in background which subscribe, unsubscribe the users or display notifications to them.<\/p>\n<p>If you don&#8217;t know about Service Workers, you can use third party sites which provide complete solution for <a href=\"https:\/\/www.nvecta.com\/blog\/elaborative-guide-on-push-notifications\/\">Web Push Notifications<\/a> like <a href=\"https:\/\/www.notifyvisitors.com\" target=\"_blank\" rel=\"noopener\">NotifyVisitors<\/a><\/p>\n<div style=\"background: #ffff; border-left: 3px solid #439B4C;\">\n<p style=\"padding: 10px;\"><span style=\"color: #00000; font-size: 20px;\">Important Points to note to activate Web Push Notification on your <a href=\"https:\/\/www.nvecta.com\/blog\/8-advantages-of-google-accelerated-mobile-pages\">AMP pages<\/a>.<\/span><\/p>\n<\/div>\n<ol>\n<li>Your <a href=\"https:\/\/www.nvecta.com\/blog\/8-advantages-of-google-accelerated-mobile-pages\">AMP page<\/a> must pass in validation.<\/li>\n<li>Your site must be on https.<\/li>\n<li>All three files mentioned above must be placed in root folder<\/li>\n<\/ol>\n\n\n<div id=\"embeded_cta5\"> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>AMP \u2013 or Accelerated Mobile Pages \u2013 is a project backed by Google that aims to make the loading of mobile web pages much faster.<\/p>\n","protected":false},"author":5,"featured_media":7730,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[87,103,59,36,104],"class_list":["post-1077","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accelerated-mobile-pages","tag-amp","tag-amp-integration","tag-amp-pages","tag-web-push","tag-web-push-integration"],"_links":{"self":[{"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/posts\/1077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/comments?post=1077"}],"version-history":[{"count":25,"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/posts\/1077\/revisions"}],"predecessor-version":[{"id":16008,"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/posts\/1077\/revisions\/16008"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/media\/7730"}],"wp:attachment":[{"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/media?parent=1077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/categories?post=1077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nvecta.com\/blog\/wp-json\/wp\/v2\/tags?post=1077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}