Como crear un Popup Inteligente

Como crear un Popup Inteligente

Después de un tiempo sin poder publicar nada en el blog, por cuestiones de trabajo, el día de hoy hablaremos un poco sobre la situación de los popups hoy en día. Los popups pueden ser bastantes molestos si el webmaster no sabe como utilizarlos, es por eso que el día de hoy aparte de mostrarte como crear un popup inteligente con html, jquery y un plugin llamado bpopup.. también hablaremos de las mejores practicas a la hora de mostrar popups a tus visitantes, te animas? 😛

Los popups en la actualidad

Navegando en internet nos podemos encontrar sitios en los que parece que entre mas intentas cerrar estos cuadros emergentes mas se multiplican como si fuesen conejos, esto suele ser bastante molesto para todos nosotros sumandole que algunos sitios incluso juegan con nosotros a la hora de intentar cerrar estos popups.

Existen tambien otros sitios de internet que no son tan malos y solo nos muestran uno, donde esta el problema aqui? pues el problema es que cada que cargas un pagina en su sitio te vuelve a aparecer el mismo popup una vez mas! parece que estos sitios no tienen memoria.

El problema en si no es el uso de popups sino el mal uso que les dan algunos webmasters, ahora si que los popups son una herramienta de una talvez.. mente malvada.

El popup es una gran herramienta para obtener suscritores, compradores, y en si cumplir cualquier objetivo que tengamos en mente, es por eso que veremos una pequeña lista de puntos a tomar en cuenta a la hora de hacer uso de los popups en tu web y no darle un dolor de cabeza a tus visitantes, o peor aun, pierdas lectores por intentar conseguir algo mas de ellos.


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

  • NO muestres un popup los primeros 20 segundos.

Vamos hombre! dale un poco de tiempo a tus visitantes de que se acomoden y se den una pequeña idea de de que va tu web, lo ideal serian minimo 20 segundos. Los visitantes que entran a una web que no conocen e inmediatamente obtienen un enorme popup no suelen leerlo e intentan cerrarlo lo mas pronto posible.

  • Haz que tus popups NO se muestren cada vez que el usuario cargue otra pagina de tu sitio.

A menos que así lo quieras, evita que tu popup cargue cada que el usuario cargue otra pagina de tu sitio cuando este navegando, si ya cerro este popup antes y le vuelve a salir crees que sera una buena experiencia para el? aquí puedes hacerlo de varias formas, mas adelante lo haremos mediante sesiones.

  • Haz que tu popup sea fácil de cerrar.

Cerrar un popup no tiene porque ser un reto para tus visitantes, botones minúsculos de cerrar que cambian de lugar NO es una opción, no solo coloques un gran botón de cerrar .. también haz que se cierre cuando el usuario de click fuera de tu popup.

  • Coloca contenido interesante y de ayuda a tus visitantes.

Si colocaras un formulario de suscripcion a tu web intenta ofrecer algo a cambio que motive esta accion por parte del usuario, coloca promociones que tus lectores apreciaran, coloca tu mejor contenido que active a tus visitantes a cumplir tu objetivo, etc.. son algunos tips que debes tener en cuenta para mejorar la calidad de tus popups.

 

Ahora veremos como hacer esto 😛

Nuestro Html

<html>
<head><title>PopUp Facil</title>
</head>
<body>

<div>
<h1>Mi sitio web simple</h1>
<p>Contenido normal de mi web, pero de repente ..</p>
</div>

<!-- este es el div del popup que queremos que aparezca -->
<div id="popup" style="display:none;width:600px;height:544px;border:0;background-color: rgba(255, 255, 255, 0);box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.60);border-bottom-right-radius:30px;"><img src="https://jonathanmelgoza.com/wp-content/uploads/2015/03/foros-jonathan-melgoza.jpeg" width="600" height="544" /></div>
</body>
</html>

Nota que el div donde esta el contenido de nuestro popup inteligente tiene un style con un display none, esto es por que no queremos que se muestre como tal como contenido de la pagina.

El Popup y la parte inteligente

Ahora necesitamos cargar jquery a nuestro proyecto,

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

y también necesitamos descargar la librería bpopup desde su web oficial e incluirla en nuestro proyecto así,

<script src="js/jquery.bpopup.min.js"></script>

Despues de esto vamos a implementar el tiempo de espera para lanzar nuestro popup y un sistema de sesiones para evitar que vuelva a mostrarse a un mismo usuario durante un tiempo ( el tiempo de caducidad de esta cookie se puede cambiar facilmente en la funcion writeCookie ), la funcionalidad de cerrar popup al dar click fuera de este ya viene incluida con la librería bpopup,

Dentro de etiquetas <script> escribe lo siguiente:

como-crear-un-popup-inteligente-2

y le resultado es el siguiente..

como-crear-un-popup-inteligente

Como crear un Popup Inteligente

Clic para valorar esta información
[Total: 0 Promedio: 0]