{"id":4925,"date":"2018-09-13T13:27:38","date_gmt":"2018-09-13T13:27:38","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=4925"},"modified":"2019-06-24T07:34:50","modified_gmt":"2019-06-24T07:34:50","slug":"amp-popup","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/amp-popup\/","title":{"rendered":"How to install and use the Popup for AMP"},"content":{"rendered":"<p><strong>This tutorial helps you to display the pop-up\u00a0notifications and It requires the Popup for AMP\u00a0<a href=\"https:\/\/ampforwp.com\/amp-popup\/\">extension.<\/a><\/strong><\/p>\n<p><strong>1.<\/strong> Download and Install the extension from the account area.<\/p>\n<p><strong>2.<\/strong> Upload and Activate it.<\/p>\n<p><strong>3.<\/strong> Now the <strong>AMP Popup<\/strong>\u00a0option will be displayed in the WordPress options panel.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-4926\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1.png\" alt=\"\" width=\"626\" height=\"308\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1.png 626w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1-300x148.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1-50x25.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1-60x30.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1-100x49.png 100w\" sizes=\"(max-width: 626px) 100vw, 626px\" \/><\/a><\/p>\n<p><strong>4.<\/strong> After clicking the <strong>AMP Popup<\/strong> option you will be able to see the\u00a0add your new pop options.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-4927\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-1.png\" alt=\"\" width=\"652\" height=\"303\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-1.png 652w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-1-300x139.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-1-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-1-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-1-100x46.png 100w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/a><\/p>\n<p><strong>5.<\/strong> Following you may add, the image of your own choice with heading and paragraph.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3-1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-4928\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3-1.png\" alt=\"\" width=\"1285\" height=\"672\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3-1.png 1285w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3-1-300x157.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3-1-768x402.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3-1-1024x536.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3-1-50x26.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3-1-60x31.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3-1-100x52.png 100w\" sizes=\"(max-width: 1285px) 100vw, 1285px\" \/><\/a><\/p>\n<p><strong>6.<\/strong> Also, you can apply the condition and timing of popup with Pop Up Background Color and Content Background Color.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-11504\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2.png\" alt=\"\" width=\"867\" height=\"220\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2.png 867w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-300x76.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-768x195.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-50x13.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-60x15.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-100x25.png 100w\" sizes=\"(max-width: 867px) 100vw, 867px\" \/><\/a><\/p>\n<p><strong>7.<\/strong> <strong>Enter the Time to Delay the Pop up:\u00a0 <\/strong>The Time Delay is an event\u00a0that displays a popup after a preset time starting from when a visitor first opens a post or page.<\/p>\n<p><strong>8.<\/strong> Here you can modify &#8220;Pop Up Background Color&#8221; as well as &#8220;Content Background Color&#8221;.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-11505\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3.png\" alt=\"\" width=\"867\" height=\"241\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3.png 867w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3-300x83.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3-768x213.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3-50x14.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3-60x17.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/3-100x28.png 100w\" sizes=\"(max-width: 867px) 100vw, 867px\" \/><\/a><\/p>\n<p><strong>9.<\/strong> Now you can create an <strong>AMP Popup<\/strong> as many as you want.<\/p>\n<h3><strong>The Output of AMP Popup<\/strong><\/h3>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1-1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-11502\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1-1.png\" alt=\"\" width=\"1349\" height=\"693\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1-1.png 1349w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1-1-300x154.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1-1-768x395.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1-1-1024x526.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1-1-50x26.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1-1-60x31.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/1-1-100x51.png 100w\" sizes=\"(max-width: 1349px) 100vw, 1349px\" \/><\/a><\/p>\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>This tutorial helps you to display the pop-up\u00a0notifications and It requires the Popup for AMP\u00a0extension. 1. Download and Install the extension from the account area. 2. Upload and Activate it. 3. Now the AMP Popup\u00a0option will be displayed in the WordPress options panel. 4. After clicking the AMP Popup option&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[157],"ht-kb-tag":[156],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/4925"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=4925"}],"version-history":[{"count":20,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/4925\/revisions"}],"predecessor-version":[{"id":11514,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/4925\/revisions\/11514"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=4925"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=4925"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=4925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}