Customiza tus Banner y Exit Pop-Up de manera rápida y sencilla

Los Banners son una herramienta útil para aumentar el acceso de los usuarios a tus ofertas y promociones. Los Exit Pop-Up, por otro lado, son los grandes retenedores de tráfico y convierten a un usuario que está por abandonar tu sitio en un posible cliente.

Aumenta la conversión, nutre tus bases de datos y aumenta la suscripción a tus newsletter con comunicaciones al 100% del tráfico de tu eCommerce.

Aquí te presentamos una manera rápida y sencilla para modificar tus Exit Pop-Up y Banner al copiar y modificar tres simples indicadores en el código.

Banner:

A tener en cuenta:

El código tomará el tamaño real de la imagen, no es necesario modificar el tamaño dentro del código.
Por defecto el banner está posicionado en el centro de la pantalla, pero se puede mover hacia la izquierda o derecha si es lo que quieres hacer.
Al ser un banner personalizado en HTML, debes incluir la UTM. Se recomienda hacer uso del mismo módulo de HUB para configurar el link.

Centra tu atención en las siguientes modificaciones. En la etiqueta <a href= se coloca el link que refiere a la sección donde se mostrará el Banner en tu sitio. La etiqueta img src= es la imagen del Banner en sí. Por último, debes eliminar el código correspondiente si quieres colocar el Banner a la derecha o a la izquierda de la página.

Código:

<div id="wpn-banner">
    <div>
        <span class="pclose" id="wpn-close-btn">×</span>
        <div id="wpn-image">
            <a href="https://www.chamela.co/collections/nuevo?utm_campaign=Nueva%20Capsula%20Rising&utm_medium=banner&utm_source=webpush" style="text-decoration: none;" id="wpn-banner-link">
                <img src="https://imgfz.com/i/YdKQ9Cb.png" style="width: 100%; height: auto;" alt="Banner Image"> <!-- Este es el link de la imagen -->
            </a>
        </div>
    </div>
</div>

<style>
    /* Estilos para el banner */
    #wpn-banner {
        position: fixed;
        bottom: 0;
        left: 0; /* Quitar esta propiedad para posicionar a la derecha*/
        right: 0; /* Quitar esta propiedad para posicionar a la izquierda*/
        z-index: 9999;
        text-align: center; 
    }

    #wpn-banner > div {
        position: relative;
        display: inline-block; 
        max-width: 100%; 
    }

    /* Estilos para el botón */
    .pclose {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        text-align: center;
        background-color: white;
        font-size: 25px;
        font-weight: bold;
        color: black;
        border-radius: 5px;
        margin: 10px;
    }

    .pclose:hover,
    .pclose:focus {
        color: #FF0000;
        cursor: pointer;
    }

    #wpn-image {
        width: 100%;
        height: auto; /* Ajusta automáticamente la altura según el contenido */
    }

    #wpn-banner-link img {
        width: auto; /* Ancho automático para mantener la proporción de la imagen */
        max-width: 100%; /* La imagen no superará el ancho del contenedor */
        height: auto; /* Ajusta automáticamente la altura para mantener la proporción */
        border-radius: 10px 10px 0px 0px;
    }
</style>

<script>
    var span = document.querySelector(".pclose");
    var modal = document.getElementById("wpn-banner");
    setTimeout(function () {
        modal.style.visibility = "visible";
    }, 3000);
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    span.onclick = function () {
        modal.style.display = "none";
    }
</script>

Pasos para editar el código HTML del Banner

Configura la etiqueta href=

En esta etiqueta se coloca el link donde se va a mostrar la pieza dentro de tu sitio:

<a href="https://www.chamela.co/collections/nuevo?utm_campaign=Nueva%20Capsula%20Rising&utm_medium=banner&utm_source=webpush" style="text-decoration: none;" id="wpn-banner-link">

Configura la etiqueta src=

Aquí se coloca el link de la imagen. Pega el link de la imagen que deseas mostrar en la pieza:

<img src="https://imgfz.com/i/YdKQ9Cb.png" style="width: 100%; height: auto;" alt="Banner Image"> <!-- Este es el link de la imagen -->

Configura la posición del banner

En este encabezado debes borrar el comando señalado para colocar el banner a la izquierda o a la derecha, o dejarlo como está para que automáticamente se coloque en el centro.

