This tutorial will explain how to include the newsletter subscription form built with our Woocommerce plugin in a pop-up with 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 to display in your website.
To install Boxzilla, access the menu Extensions > Add and search ‘Boxzilla’. Click on Install, and on Activate when the installation is finished.
2. Create the pop-up
Access the menu Boxzilla > Add new.
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 : [probance_newsletter id=”1″]
You can also add text and images before and/or after the form.
Click on Update to save your modifications.
3. Personalize the pop-up
The Box Appearance section allows you to modify the style elements of your pop-up:
- The background color
- The text color
- The style, color, and thickness of the border
- The width of the pop-up
You can view the result of your settings immediately in the editor.
Note : The CSS customization configured from in Optin module management page is maintained when the form is included in the pop-up.
Click on Update to save your modifications.
4. Configure the pop-up display conditions
The Box Options section allows you to define where and for whom the pop-up will display, and how.
- Load this box if: defines pop-up the trigger conditions. Those conditions can be based on the visitor’s profile, or the website page.
- Box position: sets the position of the pop-up in the page.
- Animation: defines the appearance effect of the pop-up.
- Auto-show box: defines the pop-up’s apparition delay.
- Cookie expiration: 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.
- Screen width: defines the minimum screen width required for the pop-up to display.
- Show icon close: hides or shows the close icon on the pop-up.
- Enable test mode: activates/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.
Click on Update to save your modifications..
To know more about the options available to configure your pop-up, we invite you to read the plugin’s official page.