Come back
Used worldwide in 98 countries

Exit popup widget

With this widget you can dynamically display an opt-in form saved in nuevoMailer inside a popup or in a bottom slide-in box.
You do this by appending a code snippet at the bottom of the pages where you want to load the popup.
Note that this is not a popup window like the ones that may be stopped by popup blockers. It is a layer added on the existing window content.

You can trigger and display the popup in several ways

  1. Exit popup: when the visitor is about to leave your page by moving the mouse outside the page's body.
  2. Slide-in popup: it loads periodically at the bottom right corner of your page.
  3. By adding a class="nsl_pop" to any hyperlink, text or phrase.
  4. By adding onclick or onmouseover events to hyperlinks, div, span elements and buttons (text, paragraph, image etc). Examples

When the visitor is navigating away from your page (exit popup)

For example, when he switches windows or tabs by moving his mouse outside your page's body content. To see this in action try navigating away from this tab or window but after staying for at least a minute. See (2) below. With this method you have the following options:
  1. Set the number of times to show the popup. The popup will stop showing if the visitor completes the form and subscribes. But in order to avoid being annoying you can limit the number of pop-ups. E.g. don't pop more than 5 times.
  2. Similarly, you can set the time lapse between two consecutive pop-ups.

Examples: By adding a class or an onclick/onmouseover event

  1. Mouse over an element (span, div, image):  Mouse over
    <span onmouseover="nvPopUp(8);">Mouse over</span>
    In this case we can assign different forms to different elements.
  2. Using an onclick event:  Click me
    <a onclick="nvPopUp(9);return false;" href="#">Click me</a>
    We can again change the loaded form.
  3. Elements having the class nsl_pop: Click here
    <span class="nsl_pop">Click here</span>
    We cannot change the loaded form in this case. It will take the general one defined in the code snippet (unless you overwrite it in the code).
  4. Using a button you can also assign different forms to different buttons:
    <button onclick="nvPopUp(10);">Register</button>
  5. Clicking the close button redirects to another page: Test it!
    <a href="#" onclick="nvPopUpLayer(nvmUrl, 11, 'https://www.nuevomailer.com');return false;">Test it</a>
    11 is the form ID and https://www.nuevomailer.com is the redirection URL when the user closes the popup or presses the escape key.

The code snippet

This snippet should be included in all pages where you want to trigger the popup. You can include the snippet into a footer file shared by all your website pages. If you want to load a different form by page then add and change the variable idForm for that page.
<script language="JavaScript" type="text/javascript">
 var nvmUrl="http://yourdomain.tld/nuevomailer/"; 
 var idForm=6;
 var maxPopTimes=5;
 var popTimeLapse=4;
 var nvPopEffect='slidein';
 document.write('<script type="text/javascript" src="'+url+'admin/scripts/nvpop.js"></script>');

Styling, customization and other options

  • It's responsive. Resize your browser and test the examples again. When the form is larger than the screen different styles and sizing is applied.
  • You can style both the popup layer that contains the opt-in form and the form itself by editing the css in the included files. For further styling tips of existing (saved) nuevoMailer forms you can also refer here.
  • The whole approach relies on cookies. Expiration is set to 30 days for all cookies. You can change this if needed.
  • It works also on cross domain installations; when nuevoMailer is installed in a different domain from the one you want to load the pop-ups. A very nice hack (with cookies) for enabling this set-up is included in the documentation.

Version compatibility

  • Included in nuevoMailer since v.5.1
  • For v.5.0 & v.4.0 you can download it as an update from your account.

See also,

Top of page