var notview=1;

Now you have different choice to open the popup :

- directly in the link, enter your link like that :

<a href=”javascript:void()”onclick=’jQuery(“#popup”).modal({open:true,closeClass:”popoup-front-close”,overlayClose:true})’>Open Pop Up</a>

- with a class, for example all links with the “openPopUp” class, enter
this in the Custom jQuery :

jQuery(‘a.openPopUp’).click(function(){
jQuery(“#popup”).modal({open:true,closeClass:”popoup-front-close”,overlayClose:
true});

the old version was using a copy / paste of a form you were creating with Mailchimp access, it was causing some issues and may be kind of painful for some people.

Mailchimp API lets you have a fine control on your integration. Here is the step by step tutorial

1 ) Get or Create your API key from your mailchimp account

2 ) in WPSubscribers, go to “others settings” and put your API key

3 ) Get your List_id from Mailchimp

Connect to Mailchimp again, click on list and settings

from the list , you will the submenu Settings , then List Settings and Unique ID

you will have a special ID to copy like in this screenshot

3 ) you need to set up your form as usual

in Form Action URL: put exactly this value

/wp-content/plugins/wpsubscribers/mailchimp.php
If you use WordPress in multisite version use the complete url like http://youblogurl.com/wp-content/plugins/wpsubscribers/mailchimp.php

form name field is FNAME or anything else defined in mailchimp
default is FNAME, refer to the form code to adjust the field values

UPDATE ! depending on your host, you may name to use “email” and not “EMAIL” it’s lowercase sensitive

If you have anything, please contact us, or let a comment, and we will adjust it for you.

Important : ADD in hidden fields this line :

<input type="hidden" name="list_id" value="xxxxx">

where you replace xxxxx by your mailchimp list ID

first, about Mailjet, it’s a recent company in emailing services, they are less famous than Mailchimp and Aweber, but they become more and more popular, as you can see in Alexa, there are several reason to consider, their API, their international support ( interface available in French, German and probably more ). You can use them to deliver your email ( SMTP replacement )

Let’s see how it has been integrated with WP Subscribers to collect email in their system?

First, you need to open an account from Mailjet

http://www.mailjet.com

Or using the nice banner

Then we will use the API access, so please log in, go to your account and locate the terms :
REST API , then click on Master API Key

You will be able to note down the 2 keys :

API KEY =   71ac39bca9c590994790d4ba94194cc4

SECRET KEY =   e8c8cdde01c1c384267e691031291593
You are done for this part, you will have to put these keys in WP Subscribers

in the submenu of the plugin in your wordpress admin bar, please select : others settings

Fill MailJet in WP Subscriber api and secret key

You can save, and swith to the usual section : Setup Optin Code

Create a new HTML Opt-in Code as follows

put this value for Form Action URL :  /wp-content/plugins/wpsubscribers/mailjet.php

be careful to put the starting “/” or if you are not sure put your wordpress blog domain like :

http://www.wpsubscribers.com/wp-content/plugins/wpsubscribers/mailjet.php

in form EMAIL field : put  email

for now, Mailjet supports only email , it is not possible to add any additionnal field in the form, so don’t email us about it we can’t do anything from now, we will update when it will be available.

Hidden fields :  <input type=”hidden” name=”list_id” value=”xxxxx”>

Now you need to replace xxxxx by the number of your email list ( you can create as many email list you need ) but to find this ID value in Mailjet interface, it is quite hidden, so I did a video for you.

How to find email list ( contact list ) in Mailjet ?

one you have replace the list ID, you are done, the popup will send the email collected to mailjet, and you won’t

Today let’s see a tutorial about how to make a popup without a subscribe button. directly optimized with JQuery flexible section of custom popup editor.

Here the live example and the screenshot :

To do that I use custom CSS to design the button and Custom jQuery for the action

The html is :
<div class="bouton grand rose divcenter">
<div>
<p><strong>Votez pour Serial-Cooker.com</strong><br /><small>Concours Blog Cuisine jusqu'au 30 avril 2012</small></p>
</div>
</div>

