X hide

Magento 2 Newsletter Popup v3.x Configuration

From Plumrocket Documentation

You are viewing:  Newsletter-popup-icon-32.png  Newsletter Popup

Contents

Configuring Magento 2 Newsletter Popup 3.x Extension

Here you will learn how to configure our Magento Newsletter Popup Extension v3 correctly. Follow the steps below.


Information Sign sm.png Step-by-Step action:
  1. Go to "Plumrocket" tab in the main menu.
  2. Select Newsletter Popup Extension -> "Configuration" section.
  3. Enable Extension: allows you to enable or disable this Newsletter Popup extension.
  4. Option "Serial Key": enter unique serial key provided to you after the purchase of the extension. Note: In most cases this field will be pre-filled with serial key automatically and the green check mark will be displayed. In order to find and paste your serial key manually, read the Serial Key Activation article.
  5. Option "Use Google Analytics Tracking": allows you to enable or disable Google Analytics Tracking for your popups.
  6. "Enable Subscription History": if enabled, this option allows to save all user interactions with Popups in magento database.
  7. "Option "Erase Old Subscription History": allows to select the period of time after which the Subscription History will be erased.
  8. "Disable History for IP addresses": this option allows you to specify the IP-addresses with the history records that will not be saved in magento database.
  9. Option "Cookie Timeout Usage": allows you to use two different types of cookies: "Global cookie for all popups" and "Separate cookie for each popup". This way admin will be able to record time when popup was closed for each popup independently. When 2 or more popups are enabled at the same time, the user will see 2nd popup after the page refresh even if the 1st popup was just closed.
  10. "Newsletter Popup Thumbnail": indicates if "Thumbnail Generation" option for the popup is enabled or disabled.
  11. "Find Wkhtmltoimage Tool" button: allows you to locate this tool after installation on the server, or find it in case it was moved within the file system.


1 configuration newsletter popup magento 2 v.3.jpg


Attention green.png Important Information:

In order to enable Newsletter Popup Thumbnail - you will need to have the wkhtmltoimage command line tool installed as outlined here.


Information Sign sm.png Step-by-Step action:
  1. "Enable Synchronization": if enabled, collected emails will be transferred to your Mailchimp List(s).
  2. Option "Mailchimp API Key": allows you to enter your MailChimp API key. The API key can be found at your MailChimp account. (For more information about Mailchimp API key please read this article). Please make sure to save your changes once you indicate the API key.
  3. Option "Mailchimp Lists": allows to select the Mailchimp List(s) where the collected emails will be saved to. (List(s) will appear after you specify your Mailchimp API Key).
  4. Option "Double opt-in": allows to activate Double opt-in. Note: For more information about double opt-in process in MailChimp please read this article.
  5. Option "Account Details": shows your MailChimp Account details. (They will appear after you enter your Mailchimp API Key).
  6. Option "Mailchimp Fields Mapping": lets you setup a relation between your newsletter popup fields and MailChimp list fields. This will allow you to save your newsletter subscribers' additional data (including Coupon Codes) directly to your Mailchimp account. Also it lets you send a Welcome Email to your subscribers automatically, using MailChimp service instead of Magento.


Note: MailChimp paid plans allow you to include Coupon Code into automatically sent emails, even if "double opt-in" option is disabled. Otherwise, "double opt-in" is required to be enabled to make these procedure automated for Magento admin. Please refer to the following article for more information on how to synchronize Newsletter Popup data fields with your MailChimp.


2 configuration newsletter popup magento 2 ver.3.jpg


Information Sign sm.png Step-by-Step action:
  1. Option "Desktop": allows you to set the width of Desktop screen for proper display of Newsletter Popup. By default it is 992 pixels or greater.
  2. Option "Tablet": allows to set the width of Tablet screen. By default it is 768 pixels or greater.
  3. Option "Mobile": allows to set the width of Mobile device screen. By default it is less than 768 pixels.


3 configuration newsletter popup magento 2 v.3.jpg


Information Sign sm.png Step-by-Step action:
  1. "Reject Subscriptions from Disposable Email Addresses": if enabled, this option will reject subscription for the email addresses from the list of disposable email services.
  2. "Disposable Email Services": allows you to enter the blacklisted domain names. Newsletter subscriptions will be rejected for the email addresses from these domains.
  3. Press "Save Config" button to save the settings configured.


4 configuration newsletter popup magento 2 v.3.jpg


Managing Newsletter Popups

This tab allows you to preview and edit Popups. In order to access this management page, follow the steps as described below.

Information Sign sm.png Step-by-Step action:
  1. Go to "Plumrocket" tab in the main menu -> select "Newsletter Popup" extension -> "Manage Popups" section.


5 configuration newsletter popup magento 2 v.3.jpg


