Customize your Banner and Exit Pop-Up quickly and easily

Banners are a useful tool to increase user access to your offers and promotions. Exit Pop-Ups, on the other hand, are great traffic retainers and convert a user who is about to leave your site into a potential customer.

Increase conversion, nourish your databases and increase subscription to your newsletter with communications to 100% of your eCommerce traffic.

Here's a quick and easy way to modify your Exit Pop-Up and Banner by copying and modifying three simple flags in the code.

Banner:

To consider:

The code will take the actual size of the image, there is no need to modify the size within the code.
By default the banner is positioned in the center of the screen, but it can be moved to the left or right if that is what you want to do.
As it is a custom banner in HTML, you must include the UTM. It is recommended to use the same HUB module to configure the link.

Focus your attention on the following modifications. In the <a href= tag, the link that refers to the section where the Banner will be displayed on your site is placed. The img src= tag is the Banner image itself. Finally, you must remove the corresponding code if you want to place the Banner on the right or left of the page.

Code:

<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>

Steps to edit the Banner HTML code

Set the href= tag

In this label you place the link where the piece will be displayed on your site:

<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">

Set the src= tag

Here is the link to the image. Paste the link of the image you want to show in the piece:

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

Set the banner position

In this header you must delete the command indicated to place the banner on the left or right, or leave it as is so that it is automatically placed in the center.

<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

To consider:

The code will take the actual size of the image, there is no need to modify the size within the code.
By default the Exit Pop-Up is positioned in the center of the screen, but it can be moved to the left or right if that is what you want to do.
As it is a customized Exit Pop Up in HTML, you must include the UTM. It is recommended to use the same HUB module to configure the link.

Focus your attention on the following modifications. In the <a href= tag, place the link that refers to the section where the Exit Pop-up will be displayed on your site. The img src= tag is the image of the Exit Pop-up itself. And finally, taking into account that the left side is 0% and the right side is 100%, you must determine the percentage to indicate the horizontal positioning of the piece.

<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>

Steps to edit the code

Set the href= tag

In this label the link is placed where the piece will be directed:

<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">

Configure the Exit Pop-up image

Here is the link to the image. Paste the link of the image you want to show in the piece:

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

Set the position of the Exit Pop-Up

In this header you can modify the position of the Exit Pop-Up by adjusting the mentioned values.

#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;

Updated on: 07/01/2024