Custom CSS :
{text-align: center;font-size: 25px;font-weight: bold;font-family: arial,verdana,tahoma;color:#000}
.bouton{text-align: center;font-size: 25px;font-weight: bold;text-shadow: 1px 1px 1px black;font-family: arial,verdana,tahoma;cursor: pointer;}
.bouton{border: 2px solid #dfe0db;border-radius: 55px;-moz-border-radius: 55px;-webkit-border-radius: 55px;-khtml-border-radius: 55px;font-size: 24px;font-weight: bold;color:#fff;}
.rose{background: #d3133c;background-image: -moz-linear-gradient(100% 100% 90deg, #F36B91, #F34276 );background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F34276), to(#F36B91));margin:0 auto;}
.rose:hover{background: #d3133c;background-image: -moz-linear-gradient(100% 100% 90deg, #F34276, #F36B91 );background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F36B91), to(#F34276));text-shadow:none}
.grand{width:555px;height:113px;}
.grand div{text-align:center}
.grand div p{font-size: 24px;font-weight: bold;color:#fff;padding-top:10px;margin:0;line-height:20px;}
.grand div p strong{font-size:30px;line-height:50px;}
.grand div p small{font-size:15px;line-height:15px;}
.wpslink{color:#fff;text-decoration:none}
.wpslink:hover{color:#fff;text-decoration:none}


And Custom jQuery :

jQuery(".bouton").click(function() {jQuery.modal.close(); window.open('http://www.marieclaireidees.com/sap/blogcuisine2011/entrant/54570#sharetools');});

• Go to http://feedburner.google.com
• Enter your feed URL
  
• Complete with your informations
  
• In the next screen you can configure more feedburner, in your case use the link “Skip directly to feed management”  and click on Publisize > Email Subscriptions And Activate the service
• Now you have a page with the subscription form
  
• Now just copy / paste the form information into Setup Opt-in Code in you WP Subscribers plugin
  
• Name the Opt-In code, clic on “Detect your form code”
  add this code in other fields :<input type=”text” name=”captcha” id=”verifyBox” style=”width:120px” />

  and Save

• Now you can use the FeedBurner Opt-in Code in all your PopUp, header bar, footer bar, …

To make this tutorial , we will use another plugin called WP Polls, you can download it here

http://wordpress.org/extend/plugins/wp-polls/

you will see, it is very easy to use it, if you think we need to make a video to manage this part, just ask

1 ) Download WP Polls , install and activate it in WordPress

You are probably skilled to install it easily
manually, or searching in the Plugins wordpress directory

http://wordpress.org/extend/plugins/wp-polls/

2 ) Configure a set of Polls

Create quicky any polls you want, in our case, we ask what color they prefer, ( to tease their sense of curiosity about why we ask this question ), or what mobile they own, anything relative to your activity

3 ) Create a custom optin

in Content, you need to put the shortcode

[poll id="-2"]

you can put any of your own text below or on top of the polls

you have 2 choices, either you want to fix the polls which will be displayed and you just need to put the appropriate ID in the shortcode

or you use [poll id="-2"] and the polls will be randomly displayed.

in Custom CSS , please add these lines of code

{padding:20px}
{border-radius: 15px;}

first line will define some space around your content and the poll, so it will be nicer to read and reply
the second line will round the corner of the popup, to make it a little bit more sophisticated.

in Custom jQuery : ( Optional )

jQuery(‘#popup a’).click(function(){
jQuery.modal.close();
});

this line is optional, it will close the popup on any click on a link. but if you want to do it on a submit form action, you can use another code ( we will publish more code like this )

that’s ALL !  you are done.

now you will be able to list this survey or polls in any page you want, but please be aware for now, there is no action to know they didn’t reply yet ( on a WPSubscribers point of view ), only the WP-Polls will rotate or display the results .

please let  us know what you think and what could be improved to make the best popup with poll for wordpress plugin.

SEE THE DEMO ( it’s a live test in a french web site )

As you can see on the demo page, there’s a popup with an opt-in form inside, so we need to do 2 things: create a custom popup and then put in the custom opt-in form:

(View on Youtube)

Step 1: Locate to the popup that you want to add a countdown timer and add these lines of code to the “Custom jQuery” box:

jQuery(document).ready(function($) {
if ($("#wps_countdown_dashboard").length > 0){
$('#wps_countdown_dashboard').css('display', 'block');
$('#wps_countdown_dashboard').countDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': 0,
'sec': 15
},
omitWeeks: true,
onComplete: function() { $.modal.close(); }
});
}
});
(Change the hour, min, sec value… as you want)

Then press “Save Changes” button and your countdown timer is ready!

A live example of this tutorial is here: http://www.wpsubscribers.com/demo/category-5/post-with-popup-style-9.html

Step 2: (Optional) By default, my plugin will add the countdown timer to the end of the main popup content, however, you can change this location by switch the popup content text editor to HTML mod and then add these lines of code in anywhere as you like:

<div id="wps_countdown_dashboard">
<div class="dash days_dash"><span class="dash_title">days</span>
<div class="digit"></div>
<div class="digit"></div>
</div>
<div class="dash hours_dash"><span class="dash_title">hours</span>
<div class="digit"></div>
<div class="digit"></div>
</div>
<div class="dash minutes_dash"><span class="dash_title">minutes</span>
<div class="digit"></div>
<div class="digit"></div>
</div>
<div class="dash seconds_dash"><span class="dash_title">seconds</span>
<div class="digit"></div>
<div class="digit"></div>
</div>
</div>

Step 2: Choose OptimizePress theme and then select function.php file to edit:

Step 3: Find these lines of code in the function.php file ( depending on the version of OptimizePress, you may need to add the lines :

if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
wp_enqueue_script('jquery');
}

and replace  with: ( or adapt the lines to have )
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"), false, '1.7.1');
wp_enqueue_script('jquery');
}

(Change 1.3.2 to 1.7.1)

Now your theme is working with Wpsubscribers plugin

Wpsubscribers plugin works with all standard WordPress themes. In order for my plugin works correctly, your theme must call <?php get_footer(); ?> or <?php wp_footer(); ?> function, it’s Ok with almost 99% WordPress themes out-there.

In case, your Thesis theme can’t work with WPSubscribers plugin due to its own structure, this tutorial will show you how to make your Thesis theme works with this plugin:

Step 1: Login to your admin area and go to “Thesis OpenHook” page:

Step 2: Go to “WP Footer” box, and paste in these lines of code:
<?php
if (function_exists('wps_content_popup_footer')) { wps_content_popup_footer(); }
if (function_exists('wps_facebook')) { wps_facebook(); }
?>

or: (If your popup has problem with IE)

<script type="text/javascript">
jQuery(document).ready(function($){
if ($("#popup").length > 0){
$("#popup").modal({
onShow: function (dialog) {
if ( $.browser.msie ) {
if (!dialog) dialog = $.modal.impl.d
dialog.container.css('height', 'auto');
$.modal.update();
$.modal.setContainerDimensions();
$.modal.setPosition();
}
}
});
}
});
</script>
<?php
if (function_exists('wps_content_popup_footer')) { wps_content_popup_footer(); }
if (function_exists('wps_facebook')) { wps_facebook(); }
?>


Don’t forget to stick on the “Execute PHP on this hook” checkbox.

Press save button and your Thesis theme is now ready for Wpsubscribers plugin.