{"id":20428,"date":"2021-07-01T14:04:50","date_gmt":"2021-07-01T11:04:50","guid":{"rendered":"https:\/\/plumrocket.com\/docs\/?p=20428"},"modified":"2021-07-23T05:47:15","modified_gmt":"2021-07-23T09:47:15","slug":"how-to-display-newsletter-popup-manually","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-newsletter-popup\/v4\/devguide\/display-manually","title":{"rendered":"How to Display Newsletter Popup Manually"},"content":{"rendered":"\n

In order to display Magento 2 Newsletter Popup<\/a> manually – you will have to perform the following steps:<\/p>\n\n\n\n

Select “Display Popup Method” = “Manually” in your Magento 2 backend as shown below:<\/h3>\n\n\n\n
\"Magento<\/a><\/figure>\n\n\n\n

“Load” and “Show” newsletter popups using the following JavaScript methods below:<\/h3>\n\n\n\n

There are two available methods: .load() and .show(). “Load” method allows to load newsletter popup for Magento 2 content from server in background without displaying it. Then “Show” method will display the popup once it’s loaded.<\/p>\n\n\n\n

<\/div>
.load()<\/code><\/pre><\/div>\n\n\n\n
Load popup without any arguments. This method is executed automatically when the extension is initialized.<\/p>\n\n\n\n
<\/div>
.load([id][, callback ])<\/code><\/pre><\/div>\n\n\n\n
Load popup by specified newsletter popup ID. There is no need to check if the popup has been already loaded. This method will not load the same popup twice. You can find popup ID by going to your magento back-end, then Plumrocket -> Newsletter Popup -> Manage Newsletter Popups -> column “ID”.<\/p>\n\n\n\n
If supplied, the callback is fired once the newsletter popup is loaded. The callback passed to .load() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other events and run other JavaScript code. It is hard to predict the overall load time of the newsletter popup from server and therefore we strongly recommend to use callback function. If the popup is already loaded on page then the callback will be executed immediately.<\/p>\n\n\n\n
callback: function([bool<\/span><\/em> status][, bool<\/span><\/em> just_loaded])<\/span><\/strong><\/p>\n\n\n\n
Parameters<\/em><\/strong><\/p>\n\n\n\n
status<\/strong> \u2014 returns “true”, if the popup is available to be displayed, otherwise returns “false”. <\/p>\n\n\n\n
just_loaded<\/strong> \u2014 returns “true”, if the popup was just loaded during this function call, otherwise returns “false” if it was previously loaded on page.<\/p>\n\n\n\n
<\/div>
.show()<\/code><\/pre><\/div>\n\n\n\n
Display popup on the page after it was loaded with the .load() method. It’s an easy way to display popup without providing any arguments. If on the same page two popups are loaded – one using automatic “Display Popup Method” (such as “after the time delay” or “when leaving the site”) and the second one using the “manual” display method, then the automatically loaded popup will be displayed. If you have loaded two or more popups using the “manual” display popup method, then the first loaded popup will be displayed.<\/p>\n\n\n\n
<\/div>
.show([id][, callback ])<\/code><\/pre><\/div>\n\n\n\n
Display popup by specified newsletter popup ID. This newsletter popup must be previously loaded using the .load() method. If a popup with a different “ID” is currently displayed on the page while the .show([id]) is being executed, then the previous popup will be hidden and the requested popup is displayed instead. There is no need to check for overlapping popups.<\/p>\n\n\n\n
callback: function([bool<\/span><\/i> status])<\/span><\/strong><\/p>\n\n\n\n
Parameters<\/em><\/strong><\/p>\n\n\n\n
status<\/strong> \u2014 returns “true”, if the popup exists and displayed on page, otherwise returns “false”.<\/p>\n\n\n\n
EXAMPLES:<\/i><\/p>\n\n\n\n
Example 1:<\/p>\n\n\n\n
Let’s load & display newsletter popup with ID=5 and output a message to the Web Console using our callback function:<\/strong><\/p>\n\n\n\n
<\/div>
<script type=\"text\/javascript\">\n    prnewsletterPopup.load(5, function(status, just_loaded) {\n        if (just_loaded) {\n            console.log('Well done, Sir. The popup was just loaded.');\n            \/\/ alert('This is another successful newsletter load message!');\n            prnewsletterPopup.show(5);\n        }\n    }\n<\/script><\/code><\/pre><\/div>\n\n\n\n
Example 2:<\/p>\n\n\n\n
Load and display any available newsletter popup. Please note that the “.load()” method without arguments is not required, it is executed automatically when the extension is initialized.<\/strong><\/p>\n\n\n\n
<\/div>
<script type=\"text\/javascript\">\n    prnewsletterPopup.show();\n<\/script><\/code><\/pre><\/div>\n\n\n\n
Example 3:<\/p>\n\n\n\n
Load and display newsletter popup with ID=5 on link click<\/strong><\/p>\n\n\n\n
<\/div>
<script type=\"text\/javascript\">\n    prnewsletterPopup.load(5);\n<\/script>\n<a href=\"javascript:void(0);\" onclick=\"return prnewsletterPopup.show(5)\">\n    See Newsletter Popup\n<\/a><\/code><\/pre><\/div>\n\n\n\n
Example 4:<\/p>\n\n\n\n
In this example, we are trying to display any default newsletter popup on page (no matter what ID). If this attempt was unsuccessful, then we will try to load and show popup ID=3.<\/strong><\/p>\n\n\n\n
<\/div>
<script type=\"text\/javascript\">\n    prnewsletterPopup.show(function(status) {\n        if (status == false) {\n            prnewsletterPopup.load(3, function(status) {\n                prnewsletterPopup.show();\n            });\n        }\n    });\n<\/script><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
In order to display Magento 2 Newsletter Popup manually – you will have to perform the following steps: Select “Display Popup Method” = “Manually” in your Magento 2 backend as shown below: “Load” and “Show” newsletter popups using the following JavaScript methods below: There are two available methods: .load() and .show(). “Load” method allows to … <\/p>\n
Continue reading “How to Display Newsletter Popup Manually”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[286],"tags":[],"yoast_head":"\nHow to Display Newsletter Popup Manually - Plumrocket Documentation<\/title>\n<meta name=\"description\" content=\"In order to display Magento 2 Newsletter Popup manually - you will have to perform the following steps: Select "Display Popup Method" = "Manually" in your\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/docs\/magento-newsletter-popup\/v4\/devguide\/display-manually\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display Newsletter Popup Manually\" \/>\n<meta property=\"og:description\" content=\"In order to display Magento 2 Newsletter Popup manually - you will have to perform the following steps: Select "Display Popup Method" = "Manually" in your\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/docs\/magento-newsletter-popup\/v4\/devguide\/display-manually\" \/>\n<meta property=\"og:site_name\" content=\"Plumrocket Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-01T11:04:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-23T09:47:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2020\/05\/Magento_2_newsletter_popup_developer27s_guide.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Plumrocket\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Display Newsletter Popup Manually - Plumrocket Documentation","description":"In order to display Magento 2 Newsletter Popup manually - you will have to perform the following steps: Select \"Display Popup Method\" = \"Manually\" in your","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/plumrocket.com\/docs\/magento-newsletter-popup\/v4\/devguide\/display-manually","og_locale":"en_US","og_type":"article","og_title":"How to Display Newsletter Popup Manually","og_description":"In order to display Magento 2 Newsletter Popup manually - you will have to perform the following steps: Select \"Display Popup Method\" = \"Manually\" in your","og_url":"https:\/\/plumrocket.com\/docs\/magento-newsletter-popup\/v4\/devguide\/display-manually","og_site_name":"Plumrocket Documentation","article_published_time":"2021-07-01T11:04:50+00:00","article_modified_time":"2021-07-23T09:47:15+00:00","og_image":[{"url":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2020\/05\/Magento_2_newsletter_popup_developer27s_guide.jpg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Plumrocket","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/plumrocket.com\/docs\/#website","url":"https:\/\/plumrocket.com\/docs\/","name":"Plumrocket Documentation","description":"Extensions docs, troubleshootings etc.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plumrocket.com\/docs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/magento-newsletter-popup\/v4\/devguide\/display-manually#primaryimage","inLanguage":"en-US","url":"\/docs\/wp-content\/uploads\/2020\/05\/Magento_2_newsletter_popup_developer27s_guide.jpg","contentUrl":"\/docs\/wp-content\/uploads\/2020\/05\/Magento_2_newsletter_popup_developer27s_guide.jpg"},{"@type":"WebPage","@id":"https:\/\/plumrocket.com\/docs\/magento-newsletter-popup\/v4\/devguide\/display-manually#webpage","url":"https:\/\/plumrocket.com\/docs\/magento-newsletter-popup\/v4\/devguide\/display-manually","name":"How to Display Newsletter Popup Manually - Plumrocket Documentation","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/plumrocket.com\/docs\/magento-newsletter-popup\/v4\/devguide\/display-manually#primaryimage"},"datePublished":"2021-07-01T11:04:50+00:00","dateModified":"2021-07-23T09:47:15+00:00","author":{"@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/38b360639b934d6c984ee4f3ffce7d20"},"description":"In order to display Magento 2 Newsletter Popup manually - you will have to perform the following steps: Select \"Display Popup Method\" = \"Manually\" in your","breadcrumb":{"@id":"https:\/\/plumrocket.com\/docs\/magento-newsletter-popup\/v4\/devguide\/display-manually#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/plumrocket.com\/docs\/magento-newsletter-popup\/v4\/devguide\/display-manually"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/plumrocket.com\/docs\/magento-newsletter-popup\/v4\/devguide\/display-manually#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magento 2 Extensions","item":"https:\/\/plumrocket.com\/magento-extensions"},{"@type":"ListItem","position":2,"name":"Magento 2 Newsletter Popup","item":"https:\/\/plumrocket.com\/magento-newsletter-popup"},{"@type":"ListItem","position":3,"name":"Documentation","item":"https:\/\/plumrocket.com\/docs\/magento-newsletter-popup"},{"@type":"ListItem","position":4,"name":"v4","item":"https:\/\/plumrocket.com\/docs\/magento-newsletter-popup\/v4"},{"@type":"ListItem","position":5,"name":"Developer Guide","item":"https:\/\/plumrocket.com\/docs\/magento-newsletter-popup\/v4\/devguide"},{"@type":"ListItem","position":6,"name":"Display Manually"}]},{"@type":"Person","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/38b360639b934d6c984ee4f3ffce7d20","name":"Plumrocket","image":{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/72392a92ae750c66560be284502b6676?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/72392a92ae750c66560be284502b6676?s=96&d=mm&r=g","caption":"Plumrocket"},"sameAs":["https:\/\/plumrocket.com\/docs"]}]}},"_links":{"self":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/20428"}],"collection":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/comments?post=20428"}],"version-history":[{"count":1,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/20428\/revisions"}],"predecessor-version":[{"id":22452,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/20428\/revisions\/22452"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/media?parent=20428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/categories?post=20428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/tags?post=20428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}