Usa este artículo para crear, configurar y lanzar un mensaje de banner. Aprenderás a redactar el contenido del banner, elegir una opción de cierre, añadir un llamado a la acción, segmentar una audiencia, establecer un objetivo, programar la entrega y previsualizar antes de publicar. Los banners están disponibles en los planes Essential, Advanced y Expert.

Crear un banner

Primero, ve a Outbound desde el menú principal y haz clic en + Nuevo mensaje en la esquina superior derecha.

Captura de pantalla de la página Outbound en Intercom mostrando el botón + Nuevo mensaje en la esquina superior derecha.

Luego, elige Banner como tipo de contenido.

Captura de pantalla del selector de tipo de contenido en el editor de mensajes de Intercom con la opción Banner resaltada.

También puedes elegir comenzar con una plantilla predefinida seleccionando este tipo de contenido en la barra lateral izquierda.

Captura de pantalla del selector de plantillas en el editor de mensajes de Intercom, mostrando el tipo de contenido Banner seleccionado en la barra lateral izquierda.

Este recorrido comienza desde un banner en blanco.

Nota: Los banners se muestran por defecto en el Messenger web. Para mostrar banners en aplicaciones móviles nativas, kioscos u otras superficies no web donde el Messenger no esté presente, usa la Contacts Banners API (disponible bajo Intercom-Version: Preview).

Primero, ponle un título a tu banner.

Captura de pantalla del editor de banners mostrando el campo Título en la parte superior del paso de composición.

Luego redacta el contenido de tu banner. Puedes usar negrita, cursiva, enlaces y emoji 😉

Captura de pantalla del editor de mensajes de banner mostrando el área de texto con opciones de formato negrita, cursiva, enlace y emoji.

Para insertar emojis, puedes:

En macOS, haz clic derecho en cualquier parte del campo de entrada y selecciona Emojis y símbolos.
En Windows, presiona las teclas Windows + .

Los smart links son enlaces profundos a contenido específico de Intercom (como artículos o tours de producto). Solo se pueden insertar resaltando texto en el editor de banners y usando el inserto de enlaces para seleccionar el contenido objetivo. El contenido objetivo debe estar activo — el contenido pausado o no publicado no estará disponible para enlazar.

Nota:

Los smart links en los banners no estarán disponibles en dispositivos móviles.
Es buena idea mantener tu mensaje conciso. Para mensajes más largos, intenta enviar un mensaje de Chat o Post.
Los banners no soportan saltos de línea. La tecla Enter no crea una nueva línea dentro del editor de texto del banner — esta es una limitación conocida. El formato se limita a negrita, cursiva, enlaces y emoji. Si necesitas contenido de varias líneas, considera usar un mensaje de Chat o Post.

Cuando sea posible, debes personalizar tu mensaje de banner con atributos de datos como el nombre del cliente o información de la empresa:

Captura de pantalla animada mostrando cómo insertar un atributo de datos (como el nombre del cliente) en un mensaje de banner usando el selector de atributos.

Luego, elige quién debe enviar el banner y si quieres incluir su avatar.

¿Debe el banner ser descartable?

Luego, decide si quieres mostrar un botón para descartar el banner:

Captura de pantalla de la configuración de descarte en el editor de banners, mostrando el interruptor para mostrar u ocultar el botón de descartar.

Un botón de descarte permite a tus clientes ocultar el mensaje tan pronto como lo hayan leído:

Captura de pantalla de un banner en vivo mostrado en una página web con un botón de descarte (×) visible en el lado derecho.

Esto es perfecto para recordatorios amistosos, promociones u otros mensajes no urgentes.

Si eliges ocultar el botón de descarte, el banner persistirá para tus clientes hasta que ya no cumplan con las reglas de audiencia o hayan completado la acción configurada en la sección Elegir una acción.

Importante:

Si ocultas la opción de descarte en un banner existente, cualquiera que lo haya descartado lo verá de nuevo.
Si un cliente coincide con la audiencia de varios banners y el primero no es descartable, entonces no recibirá banners posteriores. — Para enviar otros banners primero, pausa temporalmente el banner no descartable, luego actívalo de nuevo y se enviará después de otros banners activos.
Los banners en una serie solo se mostrarán una vez sin importar si tienen botón de descarte o no, luego el usuario continuará su camino en la Serie.

Los banners persistentes (no descartables) son perfectos para comunicaciones más urgentes/importantes con tus clientes. Por ejemplo:

