nuevoMailer Pop-up forms

Method

iFrame

Modal
What's different? Appends a layer and loads an iframe inside.
Styling is independent of the host page.		 Uses Bootstrap modals.
We load a custom version of Bootstrap that only affects elements in a div with the class "bootstrap_nvm".
Styling may be affected by the existing css of the host page.
You can do adjustments in nvModal2.css (if needed).
Code
Copy this at the bottom of the page where you want to load the form 		<script async language="JavaScript" type="text/javascript">
var nvmUrl="https://www.yourdomain.tld/mailer";
var idForm=9;
var maxPopTimes = 50;
var popTimeLapse = 0.2;
var nextPopTimeLapse = 2;
var nvPopEffect='ontime';
document.write('<script type="text/javascript" src="'+nvmUrl+'/admin/scripts/nvPop2.js"><\/script> ');
</script> 		<script async language="JavaScript" type="text/javascript">
var nvmUrl="https://www.yourdomain.tld/mailer";
var idForm=9;
var maxPopTimes = 50;
var popTimeLapse = 0.2;
var nextPopTimeLapse = 2;
var nvPopEffect='ontime';
document.write('<script type="text/javascript" src="'+nvmUrl+'/admin/scripts/nvModal2.js"><\/script> ');
</script>
Parameters
nvmUrl Replace with the url where the nuevoMailer is installed. E.g. https://www.yourdomain.tld/mailer
idForm Replace with the form ID. You can see it in your saved forms in your admin panel.
maxPopTimes Number of times to show the pop-up.
popTimeLapse Minutes passed until the 1st pop-up. For the "exitpop" effect set 0 or 0.1 (a small number). The exitpop triggers when the mouse is leaving the window.
nextPopTimeLapse Minutes passed between 2 consecutive pop-ups.
nvPopEffect Can be: exitpop, slidein, ontime. Can be: exitpop, ontime.
Files used
Files are already in place 		/admin/includes/nvPop2.css
/admin/scripts/nvPop2.js
/subscriber/nvPop2.php 		/admin/includes/nvModal2.css
/admin/scripts/nvModal2.js
/subscriber/nvModal2.php
/admin/includes/bootstrap-nvm/css/bootstrap.css
Styling
  1. The actual form itself. Each form may be different.
  2. /admin/includes/nvPop2.css (Open and read comments).
  3. Test, you may need to adjust the iframe size in nvPop2.js.
  1. The actual form itself. Each form may be different.
  2. /admin/includes/nvModal2.css (Open and read comments).
Form target and welcome/landing page
  1. Form opens a new window: target="_blank"
    Set a redirect URL or make complete landing page.
  2. Form does not open a new window: target="_self"
    In this case create a newsletter with a simple response message. Like "Thank you".
    This will display inside the pop-up.
Your form must include
For older nuevoMailer versions/forms		 When the form target is _self we use Ajax to submit the form and display the welcome message inside the pop-up.
For older forms make sure that you have these two:
Inside the form add this next to similar elements you will see:
<input type="hidden" name="form-result" id="form-result" value="">
In the Javascript validation part find:
$Npro("nv_submit").disabled = true;
And under it add this:
$Npro("form-result").value="ok";
Blocking of cross-domain file requests - CORS
What is CORS?
When nuevoMailer is in a different domain than the page displaying the pop-up form, security restrictions may block the form from loading.
In this case you must add a directive to allow an exception. You will need to do this in these files:
nvModal2.php, nvPop2.php, optIn.php
Add this line at the top. You wil find it there commented. Remove the // and change the domain name.
header("Access-Control-Allow-Origin: https://www.domain.com");
Example:
nuevoMailer is installed in www.A-domain.com, host page (where the form will pop-up) is at www.B-domain.com.
The line must be:
header("Access-Control-Allow-Origin: www.B-domain.com");
Setting a cookie to stop showing the pop-up after one completes the subscription (optional)
Same domain installation Pop-up page and nuevoMailer are in the same domain.
In /mailer/subscriber/optIn.php add this code at the top:
if (isset($_COOKIE['nv_pop'])) {
setcookie("nv_pop_stop", "stop", time()+(86400 * 30), "/"); // 86400 = 1 day ==> 30 days
}
Different domain installation nuevoMailer is installed in www.a-domain.com
Pop up page is at www.b-domain.com
In /mailer/subscriber/optIn.php add this code at the top:
<img src="http://www.b-domain.com/myfolder/nvcookie.php" style="display:none;" />
Copy page nvcookie.php in the directory above (myfolder), where the image is requested, in b-domain.com.
Cookie expiration Expiration is set to 30 days. You can change this if needed in these files: nvcookie.php, nvModal2.js or nvPop2.js and /subscriber/optIn.php.
Also,
  1. The pop-up stops showing if the maxPopTimes is reached or if one completes the subscription (or clears his browser cookies).
  2. Perhaps in some pages you want to use a slidein effect and in others the exitpop or ontime effects. Or you may want to load different forms in different pages.
    The solution is to use different code snippets in different pages.
    Alternatively, you can load the same snippet in all pages and just change some of the variables in specific pages.
An alternative for loading the script (for both methods)
This is a rather short and clean approach.
Copy the contents of the Code only between the opening and closing <script></script> tags.
Paste these contents into a new js file and save it as form9.js. You can use any name you want. With form9 for example it is easy to know that we use the form with id 9.
At the top (or bottom) of the page you want to trigger the pop-up paste this code:
<script type="text/javascript" src="form9.js"></script>
Adjust the src path accordingly. The above implies that both the Host page and the js page are in the same directory.
Another alternative method for loading the script (for both methods)
Chrome browser although will work, it may complain when using document.write. So here is an alternative.
This is how Google does it with the Analytics script.
What it does is to use the insertBefore instead of the document.write method.
Replace this line:
document.write('<script type="text/javascript" src="'+nvmUrl+'/admin/scripts/nvPop2.js"><\/script> ');
With these lines:
var script = document.createElement('script');
script.src = nvmUrl+'/admin/scripts/nvPop2.js';
script.async = true;
var firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(script, firstScript);
More ways to trigger a pop-up
An element having the class "nsl_pop"
<span class="nsl_pop" style="font-size: 25px">Click me</span>
On mouse over, replace the form id.
<span onmouseover="nvPopUp(idForm);">Mouse over</span>