Acciones en web: Exit Popups
Exit Pop-Up
Es una herramienta muy útil a la hora de evitar que los usuarios de la marca abandonen el sitio. Aparece cuando el cursor del mouse se aproxima a los botones de cierre del navegador o pestaña.
Los pop-ups serán vistos por cualquier usuario que ingrese al sitio desde un ordenador y no requiere suscripción previa. Estarán visibles para el 100% del tráfico, independientemente del navegador o sistema operativo que utilice el usuario. Sólo se mostrarán cuando el puntero del mouse se acerque a los botones de cierre del navegador o pestaña.
Ingresa al módulo HUB de notificaciones
Selecciona la pestaña Acciones web
Selecciona la opción Exit Pop-ups
Crear Exit pop-up
Selecciona el botón Crear Nuevo, dentro de la pantalla inicial
Se abrirá una nueva ventana para personalizar el Exit pop-up.
Configuración
En la columna de la izquierda se encuentran las opciones de configuración. A la derecha, la vista previa del pop-up.
Configura el Exit pop-up
Nombre
Es de uso interno de la plataforma.
Título 1
Escribe un título principal.
Título 2
Se mostrará en un tamaño menor dentro de la pieza.
Color de fondo
Es el color que llevará el fondo del pop-up.
Tipografía
Selecciona una de las opciones que ofrece la plataforma.
Agregar imagen
Importa una imagen desde tu computadora. Dimensiones: 300x300 píxeles (1:1) (2MB)
Botón
Configura la leyenda y los colores del botón que llevará el pop-up.
URL de destino
Es el sitio al que redirigirá el botón. Al pegar la url de destino, se le asignará un utm para medir la performance de la herramienta. También se puede configurar el utm, desde la opción Configurar (Parametros UTM para Google Analytics).
Agregar botón de cierre
Agrega un botón para cerrar la notificación
Día y Horario
Selecciona los días y horarios en los que se mostrará el pop-up (por defecto, se encontrará todo el día activo).
Con esta configuración se puede incluir más de un pop-up en la misma página.
Se visualiza el Widget en...
Selecciona las páginas en las que mostrarás el pop-up. Se pueden elegir todas las páginas (por defecto), algunas páginas específicas o en todas las páginas exceptuando algunas.
Días hasta la próxima interacción
Con esta opción el pop-up se dejará de mostrar durante la cantidad de días especificada a los usuarios que ya hayan interactuado con la pieza.
Prefiero subir HTML
El HTML podrá incluir el contenido que desees: desde una simple imagen (que deberá estar hosteada en algún servidor), a una estructura compleja.
Click en el botón Guardar para finalizar
¿Cómo puedo customizar más mi Exit Pop-up?
Para acceder a esta opción, dirígete a la sección de configuración del exit pop-up y busca la opción Prefiero Subir html.
Allí podrás pegar el código que hayas creado para cargar tu propio diseño personalizado de notificación.
Configura tus preferencias
Día y hora en la que se muestra la notificación
Las páginas dónde quieres que se vea la notificación
Días para la próxima interacción
Siempre te recomendamos utilizar la plantilla de Icomm para trabajar con la misma estructura. La plantilla de Icomm ya está diseñada para adaptarse a los requerimientos del exit pop-up, por lo que puedes estar seguro de que tu diseño encajará perfectamente.
Copia esta plantilla HTML para Exit pop-ups de Icomm y úsala para crear tus diseños personalizados:
<div class="wpn_modal wpn-fade " id="wpn_popup_modal" tabindex="-1" role="dialog" aria-labelledby="wpn_popup_modal" aria-modal="true">
<div class="wpn-modal-dialog wpn-modal-dialog-centered">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
.wpn-fade {
transition: visibility .20s linear;
visibility: hidden;
display: none;
}
.wpn-show {
visibility: visible;
display: block;
}
.wpn-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
display: block;
z-index: 1000003;
}
.wpn-modal-dialog {
position: relative;
width: auto;
pointer-events: none;
}
.wpn-modal * {
box-sizing: border-box;
}
.wpn-modal-dialog-centered {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
min-height: calc(100% - 1rem);
}
.wpn-modal.wpn-fade .wpn-modal-dialog {
transition: -webkit-transform .3s ease-out;
transition: transform .3s ease-out;
-webkit-transform: translate(0, -50px);
transform: translate(0, -50px);
}
.wpn-modal {
padding-right: 15px;
}
.wpn-modal-dialog {
margin: .5rem;
}
@media (min-width: 576px) {
.wpn-modal-dialog-centered {
min-height: calc(100% - 3.5rem);
}
}
@media (min-width: 576px) {
.wpn-modal-dialog {
max-width: 464px;
margin: 1.75rem auto;
}
}
#wpn-modal-content {
padding: 40px;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
pointer-events: auto;
background-color: #e5efff !important;
color: #707070 !important;
background-clip: padding-box;
border-radius: .3rem;
outline: 0;
min-height: 270px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
#wpn-modal-content .wpn-modal-body {
display: flex;
flex-direction: column;
justify-content: space-around;
padding-right: 5px;
flex-grow: 1;
text-align: left;
}
#wpn-modal-content .wpn-modal-body.wpn-center {
text-align: center;
}
#wpn-modal-content .wpn-modal-img-container {
min-width: 190px;
max-width: 190px;
margin: 0 auto;
}
#wpn-modal-content #wpn-modal-title {
font-size: 24px;
line-height: 24px;
color: #707070 !important;
}
#wpn-modal-content #wpn-modal-subtitle {
font-size: 14px;
line-height: 18px;
color: #707070 !important;
}
#wpn-modal-content #wpn-popup-btn {
display: inline-block;
color: #ffffff !important;
background-color: #e69d43 !important;
border-color: #007bff;
font-weight: bold;
padding: 11px 21px 9px 21px;
font-size: 15px;
line-height: 15px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24);
border-radius: 2px;
}
#wpn-modal-content #wpn-popup-btn:hover {
text-decoration: none;
}
.wpn-btn-container {
clear: both;
}
.wpn-btn-container #wpn_close_banner_dialog {
position: absolute;
top: 10px;
right: 10px;
background-color: transparent !important;
border: none;
}
.wpn-modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 1000001;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
}
#wpn-modal-img {
max-width: 100%;
height: auto;
}
.wpn-popup-preview-powered {
position: absolute;
bottom: 5px;
right: 10px;
}
.wpn-popup-preview-powered #wpn-popup-powered {
fill: #707070 !important;
}
button.wpn-popup-close {
color: #707070 !important;
opacity: .4;
float: right;
font-size: 1.5rem;
line-height: 1;
text-shadow: 0 1px 0 #fff;
}
</style>
<div id="wpn-modal-content">
<div class="wpn-btn-container">
<button type="button" class="wpn-popup-close " id="wpn_close_banner_dialog" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="wpn-modal-body ">
<div id="wpn-modal-title">No te vayas antes de conocer nuestras ofertas</div>
<div id="wpn-modal-subtitle">Encuentre productos hasta 50% OFF</div>
<div>
<a id="wpn-popup-btn" href="http://buenazo.com" rel="nofollow">
Ir a ofertas </a>
</div>
</div>
<div class="wpn-modal-img-container">
<img src="/images/popups/example.png" alt="" id="wpn-modal-img">
</div>
</div>
</div>
</div>En cuanto al código HTML, tienes total libertad para incluir el contenido que desees. Desde una simple imagen (que deberá estar alojada en algún servidor) hasta una estructura compleja, puedes hacer lo que quieras con tu diseño. La dimensión específica dependerá exclusivamente de lo que desees generar en función de la estrategia de tu sitio web.
Icomm Beta AI
Cómo activar Exit Popups en web
Es una herramienta muy útil a la hora de evitar que los usuarios de la marca abandonen el sitio. Aparece cuando el cursor del mouse se aproxima a los botones de cierre del navegador o pestaña.
Los pop-ups serán vistos por cualquier usuario que ingrese al sitio desde un ordenador y no requiere suscripción previa. Están visibles para el 100% del tráfico, independientemente del navegador o sistema operativo que utilice el usuario. Sólo se mostrarán cuando el puntero del mouse se acerque a los botones de cierre del navegador o pestaña.
Ve al módulo Acciones en web
Ingresa a la sección Exit Popups
Crear Exit popup
Selecciona el botón Crear Nuevo, dentro de la pantalla inicial
Se abrirá una nueva ventana para personalizar el Exit pop-up.
Configuración
En la columna de la izquierda se encuentran las opciones de configuración. A la derecha, la vista previa del pop-up.
Configura el Exit pop-up
Nombre
Es de uso interno de la plataforma.
Título 1
Escribe un título principal.
Título 2
Se mostrará en un tamaño menor dentro de la pieza.
Color de fondo
Es el color que llevará el fondo del pop-up.
Tipografía
Selecciona una de las opciones que ofrece la plataforma.
Agregar imagen
Importa una imagen desde tu computadora. Dimensiones: 300x300 píxeles (1:1) (2MB)
Botón
Configura la leyenda y los colores del botón que llevará el pop-up.
URL de destino
Es el sitio al que redirigirá el botón. Al pegar la url de destino, se le asignará un utm para medir la performance de la herramienta. También se puede configurar el utm, desde la opción Configurar (Parametros UTM para Google Analytics).
Agregar botón de cierre
Agrega un botón para cerrar la notificación
Día y Horario
Selecciona los días y horarios en los que se mostrará el pop-up (por defecto, se encontrará todo el día activo).
Con esta configuración se puede incluir más de un pop-up en la misma página.
Se visualiza el Widget en...
Selecciona las páginas en las que mostrarás el pop-up. Se pueden elegir todas las páginas (por defecto), algunas páginas específicas o en todas las páginas exceptuando algunas.
Programa una fecha de inicio y finalización
Programar una fecha de inicio y fin para el pop-up
Días hasta la próxima interacción: El pop-up se dejará de mostrar por la cantidad de días especificada para los usuarios que hayn interactuado con el.
Retraso antes de mostrar el exit pop-up: Ingrese la cantidad de segundos que el pop-up tardará en aparecer
Click en el botón Guardar para finalizar
¿Cómo puedo customizar más mi Exit Pop-up?
Para acceder a esta opción, dirígete a la sección de configuración del exit pop-up y busca la opción Prefiero Subir html.
Allí podrás pegar el código que hayas creado para cargar tu propio diseño personalizado de notificación.
Configura tus preferencias
Día y hora en la que se muestra la notificación
Las páginas dónde quieres que se vea la notificación
Programar fecha de inicio y finalización:
Días hasta la próxima interacción: El pop-up se dejará de mostrar por la cantidad de días especificada para los usuarios que hayan interactuado con el.
Retraso antes de mostrar el exit pop-up: Ingrese la cantidad de segundos que el pop-up tardará en aparecer
Siempre te recomendamos utilizar la plantilla de Icomm para trabajar con la misma estructura. La plantilla de Icomm ya está diseñada para adaptarse a los requerimientos del exit pop-up, por lo que puedes estar seguro de que tu diseño encajará perfectamente.
Copia esta plantilla HTML para Exit pop-ups de Icomm y úsala para crear tus diseños personalizados:
<div class="wpn_modal wpn-fade " id="wpn_popup_modal" tabindex="-1" role="dialog" aria-labelledby="wpn_popup_modal" aria-modal="true">
<div class="wpn-modal-dialog wpn-modal-dialog-centered">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
.wpn-fade {
transition: visibility .20s linear;
visibility: hidden;
display: none;
}
.wpn-show {
visibility: visible;
display: block;
}
.wpn-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
display: block;
z-index: 1000003;
}
.wpn-modal-dialog {
position: relative;
width: auto;
pointer-events: none;
}
.wpn-modal * {
box-sizing: border-box;
}
.wpn-modal-dialog-centered {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
min-height: calc(100% - 1rem);
}
.wpn-modal.wpn-fade .wpn-modal-dialog {
transition: -webkit-transform .3s ease-out;
transition: transform .3s ease-out;
-webkit-transform: translate(0, -50px);
transform: translate(0, -50px);
}
.wpn-modal {
padding-right: 15px;
}
.wpn-modal-dialog {
margin: .5rem;
}
@media (min-width: 576px) {
.wpn-modal-dialog-centered {
min-height: calc(100% - 3.5rem);
}
}
@media (min-width: 576px) {
.wpn-modal-dialog {
max-width: 464px;
margin: 1.75rem auto;
}
}
#wpn-modal-content {
padding: 40px;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
pointer-events: auto;
background-color: #e5efff !important;
color: #707070 !important;
background-clip: padding-box;
border-radius: .3rem;
outline: 0;
min-height: 270px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
#wpn-modal-content .wpn-modal-body {
display: flex;
flex-direction: column;
justify-content: space-around;
padding-right: 5px;
flex-grow: 1;
text-align: left;
}
#wpn-modal-content .wpn-modal-body.wpn-center {
text-align: center;
}
#wpn-modal-content .wpn-modal-img-container {
min-width: 190px;
max-width: 190px;
margin: 0 auto;
}
#wpn-modal-content #wpn-modal-title {
font-size: 24px;
line-height: 24px;
color: #707070 !important;
}
#wpn-modal-content #wpn-modal-subtitle {
font-size: 14px;
line-height: 18px;
color: #707070 !important;
}
#wpn-modal-content #wpn-popup-btn {
display: inline-block;
color: #ffffff !important;
background-color: #e69d43 !important;
border-color: #007bff;
font-weight: bold;
padding: 11px 21px 9px 21px;
font-size: 15px;
line-height: 15px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24);
border-radius: 2px;
}
#wpn-modal-content #wpn-popup-btn:hover {
text-decoration: none;
}
.wpn-btn-container {
clear: both;
}
.wpn-btn-container #wpn_close_banner_dialog {
position: absolute;
top: 10px;
right: 10px;
background-color: transparent !important;
border: none;
}
.wpn-modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 1000001;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
}
#wpn-modal-img {
max-width: 100%;
height: auto;
}
.wpn-popup-preview-powered {
position: absolute;
bottom: 5px;
right: 10px;
}
.wpn-popup-preview-powered #wpn-popup-powered {
fill: #707070 !important;
}
button.wpn-popup-close {
color: #707070 !important;
opacity: .4;
float: right;
font-size: 1.5rem;
line-height: 1;
text-shadow: 0 1px 0 #fff;
}
</style>
<div id="wpn-modal-content">
<div class="wpn-btn-container">
<button type="button" class="wpn-popup-close " id="wpn_close_banner_dialog" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="wpn-modal-body ">
<div id="wpn-modal-title">No te vayas antes de conocer nuestras ofertas</div>
<div id="wpn-modal-subtitle">Encuentre productos hasta 50% OFF</div>
<div>
<a id="wpn-popup-btn" href="http://buenazo.com" rel="nofollow">
Ir a ofertas </a>
</div>
</div>
<div class="wpn-modal-img-container">
<img src="/images/popups/example.png" alt="" id="wpn-modal-img">
</div>
</div>
</div>
</div>En cuanto al código HTML, tienes total libertad para incluir el contenido que desees. Desde una simple imagen (que deberá estar alojada en algún servidor) hasta una estructura compleja, puedes hacer lo que quieras con tu diseño. La dimensión específica dependerá exclusivamente de lo que desees generar en función de la estrategia de tu sitio web.
Actualizado el: 16/12/2024
¡Gracias!