Mostrar un banner hasta que un usuario haya pagado una factura pendiente.
Recordar a un usuario que está trabajando con un espacio de trabajo/datos de prueba.
Mostrar un banner relacionado con el mantenimiento de la plataforma mientras el problema persista.

Elige un llamado a la acción

Ahora es momento de elegir la acción que mejor se adapte a tu objetivo para el mensaje.

Captura de pantalla del selector de acción en el editor de banners mostrando las opciones disponibles: Ninguna, Abrir una URL, Abrir una URL mediante un botón, Pedir reacciones, Recopilar correos electrónicos de visitantes y Lanzar un Tour de Producto.

Si envías un mensaje solo para notificar o alertar a tus clientes, y no necesitan realizar ninguna acción, déjalo en ‘Ninguna’. De lo contrario, el banner puede:

Abrir una URL.
Abrir una URL mediante un botón.
Pedir reacciones emoji.
Recopila las direcciones de correo electrónico de los visitantes.
Lanza un Recorrido del Producto.

Dependiendo de la acción que elijas, hay diferentes opciones para configurar.

Abrir una URL

Esta acción añade un enlace de llamada a la acción (CTA) al final de tu mensaje de banner. Puedes definir:

El texto del enlace.
La URL a abrir.
Si abrir el enlace en una nueva pestaña o no.
Si descartar el banner una vez que se haya hecho clic en el enlace o no.

Captura de pantalla de la configuración de la acción Abrir una URL en el editor de banners, mostrando campos para texto del enlace, URL, opción de nueva pestaña y opción de descartar al hacer clic.

Incluye atributos de usuario o empresa para una URL dinámica. Solo haz clic en el icono {...} al pasar el cursor sobre el campo URL:

Captura de pantalla animada que muestra cómo añadir una URL dinámica a un banner haciendo clic en el icono selector de atributos ({...}) en el campo URL.

Abrir una URL mediante un botón

Esta acción añade un botón de llamada a la acción (CTA) al final de tu mensaje de banner. Puedes definir:

El texto del enlace.
La URL a abrir.
Si abrir el enlace en una nueva pestaña o no.
Si descartar el banner una vez que se haya hecho clic en el enlace o no.

Captura de pantalla de la configuración de la acción Abrir una URL mediante un botón en el editor de banners, mostrando campos para texto del botón, URL, opción de nueva pestaña y opción de descartar al hacer clic.

También puedes seleccionar un color para tu botón:

Captura de pantalla del selector de color del botón en el editor de banners, mostrando un color personalizado aplicado al botón CTA.

Pedir reacciones

Esta acción te permite recopilar comentarios rápidos de los clientes en forma de emoji. Solo elige qué emoji podrán seleccionar y si descartar o no el banner después de que hayan hecho una selección.

Nota: Un flujo de trabajo no puede iniciarse únicamente por una reacción a un banner saliente. En cambio, una reacción puede usarse para definir una audiencia en el disparador de un flujo de trabajo o como condición dentro de una rama.

Recopilar correos electrónicos de visitantes

Esta acción añadirá un campo al final de tu mensaje para recopilar fácilmente direcciones de correo electrónico de los visitantes de tu sitio.

Nota: Cuando un banner incluye un colector de correos electrónicos, se aplica automáticamente una regla oculta para que el banner solo se muestre a visitantes o leads cuyo correo electrónico sea desconocido. Si la dirección de correo electrónico de un cliente ya es conocida por Intercom, el banner no se mostrará.

Lanzar un Recorrido del Producto

Esta acción permite que tus users accedan directamente al Recorrido del Producto que elijas, abriéndolo en la misma pestaña o en una nueva.

Nota: Solo puedes elegir Recorridos del Producto con una URL compartible habilitada.

Estiliza tu banner

En la sección Estilo del editor de banners, elige un color de fondo para tu banner y si debe aparecer en la parte superior o inferior de tu página. También puedes elegir entre dos estilos de diseño: en línea o flotante.

Captura de pantalla de la sección Estilo en el editor de banners, mostrando el selector de color, selector de posición (arriba o abajo) y selector de diseño (en línea o flotante).

Las dos opciones de diseño para la colocación del banner se describen a continuación.

En línea

Un banner en línea es de ancho completo y se sitúa entre el contenido de tu página y la parte superior de la ventana. Al desplazarte, el contenido de la página se mueve detrás del banner.

