{"id":30627,"date":"2025-01-11T12:23:23","date_gmt":"2025-01-11T12:23:23","guid":{"rendered":"https:\/\/doc.probance.com\/?post_type=tutoriels&#038;p=30627"},"modified":"2025-05-30T09:19:39","modified_gmt":"2025-05-30T09:19:39","slug":"woocommerce-including-the-newsletter-subscription-form-in-a-pop-up","status":"publish","type":"tutoriels","link":"https:\/\/doc.probance.com\/en\/knowledge-base\/woocommerce-including-the-newsletter-subscription-form-in-a-pop-up\/","title":{"rendered":"Woocommerce : Including the newsletter subscription form in a pop-up"},"content":{"rendered":"\n<p><em>This tutorial will explain&nbsp;how to include the newsletter subscription form built with our Woocommerce plugin in a pop-up with&nbsp;<strong>Boxzilla<\/strong>.<\/em><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-note-probance is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Our newsletter subscription form must be configured in your Woocommerce back-office and displayed in your website to follow this tutorial.<\/p>\n<\/blockquote>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ancre1\">1. Install Boxzilla<\/h2>\n\n\n\n<p>Boxzilla is a free plugin for WordPress that allows you to build pop-up to display in your website.<\/p>\n\n\n\n<p>To install Boxzilla, access the menu&nbsp;<strong>Extensions &gt; Add&nbsp;<\/strong>and search \u2018Boxzilla\u2019. Click on&nbsp;<strong>Install<\/strong>, and on&nbsp;<strong>Activate<\/strong>&nbsp;when the installation is finished.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"894\" height=\"398\" src=\"https:\/\/doc.probance.com\/wp-content\/uploads\/2025\/01\/image-34.png\" alt=\"\" class=\"wp-image-30628\" style=\"width:600px\" srcset=\"https:\/\/doc.probance.com\/wp-content\/uploads\/2025\/01\/image-34.png 894w, https:\/\/doc.probance.com\/wp-content\/uploads\/2025\/01\/image-34-300x134.png 300w, https:\/\/doc.probance.com\/wp-content\/uploads\/2025\/01\/image-34-768x342.png 768w\" sizes=\"auto, (max-width: 894px) 100vw, 894px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ancre2\">2.\u00a0Create the pop-up<\/h2>\n\n\n\n<p>Access the menu&nbsp;<strong>Boxzilla &gt; Add new<\/strong>.<\/p>\n\n\n\n<p>The editor allows you to define the content of the pop-up. You can include the subscription form using the shortcode, but if the form is already displayed somewhere else on your website, you will need to use an incremented version of the shortcode :&nbsp;[probance_newsletter id=\u201d1\u2033]<\/p>\n\n\n\n<p>You can also add text and images before and\/or after the form.<\/p>\n\n\n\n<p>Click on<strong>&nbsp;Update<\/strong>&nbsp;to save your modifications.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ancre3\">3. Personalize the pop-up<\/h2>\n\n\n\n<p>The&nbsp;<strong>Box Appearance<\/strong>&nbsp;section allows you to modify the style elements of your pop-up:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The background color<\/li>\n\n\n\n<li>The text color<\/li>\n\n\n\n<li>The style, color, and thickness of the border<\/li>\n\n\n\n<li>The width of the pop-up<\/li>\n<\/ul>\n\n\n\n<p>You can view the result of your settings immediately in the editor.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-note is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note :<\/strong>&nbsp;The CSS customization configured from in Optin module management page is maintained when the form is included in the pop-up.<\/p>\n<\/blockquote>\n\n\n\n<p>Click on<strong>&nbsp;Update<\/strong>&nbsp;to save your modifications.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ancre4\">4.\u00a0Configure the pop-up display conditions<\/h2>\n\n\n\n<p>The Box Options section allows you to define where and for whom the pop-up will display, and how.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Load this box if:\u00a0<\/strong>defines pop-up the trigger conditions. Those conditions can be based on the visitor\u2019s profile, or the website page.<\/li>\n\n\n\n<li><strong>Box position:<\/strong>\u00a0sets the position of the pop-up in the page.<\/li>\n\n\n\n<li><strong>Animation:<\/strong>\u00a0defines the appearance effect of the pop-up.<\/li>\n\n\n\n<li><strong>Auto-show box:<\/strong>\u00a0defines the pop-up\u2019s apparition delay.<\/li>\n\n\n\n<li><strong>Cookie expiration:\u00a0<\/strong>defines (in hours) the delay after which the pop-up will reappear to a visitor for whom it already displayed. You can set a different delay for when the pop-up was shown and the visitor did nothing, and for when the visitor actively dismissed the pop-up.<\/li>\n\n\n\n<li><strong>Screen width:\u00a0<\/strong>defines the minimum screen width required for the pop-up to display.<\/li>\n\n\n\n<li><strong>Show icon close:<\/strong>\u00a0hides or shows the close icon on the pop-up.<\/li>\n\n\n\n<li><strong>Enable test mode:<\/strong>\u00a0activates\/deactivates test mode. Test mode temporarily deactivates pop-up cookie management so that it displays every time : this allows you to view your pop-up in your website and test its configuration in real conditions. Make sure to deactivate after every modification.<\/li>\n<\/ul>\n\n\n\n<p>Click on<strong>&nbsp;Update<\/strong>&nbsp;to save your modifications..<\/p>\n\n\n\n<p>To know more about the options available to configure your pop-up, we invite you to read&nbsp;<a href=\"https:\/\/fr.wordpress.org\/plugins\/boxzilla\/\">the plugin\u2019s official page<\/a>.<\/p>\n<div id=\"wpmem_restricted_msg\"><p>This content is restricted to site members.  If you are an existing user, please log in.  New users may register below.<\/p><\/div><div id=\"wpmem_login\"><a id=\"login\"><\/a><form action=\"https:\/\/doc.probance.com\/en\/knowledge-base\/woocommerce-including-the-newsletter-subscription-form-in-a-pop-up\/\" method=\"POST\" id=\"wpmem_login_form\" class=\"form\"><input type=\"hidden\" id=\"_wpmem_login_nonce\" name=\"_wpmem_login_nonce\" value=\"f834b2436e\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/tutoriels\/30627\" \/><fieldset><legend>Existing Users Log In<\/legend><label for=\"log\">Username or Email<\/label><div class=\"div_text\"><input name=\"log\" type=\"text\" id=\"log\" value=\"\" class=\"username\" required  \/><\/div><label for=\"pwd\">Password<\/label><div class=\"div_text\"><input name=\"pwd\" type=\"password\" id=\"pwd\" class=\"password\" required  \/><\/div><input name=\"a\" type=\"hidden\" value=\"login\" \/><input name=\"redirect_to\" type=\"hidden\" value=\"https:\/\/doc.probance.com\/en\/knowledge-base\/woocommerce-including-the-newsletter-subscription-form-in-a-pop-up\/\" \/><div class=\"button_div\"><input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/>&nbsp;<label for=\"rememberme\">Remember Me<\/label>&nbsp;&nbsp;<input type=\"submit\" name=\"Submit\" value=\"Log In\" class=\"buttons\" \/><\/div><\/fieldset><\/form><\/div><div id=\"wpmem_reg\"><a id=\"register\"><\/a><form name=\"form\" method=\"post\" action=\"https:\/\/doc.probance.com\/en\/knowledge-base\/woocommerce-including-the-newsletter-subscription-form-in-a-pop-up\/\" id=\"wpmem_register_form\" class=\"form\"><input type=\"hidden\" id=\"_wpmem_register_nonce\" name=\"_wpmem_register_nonce\" value=\"6cc3867c56\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/tutoriels\/30627\" \/><fieldset><legend>New User Registration<\/legend><label for=\"username\" class=\"text\">Choose a Username<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"username\" type=\"text\" id=\"username\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"first_name\" class=\"text\">First Name<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"first_name\" type=\"text\" id=\"first_name\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"last_name\" class=\"text\">Last Name<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"last_name\" type=\"text\" id=\"last_name\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"user_email\" class=\"text\">Email<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"user_email\" type=\"email\" id=\"user_email\" value=\"\" class=\"textbox\" required  \/><\/div><input name=\"a\" type=\"hidden\" value=\"register\" \/><input name=\"wpmem_reg_page\" type=\"hidden\" value=\"https:\/\/doc.probance.com\/en\/knowledge-base\/woocommerce-including-the-newsletter-subscription-form-in-a-pop-up\/\" \/><div class=\"button_div\"><input name=\"submit\" type=\"submit\" value=\"Register\" class=\"buttons\" \/><\/div><div class=\"req-text\"><span class=\"req\">*<\/span>Required field<\/div><\/fieldset><\/form><\/div>","protected":false},"excerpt":{"rendered":"<p>This tutorial will explain&nbsp;how to include the newsletter subscription form built with our Woocommerce plugin in a pop-up with&nbsp;Boxzilla. Our newsletter subscription form must be configured in your Woocommerce back-office and displayed in your website to follow this tutorial. 1. Install Boxzilla Boxzilla is a free plugin for WordPress that allows you to build pop-up [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"template":"","sujets":[657],"class_list":["post-30627","tutoriels","type-tutoriels","status-publish","hentry","sujets-acquisition"],"_links":{"self":[{"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/tutoriels\/30627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/tutoriels"}],"about":[{"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/types\/tutoriels"}],"author":[{"embeddable":true,"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/users\/6"}],"wp:attachment":[{"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/media?parent=30627"}],"wp:term":[{"taxonomy":"sujets","embeddable":true,"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/sujets?post=30627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}