Information Sign sm.png Step-by-Step action:
  1. You can add new popup by pressing on "Add Popup" button.
  2. "Thumbnail" column: allows you to see the thumbnail image of the popup.
  3. "ID": allows you to see and search by ID of the newsletter in the grid.
  4. "Name" column: indicates the name of the popup.
  5. "Views" column: allows you to see the amount of users' views of the popup.
  6. "Subscriptions" column: allows you to see the amount of users' that have been subscribed using specific popup.
  7. "Conversion Rate" column: shows the conversion rate of the popup.
  8. "Orders Count" column: allows you to see the amount of orders made with this popup.
  9. "Total Revenue" column: shows the total revenue gained with this popup.
  10. "Start Date" column: indicates the Start Date of the Newsletter Popup.
  11. "End Date" column: indicates the End Date of the Newsletter Popup.
  12. "Visible in" option: allows to see the store view(s) popup is visible in.
  13. "Status" option: shows the status of the popup: "Enabled" or "Disabled".
  14. "Preview" button opens the popup in the separate window for your review.


6 configuration newsletter popup magento 2 ver.3.jpg


Information Sign sm.png Step-by-Step action:
  1. Go to the "General" tab of the settings.
  2. Option "Popup Name": allows you to specify Newsletter Popup name.
  3. "Status" option: allows you to enable or disable the popup.
  4. Option "Use Coupon Code": allows you to select the Shopping Cart Price Rule with coupon (if any). For more information about the rules please read Creating Shopping Cart Price Rules In Magento 2.
  5. Options "Start Date", "End Date": allow you to set the Start Date and End Date of the Newsletter Popup.
  6. Option "Subscription Success Page": allows you to select the page where the subscriber will be transferred to after successful subscription.
  7. Option "Send Autoresponder Email": allows you to send the notification email to the user after successful subscription
  8. Option "Autoresponder Email Template": allows you to select the template that will generate notification email about successful subscription.


7 configuration newsletter popup magento 2 v.3.jpg


Information Sign sm.png Step-by-Step action:
  1. Option "Code Length": allows you to set the Discount Coupon Code length.
  2. Option "Code Format": allows you to select the Discount Coupon Code format. Possible options are: "Alphanumeric" , "Alphabetical" or "Numeric".


7a configuration newsletter popup magento 2 ver.3.jpg


Information Sign sm.png Step-by-Step action:
  1. Option "User Sign-Up Method": allows you to set the way for sign-up process of a customer. Possible options are "Sign-up for email newsletter only" and "Register customer account & sign-up for newsletter".
  2. Option "Enable form fields": allows you to select, enable, rename and define sort order for the additional fields on users sign-up form.


7b configuration newsletter popup magento 2 v.3.jpg


Information Sign sm.png Step-by-Step action:
  1. Option "User Subscription Mode": lets you allow users to subscribe to the list of their choice or automatically subscribe each new user to all Mailchimp lists. Multiple options are available here.
  2. Option "Enable Mailchimp Lists": allows you to choose the lists in MailChimp that you customers will be able to subscribe to.


7c configuration newsletter popup magento 2 v.3.jpg


Information Sign sm.png Step-by-Step action:
  1. Go to "Display Settings" tab.
  2. Option "Popup theme" : Press "Choose Theme" button to select the theme for this Popup.
  3. Option "Display Popup": allows you to select the option where the Popup will be displayed. Possible options are: "After time delay", "When leaving site (out of focus)", "On Page Scroll", "On Mouse over", "On click" and "Manually". Note: If you select "On Mouse Over" or "On Click" display method - the "CSS Selector" field will appear, where you can enter the “ID” or “Class Name” of the object you want to use to trigger the newsletter popup. For the "Manually" , please, check our Developer's Guide.
  4. "Popup Time Delay": this option allows you to indicate the delay time after which the Popup displays.
  5. Option "Cookie Time Frame": allows you to set the time frame for the cookies in days. Cookies are used to track whether user clicked on "subscribe" or "cancel" button. If the user choose to cancel the subscription, then the popup will be displayed again only after specified amount of days. Enter '0' in this field to never display the newsletter popup again after it was closed for the first time.
  6. Option "Animation": allows you to select different animation effects for popup.
  7. Option "Visible In": allows you to choose which Store view(s) the Popup will be visible on.
  8. Section "Display Popup Restrictions": here you can create special display popup restriction rules. As the result of these rules the popup will be displayed only if the conditions you've created are true or false.


8 configuration newsletter popup magento 2 v.3.jpg


Attention green.png Important Information:

How to calculate when is the right time to display newsletter popup? Good starting point would be your site statistics. In Google Analytics you can go to Audience -> Behavior -> Engagement and see when most visitors leave your site. The default suggested value is 5 seconds. However we always suggest to test and compare different time delays vs number of email signups as every website is different.