<style>

    /* Estilos para el banner */

    #wpn-banner {
        position: fixed;
        bottom: 0;
        left: 0; /* Quitar esta propiedad para posicionar a la derecha*/
        right: 0; /* Quitar esta propiedad para posicionar a la izquierda*/
        z-index: 9999;
        text-align: center; 
    }

    #wpn-banner > div {
        position: relative;
        display: inline-block; 
        max-width: 100%; 
    }

Exit Pop-Up

A tener en cuenta:

El código tomará el tamaño real de la imagen, no es necesario modificar el tamaño dentro del código.
Por defecto el Exit Pop-Up está posicionado en el centro de la pantalla, pero se puede mover hacia la izquierda o derecha si es lo que quieres hacer.
Al ser un Exit Pop Up personalizado en HTML, debes incluir el UTM. Se recomienda hacer uso del mismo módulo de HUB para configurar el link.

Centra tu atención en las siguientes modificaciones. En la etiqueta <a href= se coloca el link que refiere a la sección donde se mostrará el Exit Pop-up en tu sitio. La etiqueta img src= es la imagen del Exit Pop-up en sí. Y por último, teniendo en cuenta que el lado izquierdo es el 0% y el lado derecho el 100%, debes determinar el porcentaje para indicar el posicionamiento horizontal de la pieza.

<div id="wpn-overlay"></div>
<div id="wpn-popup">
    <div>
        <span class="pclose" id="wpn-popup-btn">×</span>
        <div id="wpn-image">
            <a href="https://www.arturocalle.com/" 
style="text-decoration: none;" id="wpn-popup-link">
                <img 
src="https://americaneagle.vteximg.com.br/arquivos/PopUpIcom_20240412.png" style="width: auto; height: auto;" alt="popup Image"> 
            </a>
        </div>
    </div>
</div>

<style>
    /* Estilos para el banner */
    #wpn-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        text-align: center; /* Centra horizontalmente el contenido */
    }

    #wpn-popup > div {
        position: relative;
        display: inline-block; /* Ajusta el ancho al contenido */
        max-width: 100%; /* Ancho máximo del banner */
    }

    /* Estilos para el botón */
    .pclose {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        text-align: center;
        background-color: white;
        font-size: 25px;
        font-weight: bold;
        color: black;
        border-radius: 5px;
        margin: 10px;
    }

    .pclose:hover,
    .pclose:focus {
        color: #FF0000;
        cursor: pointer;
    }

    #wpn-image {
        width: 100%;
        height: auto; /* Ajusta automáticamente la altura según el contenido */
    }

    #wpn-popup-link img {
        width: auto; /* Ancho automático para mantener la proporción de la imagen */
        max-width: 100%; /* La imagen no superará el ancho del contenedor */
        height: auto; /* Ajusta automáticamente la altura para mantener la proporción */
        border-radius: 10px 10px 10px 10px;
    }

    /* Estilos para el overlay */
    #wpn-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
        z-index: 9998; /* Asegura que el overlay esté por debajo del banner */
    }

</style>

<script>
    var span = document.querySelector(".pclose");
    var modal = document.getElementById("wpn-popup");
    setTimeout(function () {
        modal.style.visibility = "visible";
    }, 3000);
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
            document.getElementById("wpn-overlay").style.display = "none"; // Oculta el overlay al cerrar el banner
        }
    }
    span.onclick = function () {
        modal.style.display = "none";
        document.getElementById("wpn-overlay").style.display = "none"; // Oculta el overlay al cerrar el banner
    }
</script>

Pasos para editar el código

Configura la etiqueta href=

En esta etiqueta se coloca el link donde va a dirigir la pieza:

<a href="https://www.ae.com.co/ver-ropa?utm_campaign=bancolombia&utm_medium=popup&utm_source=webpush" style="text-decoration: none;" id="wpn-popup-link">

Configura la imagen del Exit Pop-up

Aquí se coloca el link de la imagen. Pega el link de la imagen que deseas mostrar en la pieza:

background-image: url('https://americaneagle.vteximg.com.br/arquivos/PopUpIcom_20240412.png');

Configura la posición del Exit Pop-Up

En este encabezado se puede modificar la posición del Exit Pop-Up ajustando los valores mencionados.

#wpn-popup {
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background: rgba(0, 0, 0, 0.62);
            display: flex;
            justify-content: center;
            align-items: center;

Actualizado el: 01/07/2024