Usa este artículo para crear, configurar y lanzar un mensaje de banner. Aprenderás a componer 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.
Luego, elige Banner como tu tipo de contenido.
También puedes elegir comenzar con una plantilla predefinida seleccionando este tipo de contenido en la barra lateral izquierda.
Este recorrido comienza desde un banner en blanco.
Nota: Los banners se muestran por defecto en el Messenger web. Las aplicaciones móviles nativas — incluyendo aquellas que usan el Intercom mobile Messenger SDK (iOS y Android) — no soportan banners de forma nativa. Para mostrar banners en apps móviles, kioscos u otras superficies no web, usa la Contacts Banners API (disponible bajo Intercom-Version: Preview).
Primero, ponle un título a tu banner.
Luego compón el contenido de tu banner. Puedes usar negrita, cursiva, enlaces 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 Banners no estarán disponibles en 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:
Luego, elige de quién debe venir el banner y si quieres incluir su avatar.
¿Debe el banner ser descartable?
Luego, decide si quieres mostrar un botón de cierre en tu banner:
Un botón de cierre permite a tus clientes ocultar el mensaje tan pronto como lo hayan leído:
Esto es perfecto para recordatorios amistosos, promociones u otros mensajes no urgentes.
Si eliges ocultar el botón de cierre, el banner persistirá para tus clientes hasta que ya no cumplan 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 cierre en un banner existente, cualquiera que lo haya cerrado lo verá de nuevo.
Si un cliente coincide con la audiencia de varios banners y el primero no es descartable, entonces no recibirá ningún banner posterior. — 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 cierre o no, luego el usuario continuará su camino en la Serie.
Importante: Los cierres son permanentes y se almacenan en el servidor. Una vez que un cliente cierra un banner, nunca volverá a aparecer para él — incluso si borra la caché del navegador, cambia de navegador o usa un dispositivo nuevo. Los cierres están vinculados a la identidad Intercom del cliente, no al estado local del navegador. Si necesitas mostrar un banner nuevamente a un cliente que ya lo cerró, deberás crear un nuevo banner.
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.
Si envías un mensaje solo para notificar o alertar a tus clientes, y no necesitan tomar ninguna acción, deja esto en ‘Ninguna’. De lo contrario, el banner puede:
Abrir una URL.
Abrir una URL mediante un botón.
Pide reacciones con emoji.
Recoge las direcciones de correo electrónico de los visitantes.
Lanza un Tour 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.
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:
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.
También puedes seleccionar un color para tu botón:
Pide 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.
Recoger 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 recolector de correo electrónico, 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á.
Lanza un Tour del Producto
Esta acción permite a tus users acceder directamente al Tour del Producto que elijas, abriéndolo en la misma pestaña o en una nueva.
Nota: Solo puedes elegir Tours 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.
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.
Nota: Si tu Messenger está configurado en modo oscuro, el texto del banner puede mostrarse en negro en el entorno en vivo aunque apareciera blanco en la vista previa del editor. El color del texto se establece automáticamente según el contraste con el color de fondo, pero este ajuste automático no siempre considera los temas oscuros del sitio web, lo que puede resultar en un texto negro sobre fondo oscuro. No hay control manual sobre el color del texto del banner. Si esto es un problema, intenta usar un color de fondo claro para que el texto sea legible independientemente del tema del sitio.
Consejo: Si quieres probar diferentes estilos de tu mensaje de banner, realiza una prueba A/B. Más información en este artículo.
Establece 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 cumplirlas 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:
Consejo: Al dirigir un URL, es buena idea copiarlo y pegarlo directamente desde tu app o sitio, ya que esto capturará cualquier carácter oculto en la barra de direcciones del navegador, como barras finales.
Nota: "Empieza con" vs "contiene" para la segmentación por URL. Al segmentar por URL, el filtro empieza con requiere que la URL de la página comience exactamente con el texto que ingreses, incluyendo el protocolo (por ejemplo, https://example.com/pricing). No coincidirá con una URL que contenga esa cadena en otra parte. El filtro contiene coincide con cualquier URL que tenga el texto en cualquier lugar. Si tu banner no aparece en las páginas esperadas, verifica que estés usando el tipo de filtro correcto y que el prefijo de la URL sea exacto, incluyendo https://.
Cómo funciona la prioridad de visualización del banner
Si un cliente cumple las reglas de audiencia para varios banners, se le mostrará primero el banner que se activó primero. Una vez que el cliente cierre ese banner, se le mostrará el siguiente en orden según cuándo se activó cada banner.
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 animas a los clientes a actualizar su plan, un objetivo adecuado es Plan es Pro. Intercom hará seguimiento de cuántos clientes que vieron el banner cumplen esa condición posteriormente:
Para establecer un objetivo, ve al paso Objetivo 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 es 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 Programar 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 cumplan las reglas de audiencia.
Previsualiza y activa tu banner
Una vez que hayas terminado de configurar tu banner, haz clic en Guardar y cerrar. Aparecerá un botón Previsualizar en la esquina superior derecha del editor de banners. Úsalo para ver cómo se verá el banner en tu sitio antes de activarlo.
Cuando estés satisfecho con la previsualización, haz clic en Activar. El banner comenzará a mostrarse inmediatamente a los clientes que cumplan 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. Las apps móviles nativas — ya usen o no el Intercom Messenger SDK — no soportan banners de forma nativa. Para mostrar banners en apps iOS o Android, kioscos u otras superficies no web, usa la Contacts Banners API para obtener y mostrar banners desde el servidor y registrar cierres.
Cómo funciona
La API ofrece dos endpoints:
GET /contacts/{id}/banners— devuelve los banners que un contacto cumple 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 de API para detalles completos de los endpoints.
Comportamientos clave
La coincidencia de audiencia se realiza del lado del servidor: Esto significa que la API evalúa atributos del contacto, atributos de la 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}/bannerscuenta 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 mediante
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) — incluyendo aquellas que usan el Intercom Messenger SDK, ya que los banners no se soportan de forma nativa a través del SDK móvil.
Interfaces de kioscos o pantallas en tienda.
Herramientas o portales integrados donde no se puede instalar el web Messenger.
Si muestras banners en una app web estándar donde ya está instalado el web Messenger, no necesitas esta API — los banners se mostrarán automáticamente a los clientes que cumplan las reglas de audiencia.
Cómo usar la Contacts Banner API
Para usar la Contacts Banners API:
Crea y configura tu banner en Outbound.
Establece 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 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 de endpoints 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, es esperado 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:absolutepara posicionar la barra de navegación dentro del cuerpo.Si actualmente tienes
top: 0después deposition:fixeden tu sitio, reemplázalo conmargin-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 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 Choose your audience, añade una regla para dirigir 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 dirigirlo a tu segmento de clientes deseado (por ejemplo, "All users" o Plan es Free) para lanzarlo de verdad.