Aumenta los suscriptores de tu web
Como sé que no te gusta perder el tiempo, aquí tienes lo que estabas buscando.
Un ejemplo funcional, o para descargar o ver el código en github.
0. El resultado
1. ¿Qué necesitas?
jQuery, Magnific Popup, jQuery Cookie
2. En el HEAD
Llamamos a la hoja de estilos (realmente es un poco de estilos del popup y para el popup). Además hago una llamada al tipo de letra ‘Arvo‘ de google fonts.
|
1 2 3 4 |
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/magnific-popup.css"> |
3. En el BODY
Aquí podrás ver dos bloques. El primer div es el formulario de suscripción, esto puede ser cambiado por aquello que quieras, un cuadro de me gusta de facebook, un aviso, o en este caso un formulario de suscripción. El segundo bloque son las diferentes llamadas a los archivos javascripts necesarios para que todo funcione correctamente
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div id="test-popup" class="white-popup mfp-hide"> <div id="msg-form-wysija-html54874562a2a31-1" class="wysija-msg ajax"></div> <form id="form" method="post" action="#" class="form"> <h3>SUSCRÍBETE</h3> <p>¿Quieres saber cómo poner este popup en tu web <br/>y conseguir así más suscriptores?</p> <p>Déjanos tu correo electrónico <br/>y podrás acceder a este tutorial de forma exclusiva</p> <p><input type="text" name="email" title="Correo Electrónico" value="" /> <input type="submit" value="¡Suscríbete!" /> </p> <p class="centerp"><small> <em>Y siempre podrás desuscribirte si no quieres recibir más correos</em></small> </p> </form> </div> <!-- SCRIPTS --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.cookie.js"></script> <script type="text/javascript" src="./js/jquery.magnific-popup.min.js"></script> <script type="text/javascript" src="./js/script.js"></script> |
4. JAVASCRIPT necesario
Finalmente este pequeño trozo de código javascript es el que lanzará el popup en el tiempo que le digamos para no invadir al usuario, y a la vez creará una cookie para saber si el usuario ya a visto o no el aviso, así podrás definir un tiempo de permanencia de la cookie y así por ejemplo, volver a mostrarlo otra vez por ejemplo pasados 2-3 días.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$(document).ready(function() { $('.open-popup-link').magnificPopup({ type:'inline', midClick: true }); $(function() { setTimeout(function() { if ($.cookie('test_status') != '1') { //show popup here $('.open-popup-link').magnificPopup({ type:'inline', midClick: true }).magnificPopup('open'); // set cookie here if not previous set var date = new Date(); var minutes = (60*24*3); //60 minutos x 24 horas x 3 días date.setTime(date.getTime() + (minutes * 60 * 1000)); $.cookie('test_status', '1', {expires: date}); }else{ console.log('Gracias por volver a visitarnos'); } }, 10000); }); }); |
Con todo esto podrás tener tu popup para conseguir aumentar tus suscriptores de una forma no invasiva ni molesta, y así podrás conseguir mejores objetivos y personas más interesadas en tu contenido o servicios ofertados.
Aumenta los suscriptores de tu web de forma sencilla, ofreciéndoles algo.
Hola no entiendo, y luego como envia los emails a los usuarios suscritos, como veo los email de los usuarios que ingresaron los emails?
Gracias.
El sistema de envío de correo puede ser perfectamente mailchimp, te ofrece pequeños bloques de código para generar el formulario. Igual ocurre si usas otros sistemas, tipo WordPress.
Hola Francisco, he probado el ejemplo y funciona perfectamente. Gracias por la descarga. Me gustaria que saltase en un tiempo mas corto y no encuentro donde cambiar el valor de los 20 segundos por otro mas pequeño. Gracias por tu colaboración. Saludos.
Hola Luis, en la línea 24 puedes ver el tiempo, está a 10 segundos (10000 milisegundos) https://github.com/Iguannaweb/suscripcion_popup/blob/master/js/script.js