Como poner un Exit-Intent Popup en tu sitio WordPress

En este pequeño tutorial te voy a enseñar a poner un Exit-Intent Popup en tu sitio de WordPress sin que tengas que gastar un centavo.

La mayoría de plugins que existen en el repositorio de WordPress están muy congestionados en funciones, o limitados para forzarte a comprar su versión “premium”, o de plano están muy chafas.

Yo encontré un plugin gratuito, muy simplificado y que con un poquito de creatividad y originalidad lo puedes hacer lucir y funcionar súper bien.

Primeramente… ¿Qué es un Exit-Intent Popup?

Supongo que si llegaste aquí es por que ya sabes que es un exit-intent popup y estás en busca de uno para tu sitio. Si no lo sabes te lo voy a resumir… (no te emociones, no es castigo)

Un exit-intent popup es un popup (o ventana emergente) que aparece justo cuando tu sitio detecta que el puntero del ratón del usuario abandona el área de tu página y comienza a flotar por encima de la barra superior del navegador.

Es un método efectivo de marketing que se emplea con el propósito de tener una última oportunidad para comunicar algo importante a tus visitas. Probablemente ya te ha tocado ver alguno.

Es muy común que los utilicen para ofrecer algún descuento, capturar el correo electrónico de la vista para después hacerle re-marketing por medio de emails, o simplemente tratan de recuperar la atención del usuario para que no abandone el sitio.

En mi caso yo lo estoy usando de una manera medio chusca y cachonda (con una caricatura mía en calzoncillos) para intentar ganarme el correo electrónico de visitas que puedan estar interesadas en mi contenido futuro. ¿Quieres verlo en acción? Intenta abandonar mi sitio.

Volviendo al plugin..

El plugin se llama Exit Popup por Brontobytes y lo puedes conseguir aquí. También lo puedes instalar desde tu instalación de WordPress.

Estos son los ajustes tal y como yo los configure:

Configuracion del plugin Exit Popup

Ahora lo que realmente hará la diferencia es lo que pongas en la casilla de Body (HTML). De hecho esta es la razón por la que me gustó este plugin. Nos da completa flexibilidad en cuanto a la apariencia de nuestro popup siempre y cuando sepamos un poco de HTML y CSS.

Aquí te paso el código que tienes que pegar justo ahí para que tu popup luzca igual de chidote que el mio:

<style>
#newsletter {
  font: 14px/1.6 Courier, 'Courier New', monospace;
  color: #444444!important;
}
#newsletter img {
  max-width: 280px;
  float: left;
  margin-right: 40px;
  margin-top: -30px;
}
#newsletter h1 {
  margin-top: 30px;
  margin-bottom: 10px;
  line-height: 1.2em;
  text-transform: uppercase;
  #222222;
}
#exitpopup-modal p {
  color: #444444;
}
#exitpopup-modal .exitpopup-modal-footer {
  position: absolute;
  bottom: 15px;
  left: 20px;
  text-align: left;
  width: 72px;
  font-size: 12px;
}
#exitpopup-modal .exitpopup-modal-footer p {
  color: #b2b2b2;
  border-bottom: none;
}
</style>

<div id="newsletter">
  <img src="XXXXX">
  <h1>¿Quieres más de este manjar?</h1>
  <p>Deja tu email y prometo notificarte cuando ponga nuevo contenido.</p>
  [SORTCODE]
</div>

Simplemente remplaza [SORTCODE] con ya sea el shortcode de tu formulario o botón, dependiendo el propósito de tu popup. También en <img src="XXXXX"> remplaza XXXXX por la dirección URL de tu imagen y listo.

Si quieres crear tu propia caricatura visita Bitmoji e instala su extensión para Chrome. También es gratis.

Deja un Comentario