Flotante

Un banner flotante está centrado en tu página y se sitúa sobre el contenido, cubriendo lo que hay detrás. No se mueve al desplazarte.

Color del texto

Cuando eliges un color de fondo para tu banner, el color del texto se ajusta automáticamente para contraste y legibilidad:

Nota: No es posible crear banners mediante HTML o CSS personalizados. Si tu banner está superpuesto a elementos fijos en tu página (como una barra de navegación), consulta la sección Banner en línea superpuesto a la barra de navegación a continuación para una solución CSS.

Consejo: Si quieres probar diferentes estilos de tu mensaje de banner, realiza una prueba A/B. Más información en este artículo.

Define una audiencia para tu banner

En el paso Elige tu audiencia, define los filtros que determinan qué clientes verán tu banner. Las reglas de audiencia se evalúan dinámicamente, por lo que los clientes que dejen de cumplir las reglas ya no verán el banner.

Por ejemplo, si anuncias un descuento en tu plan Pro, podrías dirigirte a todos los clientes que actualmente están en tu plan Free:

Captura de pantalla del creador de reglas de audiencia en el editor de banners, mostrando una regla que apunta a clientes cuyo Plan es Free.

Consejo: Al dirigirte a una URL, es buena idea copiarla y pegarla directamente desde tu app o sitio, ya que esto capturará cualquier carácter oculto en la barra de direcciones del navegador, como barras diagonales finales.

Cómo funciona la prioridad de visualización de banners

Si un cliente coincide con las reglas de audiencia para varios banners, se le mostrará el banner que se activó primero. Una vez que el cliente cierre ese banner, se le mostrará el siguiente según el orden en que cada banner fue activado.

Establece un objetivo para tu banner

Definir un objetivo permite a Intercom medir si tu banner está impulsando la acción deseada. Un objetivo es una condición que, al cumplirse, se cuenta como una conversión para ese banner.

Por ejemplo, si estás animando a los clientes a actualizar su plan, un objetivo adecuado es Plan is Pro. Intercom hará seguimiento de cuántos clientes que vieron el banner cumplen posteriormente esa condición:

Para establecer un objetivo, ve al paso Goal en el editor de banners y define la condición que quieres rastrear. En el ejemplo a continuación, el objetivo está configurado como Plan is Pro:

Captura de pantalla del paso de configuración de objetivo en el editor de banners, mostrando un objetivo configurado como Plan is Pro.

También puedes probar la eficacia general de tu banner con una prueba de grupo de control. Aprende más en este artículo.

También puedes programar que tu banner se muestre solo durante un rango de fechas específico o en horarios determinados. Usa el paso Schedule para establecer una fecha de inicio, fecha de fin o ambas. Fuera de la ventana programada, el banner no se mostrará ni siquiera a los clientes que coincidan con las reglas de audiencia.

Captura de pantalla del paso de programación en el editor de banners, mostrando opciones de fecha de inicio, fecha de fin y horario.

Previsualiza y activa tu banner

Una vez que hayas terminado de configurar tu banner, haz clic en Save and Close. Aparecerá un botón Preview en la esquina superior derecha del editor de banners. Úsalo para ver cómo se verá el banner en tu sitio antes de que se active.

Captura de pantalla del editor de banners después de hacer clic en Save and Close, mostrando el botón Preview en la esquina superior derecha.

Cuando estés satisfecho con la vista previa, haz clic en Set live. El banner comenzará a mostrarse inmediatamente a los clientes que coincidan con tus reglas de audiencia. Puedes pausar o editar el banner en cualquier momento desde la página Outbound.

Mostrar banner en superficies no web

Por defecto, los banners se muestran a través del web Messenger. Si estás construyendo una app móvil nativa, un kiosco u otra experiencia embebida donde el Messenger no está presente, la Contacts Banners API te permite obtener y mostrar banners del lado del servidor, y registrar cierres, para que tus clientes vean el mensaje correcto sin importar la superficie.

Cómo funciona

La API proporciona dos endpoints:

GET /contacts/{id}/banners — devuelve los banners que un contacto coincide actualmente, cada uno con contenido y un view_id.
POST /contacts/{id}/banners/{view_id}/dismiss — registra un cierre para una vista de banner.

La Contacts Banners API está disponible bajo Intercom-Version: Preview. Consulta la referencia API para detalles completos del endpoint.