Information Sign sm.png Step-by-Step action:
  1. Go to "Text Labels" tab.
  2. Option "Title": allows you to set the title which will be used for Newsletter Popup.
  3. Option "Description": allows you to indicate some description for the Popup if needed.
  4. Option "Success Message": lets you set the message that will show up after the successful subscription.
  5. Option "Submit Button": allows you to create a text for "Submit" button of the Popup.
  6. Option "Cancel Button": lets you create a text for "Cancel" button of the Popup.


9 configuration newsletter popup magento 2 v.3.jpg


Information Sign sm.png Step-by-Step action:
  1. Go to "Theme Template" tab.
  2. Option "HTML Template": here you can edit the HTML code of the template. "Insert Image" option allows you to upload images to your theme template.
  1. Option "CSS Styles": here you can edit the CSS Styles code of the template.
  2. Press "Save Popup" button to save your Newsletter Popup.


10 configuration newsletter popup magento 2 v.3.jpg


Here's how the newsletter popup (with Chocolate theme) will look like on frontend.


Information Sign sm.png Step-by-Step action:
  1. This is how your title section will look like.
  2. Here's how the description text section will be displayed.
  3. This is the signup section of newsletter popup.
  4. This is how the social media login button will be displayed. Note that Newsletter Popup Extension has built-in support of twitter & facebook login extension.


Theme newsletter popup magento 2 v3.jpg


This is how the newsletter popup (with Right Slide Out theme) will look like on frontend once enabled.


Information Sign sm.png Step-by-Step action:
  1. The title text section of this popup theme is also a button that customers can press to show or hide the popup.


2 theme newsletter popup magento 2 v3.jpg

Managing Magento 2 Newsletter Popup Themes

Information Sign sm.png Step-by-Step action:
  1. Press the “Plumrocket” tab in the menu.
  2. Select “Newsletter Popup” -> “Manage Themes”.


11a configuration newsletter popup magento 2 v.3.jpg


Information Sign sm.png Step-by-Step action:
  1. You can add new theme by pressing "Add New Theme" button.
  2. "Thumbnail" column: allows you to see the thumbnail image of the newsletter popup theme.
  3. "Theme Name": allows you to see the name of the theme.
  4. "Updated At" column: shows the date when the popup theme has been updated.
  5. "Created At" column: shows the date when the popup theme has been created.
  6. "Type" column: shows the type of the newsletter popup theme.
  7. "Preview" button: opens the popup in the separate window where you can preview the popup theme.
  8. "Action" column: allows you to edit the required theme.


11 configuration newsletter popup magento 2 ver.3.jpg


In order to configure your new Magento 2 Newsletter Popup Theme please follow the step-by-step instructions below.


Information Sign sm.png Step-by-Step action:
  1. Option "Theme Name": allows you to specify the name for your new theme.
  2. Option "HTML Template": here you can add and edit the HTML code. "Insert Image" button allows you to upload and insert images to your new theme.
  3. Option "CSS Styles": allows you to add and edit the CSS Styles code.
  4. Press "Save Theme" button to save your theme.


12 configuration newsletter popup magento 2 v.3.jpg


Magento 2 Newsletter Popup History

This tab allows you to preview the Newsletter Popup History in your Magento 2.


Information Sign sm.png Step-by-Step action:
  1. Go to "Plumrocket" tab in the main menu.
  2. Select "Newsletter Popup" Extension.
  3. Press "History" tab.


13 configuration newsletter popup magento 2 v.3.jpg


Changing default theme images manually

In this part you will learn how to change default theme images manually. Follow the steps below.

1. By default images are located here:

app/code/Plumrocket/Newsletterpopup/view/frontend/web/images/templates

In order to change any image (that is used for all popups) from the folder above, you need to copy the image to be changed to the following folder:

app/design/frontend/[VendorName]/[YOUR_THEME]/Plumrocket_Newsletterpopup/web/images/templates

where [VendorName] is the name of the developer of your theme,
where [YOUR_THEME] is the name of your theme.


For example, if you need to overwrite the image "newbg1.jpg"- you need to move it to:

app/design/frontend/[VendorName]/[YOUR_THEME]/Plumrocket_Newsletterpopup/web/images/templates/newbg1.jpg

Once the image is moved, you can start editing it.


2. If you need to replace the image for one popup only:

Go to the specific popup configuration > select "Theme Template" tab > change the location for the image. 

Note: Images can be written via both Html or CSS. You just need to find the image in the code and indicate the new path and name for it.

The path can be indicated the same way as you do for the CMS pages, for example:

{{view url="Plumrocket_Newsletterpopup::images/templates/theme2_logo.jpg"}}

The path can be indicated according to the skin folder or media folder, you can check this by clicking the F1 button in the template editor.

Newsletter Popup Extension for Magento 2 Newsletter Popup Extension for Magento 2

Navigation