> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.icommkt.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Personalización: Hub Banners

El banner es una herramienta muy útil a la hora de comunicar o vender algún acontecimiento/producto/evento particular. Los banners serán vistos por cualquier usuario que ingrese al sitio, sin necesidad de una suscripción previa.

1. Ingresa al módulo **Personalización**.
2. Selecciona la sección **Hub** y haz click en **Banners.**

![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/b/4/e4b41ef8ae96c800/captura-de-pantalla-2025-11-13_182khyh.png)

|| La pantalla inicial muestra una lista de los diferentes banners configurados en la plataforma y algunas métricas.

### Crear Banner

1. Selecciona el botón **Crear banner**, dentro de la pantalla inicial.

![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/b/4/e4b41ef8ae96c800/captura-de-pantalla-2025-11-13_covaeu.png)

Se abrirá una nueva ventana para seleccionar la plantilla del banner a personalizar. 

### Configuración

* Texto simple

![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/b/4/e4b41ef8ae96c800/captura-de-pantalla-2025-11-13_j72vvf.png)

* Contador

![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/b/4/e4b41ef8ae96c800/captura-de-pantalla-2025-11-13_i5dt8h.png)

Selecciona el tipo de banner que desees, elige una plantilla para comenzar a editar y haz click en **Personalizar plantilla.**

En la columna de la izquierda se encuentran las opciones de configuración. A la derecha, la vista previa del banner. 

2. Configura el banner

* **Nombre**
Es de uso interno de la plataforma.

* **Ubicación en el sitio**
* Inferior
* Superior

* **Título**
Es el título que se mostrará en el banner.

* **Color de fondo**
Es el color que llevará el fondo del banner.

* **Tipografía**
Selecciona una de las opciones que ofrece la plataforma.

* **Botón**
Configura la leyenda y los colores del botón que llevará el banner.

* **URL de destino**
Es el sitio al que redirigirá el botón al hacer click sobre el banner. 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** (Parámetros UTM para Google Analytics). 

* **Día y Horario**
Selecciona los días y horarios en los que se mostrará el banner (por defecto, se encontrará todo el día activo).

|| Con esta configuración se puede incluir más de un banner en la misma página.

* **Se visualiza el Widget en...**
Selecciona las páginas en las que mostrarás el banner. Se pueden elegir todas las páginas (por defecto), alguna/s páginas específicas o en todas las páginas exceptuando algunas/a.

* **Programa una fecha de inicio y finalización**
Programar una fecha de inicio y fin para el banner: puedes seleccionar fechas específicas para mostrar el banner en el sitio.

* **Días hasta la próxima interacción** 
El banner se dejará de mostrar por la cantidad de días especificada para los usuarios que hayn interactuado con el.


![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/image_hm2wfv.png)

3. Click en el botón **Guardar** para finalizar.

|| Los banners estarán visibles para el 100% del tráfico, independientemente del navegador o sistema operativo que utilice el usuario.

### ¿Cómo puedo customizar más mi Banner?

1. Para acceder a esta opción, dirígete a la sección de configuración del banner y busca la opción **Prefiero Subir HTML**.

2. Allí podrás pegar el código que hayas creado para cargar tu propio diseño personalizado de notificación.

* El HTML podrá incluir el contenido que desees: desde una simple imagen (que deberá estar hosteada en algún servidor), a una estructura compleja.
* No hay una dimensión específica, depende exclusivamente de lo que quieras generar en función de tu estrategia, y de tu propio sitio.

Utiliza este código HTML de referencia para realizar tu configuración: Si quieres ubicar el Banner en el margen inferior modifica en el HTML la palabra “top”por “bottom”. “bottom: 5px”, por “top: 5px”.

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcJVKt37FjcVcAVi9v97oG9qBCAmXrlE71N7C99Bf0C-_pxLxo_Sv9a8vQbvWu_OCcqX8LWIxpBvKSO9jf0kEaWo5MWP1EfpqivwKzM-ep67kv7ymNiSY90WsntcK2fLL5bLPoOCSObU92sG39eTAHEt6rM?key=9JeVr2HWREvbzGrh2U7CZg)

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXct-lkOhuwP9Uz-9iHWeKgHEukvMVEfEyvBblCuKBmNAgBqZa7lrcBviOGnDhmPTKt9WOzHjB-EfvQRBcgQtbWACR1B_LtGUEEQhfesM38XYys5D7gCLI6AxXmzWTpllV6hViPtLhB0dj7SDSg1jU3Z4bT_?key=9JeVr2HWREvbzGrh2U7CZg)

3. Configura tus preferencias:

* Día y hora en la que se muestra el banner.

* Las páginas dónde quieres que se vea el banner.

* **Programa una fecha de inicio y finalización:**
Programar una fecha de inicio y fin para el banner: puedes seleccionar fechas específicas para mostrar el banner en el sitio.

* **Días hasta la próxima interacción** 
El banner se dejará de mostrar por la cantidad de días especificada para los usuarios que hayan interactuado con él.

Siempre te recomendamos utilizar la plantilla HTML de icomm para trabajar con la misma estructura. La plantilla de icomm ya está diseñada para adaptarse a los requerimientos del banner, por lo que puedes estar seguro de que tu diseño encajará perfectamente.