Comportamientos clave

La coincidencia de audiencia se realiza del lado del servidor: Esto significa que la API evalúa atributos de contacto, atributos de empresa y otras reglas del lado del servidor. Los banners que dependen de reglas de segmentación del lado del cliente (como URL de página o tiempo en página) no son devueltos por este endpoint, porque esas reglas solo pueden evaluarse en un navegador.
Las impresiones se registran cuando llamas al endpoint de lista: Llamar a GET /contacts/{id}/banners cuenta cada banner devuelto como mostrado. Solo llama a este endpoint en el momento en que planeas mostrar el banner, no de forma especulativa ni en cada carga de página.
Los cierres son cruzados entre superficies: Cuando un cliente cierra un banner vía POST /contacts/{id}/banners/{view_id}/dismiss, ese cierre se comparte con el web Messenger. Si el mismo cliente luego visita tu app web, no se le mostrará un banner que ya haya cerrado en móvil — y viceversa.

Cuándo usar esta API

La Contacts Banners API está diseñada para:

Apps móviles nativas (iOS y Android) donde no se usa el Messenger SDK.
Interfaces de kiosco o pantallas en tienda.
Herramientas o portales embebidos donde no se puede instalar el web Messenger.

Si muestras banners en una app web estándar donde el Messenger ya está instalado, no necesitas esta API — los banners se mostrarán automáticamente a los clientes que coincidan con las reglas de audiencia.

Cómo usar la Contacts Banner API

Para usar la Contacts Banners API:

Crea y configura tu banner en Outbound.
Define tu audiencia usando atributos del lado del servidor (datos de contacto o empresa). No confíes en reglas de URL de página o tiempo en página si necesitas que el banner aparezca vía la API.
Activa el banner.
Llama a GET /contacts/{id}/banners en el punto de visualización para obtener los banners que coinciden con un contacto.
Muestra el contenido del banner en tu app o interfaz.
Cuando un cliente cierre el banner, llama a POST /contacts/{id}/banners/{view_id}/dismiss para registrar el cierre.

Consejo: Para referencia completa del endpoint y esquemas de solicitud/respuesta, consulta la documentación de la Contacts Banners API.

Banner en línea superpuesto a la barra de navegación

Si tienes elementos fijos en tu sitio web, se espera que el banner en línea se superponga a la barra de navegación. Hay una forma de resolver esto cambiando algo de HTML/CSS en tu sitio.

Los banners en línea añaden position:relative y margin-top: 48px al cuerpo de la página (esta es la altura del banner).

Si tienes una barra de navegación en tu sitio web que usa position:fixed o position:sticky, entonces tu barra de navegación siempre estará en la parte superior. Eso significa que cuando activas un banner en línea, no podrá “empujar” la barra de navegación hacia abajo como normalmente lo haría, lo que resulta en que se superponga a la barra.

Hacer los siguientes cambios en tu CSS asegurará que el banner en línea no se superponga a tu barra de navegación:

Usa position:absolute para posicionar la barra de navegación dentro del cuerpo.
Si actualmente tienes top: 0 después de position:fixed en tu sitio, reemplázalo con margin-top: 0

Alternativamente, podrías optar por usar banners flotantes o posicionar el banner en la parte inferior de la página.

Prueba tu banner

Antes de lanzar un banner a toda tu base de clientes, puedes probar su comportamiento en un entorno en vivo restringiendo la audiencia solo a ti mismo o a un miembro del equipo.

Identifica un usuario de prueba: Asegúrate de tener un perfil de usuario en tu espacio de trabajo al que puedas acceder (por ejemplo, tu propio correo electrónico de empleado).
Establece reglas específicas para la audiencia: En la sección Elige tu audiencia, añade una regla para dirigirte solo a ese usuario específico.
- Ejemplo: Email es name@company.com
Activa el banner: Debido a que la audiencia está estrictamente limitada a tu correo electrónico, ningún otro cliente verá este banner.
Verifica el comportamiento: Inicia sesión en tu producto como ese usuario de prueba. Confirma que el banner aparezca, se vea correcto y que los botones o enlaces funcionen como se espera.
Actualiza la audiencia: Una vez que estés satisfecho con la prueba, edita las reglas de audiencia del banner para dirigirte al segmento de clientes deseado (por ejemplo, "Todos los users" o Plan es Free) para lanzarlo de verdad.

Cómo crear un mensaje de banner