* Copia esta plantilla HTML para Banners de icomm y úsala para crear tus diseños personalizados:

```html
<div class="wpn-banner wpn-banner-top" id="wpn-banner" style="box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.16);

        background-color: #0077ff !important;

        color: #FFFFFF !important;

        text-align: center;

        display: flex;

        flex-direction: column;

        justify-content: center;

        box-sizing: border-box;

        -moz-box-sizing: border-box;

        -webkit-box-sizing: border-box;

        position: fixed;

        bottom: 5px;

        width: 80%;

        left: 10%;

        z-index: 9999;

        border-radius: 6px;

        padding: 25px;

        min-height: 60px;

        font-size: 20px;

        flex-direction: row;

        align-items: center;

        flex-wrap: wrap;">

    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    <style>

        .wpn-banner-link:hover {

            text-decoration: none;

            color: #000b89 !important;

        }

        .wpn-banner-link {

            color: #FFFFFF !important;

        }

        .wpn-banner-top .wpn-banner-link-container {

            margin-left: 10px;

        }

        @media (max-width: 400px) {

            .wpn-banner-top {

                width: 90% !important;

                left: 5% !important;

                min-height: 160px !important;

            }

            .wpn-banner-top .wpn-banner-title,

            .wpn-banner-top .wpn-banner-link-container {

                width: 100% !important;

            }

            .wpn-banner-link {

                padding: 5px 40px !important;

            }

            .wpn-banner-bottom {

                min-height: 180px !important;

            }

            .wpn-banner-link-container {

                padding: 5px 0 !important;

                margin: 0 !important;

            }

            .wpn-banner-preview-powered svg {

                height: 13px !important;

            }

        }

        .wpn-close-container button.wpn-close-banner {

            color: #FFFFFF !important;

            border: none;

            background-color: transparent !important;

            position: absolute;

            top: 0;

            right: 7px;

            font-size: 30px;

            line-height: 30px;

            opacity: .4;

            text-shadow: 0 1px 0 #fff;

        }

        .wpn-close-container .wpn-close-banner:hover {

            text-decoration: none;

        }

    </style>

    <div class="wpn-close-container">

        <button type="button" class="wpn-close-banner" aria-label="Close" id="wpn-close-btn">

            <span aria-hidden="true">×</span>

        </button>

    </div>

    <div class="wpn-banner-title">

        Ofertas de último momento </div>

    <div class="wpn-banner-link-container">

    <a href="#nicokrasny" class="wpn-banner-link" id="wpn-banner-link" rel="nofollow" 'target="_blank">

        Ir a Ofertas

    </a>

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

### Activar o desactivar la función

* Activa o desactiva el switch que se encuentra en la esquina superior derecha para prender o apagar la función.

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXd-NM5kOVTHTU03deWX6DPXDEufr-6x-MvPVF1HtlZHneI_n8_8wNcYIClD4j2qv7j8uRReSRZxwubRgzpPzubbsOxMMkYLt-EV9xBWSP91uDDkgIvOjB0qFG1b3if8XKFMF7hw2xv7O49jfvs0IQVu3ezH?key=9JeVr2HWREvbzGrh2U7CZg)

### Métricas

La plataforma de icomm ofrece algunas métricas de interés para cada campaña de banners. Las mismas pueden visualizarse desde el módulo de **Dashboard**, sección **Notificaciones**. 

En el caso de Banners, se pueden observar las métricas de **Impresiones**, **Clics** y **CTR**. Para ello, ingresa al módulo del Dashboard y selecciona la opción Notificaciones. Luego desliza hacia abajo, hasta encontrar el gráfico correspondiente a las métricas de Banners. En este caso, el gráfico mostrará las métricas generales de todas las campañas de banners activadas en la plataforma. 

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdOxTosF8Ud64GUxfrt_aOJpMS4sSLQKi2ueUdFkUD0dgB7YFp53jDPkksOnRj6VDHwMz8U3la54-wRB4J4WO2uLMqZGJYuCPgA8W1AxrmMDuqKIK9ZK0LZhgOAsie7pVZ-CCWec3-7RYtMGNKcanq4my2W?key=9JeVr2HWREvbzGrh2U7CZg)

###### Métricas por campaña

También es posible visualizar las métricas de cada una de las campañas de banners activadas en la plataforma. Para ello, Ingresa al módulo de **Acciones en web** > **Banners. **En esta sección se inicio, podrás ver las I**mpresiones**, **Clics**, **CTR** y **Cierre** de cada una de las campañas.

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcKJGekh1pms-fnycmZwp21o_7jHewhqR8-Y-TDVxP69HH5-lGjP8EuMxB8IPpDuHwLtfCMVqZfwrZ1JF-3z-9vTvmIK03Hv0kI8BcsRGaP5C__FLunPjCcLseLmBr3FD7VPcB_67ftWdzwwdGBVZXTPImY?key=9JeVr2HWREvbzGrh2U7CZg)
* **Impresiones**: Muestra la cantidad de veces que se imprime el Banner. 
* **Clics**: Porcentaje de clics en relación a las impresiones del Banner. 

