Skip to content

Mensajes dentro de la aplicación con HTML personalizado

Aunque nuestros mensajes dentro de la aplicación estándar se pueden personalizar de diversas formas, puedes obtener un control aún mayor sobre la apariencia de tus campañas utilizando mensajes diseñados y creados con HTML, CSS y JavaScript. Con una composición sencilla, puedes desbloquear funcionalidades y branding personalizados que se adapten a cualquiera de tus necesidades.

Este tipo de mensaje está disponible en el editor tradicional.

Cómo funciona

Los mensajes HTML dentro de la aplicación permiten un mayor control sobre la apariencia de un mensaje, incluyendo lo siguiente:

  • Fuentes y estilos personalizados
  • Videos
  • Múltiples imágenes
  • Comportamientos al hacer clic
  • Componentes interactivos
  • Animaciones personalizadas

Los mensajes HTML personalizados pueden utilizar los métodos del puente JavaScript para registrar eventos, establecer atributos personalizados, cerrar el mensaje y más. Consulta nuestro repositorio de GitHub que contiene instrucciones detalladas sobre cómo usar y personalizar los mensajes HTML dentro de la aplicación según tus necesidades, y un conjunto de plantillas de mensajes dentro de la aplicación HTML5 para ayudarte a empezar.

Entornos de renderizado

Los mensajes HTML personalizados dentro de la aplicación se renderizan directamente en el navegador en la Web, pero dentro de un WebView de la plataforma en iOS y Android. Dado que cada entorno utiliza un motor de renderizado diferente, el mismo HTML y CSS puede mostrarse con ligeras diferencias visuales entre plataformas, particularmente en diseños de columnas, fuentes y espaciado.

Para minimizar las diferencias entre plataformas:

  • Usa valores CSS explícitos en lugar de depender de los valores predeterminados del navegador
  • Incluye una etiqueta meta de viewport (por ejemplo, <meta name="viewport" content="width=device-width, initial-scale=1">)
  • Prueba en dispositivos reales con envíos de prueba

Codificación de caracteres

Al crear mensajes dentro de la aplicación HTML personalizados con caracteres especiales, como escritura cirílica, caracteres acentuados u otro texto no ASCII, incluye la codificación UTF-8 en tu HTML para garantizar una visualización correcta. Sin la codificación UTF-8, estos caracteres pueden aparecer rotos o ausentes cuando se renderizan en la vista web.

Para habilitar la codificación UTF-8, añade la siguiente metaetiqueta dentro de la sección <head> de tu HTML:

1

<meta charset="UTF-8">

Esto fuerza la codificación UTF-8, que es el conjunto de caracteres esperado para las vistas web que muestran mensajes dentro de la aplicación.

Puente JavaScript

Custom HTML in-app messages and Banners support a JavaScript “bridge” to interface with the Braze SDK, allowing you to trigger custom Braze actions when users click on elements with links or otherwise engage with your content. These methods exist with the global brazeBridge or appboyBridge variable.

For example, to log a custom attribute and custom event, then close the message, you could use the following JavaScript within your custom HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<button id="button">Set Favorite Color</button>
<script>
// Wait for the `brazeBridge` ready event, "ab.BridgeReady"
window.addEventListener("ab.BridgeReady", function(){
  // Event handler when the button is clicked
  document.querySelector("#button").onclick = function(){
    // Track Button 1 clicks for analytics
    // Note: This requires Android SDK v8.0.0, Web SDK v2.5.0, Swift SDK v5.4.0, and iOS SDK v3.23.0
    brazeBridge.logClick("0");
    // Set the user's custom attribute
    brazeBridge.getUser().setCustomUserAttribute("favorite color", "blue");
    // Track a custom event
    brazeBridge.logCustomEvent("completed survey");
    // Send the enqueued data to Braze
    brazeBridge.requestImmediateDataFlush();
    // Close the message
    brazeBridge.closeMessage();
  };
}, false);
</script>

JavaScript Bridge methods

The following JavaScript methods are supported within custom HTML for in-app messages and Banners:

Nombre del método Descripción
brazeBridge.closeMessage() Cierra el mensaje actual. El comportamiento varía según el canal:

In-App Messages: cierra solo la interfaz. No se registra ningún descarte ni se produce ninguna supresión del lado del servidor.

Banners: equivale a llamar a logBannerDismissal. Esto registra un descarte de Banner, elimina el Banner de la interfaz y suprime el Banner para el usuario. También vuelve a activar cualquier suscriptor activo de subscribeToBannersUpdates. No llames a este método si el mensaje ya se está cerrando o se cerrará automáticamente debido al procesamiento de un enlace profundo.
window.addEventListener("ab.BridgeReady", function(){...}, false) Método de devolución de llamada para cuando brazeBridge haya terminado de cargarse. Todo el código JavaScript debe ejecutarse dentro de esta función de devolución de llamada.
brazeBridge.requestImmediateDataFlush() Envía los datos en cola a los servidores de Braze. Documentación de JS
brazeBridge.logClick(button_id_string) Registra un clic de botón para un ID de botón dado. Si button_id_string se deja en blanco, se registrará en su lugar un clic de cuerpo. El button_id_string se puede pasar como el button_id en eventos de clic de mensajes dentro de la aplicación a través de Currents.

Este método se introdujo en el SDK para Android v8.0.0, el SDK Web v2.5.0 y el SDK para iOS v3.23.0.

El button_id_string solo acepta caracteres alfanuméricos, espacios, guiones y guiones bajos. Añadir un carácter con acento (por ejemplo, ö, â, ê) rompe el seguimiento de los clics en el botón, lo que provoca que la cadena del botón no aparezca en la sección de análisis de la campaña y que no se contabilicen los clics.
brazeBridge.logCustomEvent(eventName,eventProperties) Registra un evento personalizado. Documentación de JS
brazeBridge.logPurchase(productId, price, currencyCode, quantity, purchaseProperties) Registra una compra. Documentación de JS
brazeBridge.getUser().addAlias(alias, label) Añade un alias a un usuario. Introducido en el SDK Web v2.7.0, Android v8.1.0 y el SDK para iOS v3.26.0. Documentación de JS
brazeBridge.getUser().addToCustomAttributeArray(key, value) Añade un valor a una matriz de atributos personalizados. Documentación de JS
brazeBridge.getUser().addToSubscriptionGroup(subscriptionGroupId) Añade un usuario a un grupo de suscripción de correo electrónico o SMS. Documentación de JS.

Este método se introdujo en el SDK para Android v15.0.0, el SDK Web v3.4.0 y el SDK para iOS v4.3.3.
brazeBridge.getUser().removeFromSubscriptionGroup(subscriptionGroupId) Elimina a un usuario de un grupo de suscripción de correo electrónico o SMS. Documentación de JS.

Este método se introdujo en el SDK para Android v15.0.0, el SDK Web v3.4.0 y el SDK para iOS v4.3.3.
brazeBridge.getUser().setFirstName(firstName) Configura el nombre de pila de un usuario. Documentación de JS
brazeBridge.getUser().setLastName(lastName) Configura el apellido de un usuario. Documentación de JS
brazeBridge.getUser().setEmail(email) Configura la dirección de correo electrónico de un usuario. Documentación de JS
brazeBridge.getUser().setGender(gender) Configura el sexo de un usuario. Documentación de JS
brazeBridge.getUser().setDateOfBirth(year, month, day) Configura la fecha de nacimiento de un usuario. Documentación de JS
brazeBridge.getUser().setCountry(country) Configura el país de un usuario. Documentación de JS
brazeBridge.getUser().setHomeCity(city) Configura la ciudad de un usuario. Documentación de JS
brazeBridge.getUser().setEmailNotificationSubscriptionType(notificationSubscriptionType) Establece el estado de suscripción a las notificaciones por correo electrónico. Documentación de JS
brazeBridge.getUser().setPushNotificationSubscriptionType(notificationSubscriptionType) Establece el estado de suscripción a las notificaciones push. Documentación de JS
brazeBridge.getUser().setPhoneNumber(phoneNumber) Configura el número de teléfono de un usuario. Documentación de JS
brazeBridge.getUser().setCustomUserAttribute(key, value, merge) Establece un atributo personalizado del usuario. Documentación de JS
brazeBridge.getUser().removeFromCustomAttributeArray(key, value) Elimina un valor de una matriz de atributos personalizados del usuario. Documentación de JS
brazeBridge.getUser().incrementCustomUserAttribute(key, incrementValue) Incrementa un atributo personalizado del usuario. Documentación de JS
brazeBridge.getUser().setLanguage(language) Configura el idioma de un usuario. Introducido en el SDK para Android v5.0.0 y el SDK Web v2.6.0. Documentación de JS
brazeBridge.getUser().setCustomLocationAttribute(key, latitude, longitude) Establece un atributo personalizado de ubicación. Introducido en el SDK para Android v5.0.0. Documentación de JS
brazeBridge.web.registerAppboyPushMessages(successCallback, deniedCallback) Registra al usuario para recibir notificaciones push web (solo web). Este método no tiene efecto si se ejecuta en un entorno que no sea web. Documentación de JS
brazeBridge.requestPushPermission(successCallback, deniedCallback) Registra al usuario para recibir push en Web, iOS y Android. Nota: las devoluciones de llamada del método solo se admiten en web. Este método se introdujo a partir del SDK Web v4.0.0, el SDK para Android v21.0.0 y el SDK Swift v5.4.0. Documentación de JS
brazeBridge.changeUser(id, sdkAuthSignature?) Identifica al usuario con un ID único. Documentación de JS

Este método se introdujo en el SDK Web v4.3.0.

Button click tracking

Use the brazeBridge.logClick(button_id) method to track clicks in your custom HTML.

For in-app messages, you can programmatically track “Button 1”, “Button 2”, and “Body Clicks” using brazeBridge.logClick('0'), brazeBridge.logClick('1'), or brazeBridge.logClick(), respectively.

Clicks Method Supported
Body click brazeBridge.logClick() In-app messages and Banners
Button 1 brazeBridge.logClick('0') In-app messages only
Button 2 brazeBridge.logClick('1') In-app messages only
Custom button tracking brazeBridge.logClick('your custom name here') In-app messages and Banners

For in-app messages, you can track multiple button click events per impression. For example, to close a message and log a Button 2 click:

1

<a href="#" onclick="brazeBridge.logClick('1');brazeBridge.closeMessage()">✖</a>

You can also track new custom button names—up to 100 unique names per campaign. For example, brazeBridge.logClick('blue button') or brazeBridge.logClick('viewed carousel page 3').

Limitations (in-app messages only)

  • You can have up to 100 unique button IDs per campaign.
  • Button IDs can have up to 255 characters each.
  • Button IDs can only include letters, numbers, spaces, dashes, and underscores.

Además de JavaScript personalizado, los SDK de Braze también pueden enviar datos de análisis con estos prácticos atajos de URL. Ten en cuenta que estos parámetros de consulta y esquemas de URL distinguen entre mayúsculas y minúsculas.

Seguimiento de clics en botones (obsoleto)

Para registrar los clics en botones en los análisis de mensajes dentro de la aplicación, puedes añadir abButtonId como parámetro de consulta a cualquier vínculo profundo, URL de redirección o elemento de anclaje <a>. Usa ?abButtonId=0 para registrar un clic en “Button 1” y ?abButtonId=1 para registrar un clic en “Button 2”.

Al igual que con otros parámetros de URL, el primer parámetro debe comenzar con un signo de interrogación ?, mientras que los parámetros posteriores deben separarse con un ampersand &.

Ejemplos de URL

  • https://example.com/?abButtonId=0 - Clic en Button 1
  • https://example.com/?abButtonId=1 - Clic en Button 2
  • https://example.com/?utm_source=braze&abButtonId=0 - Clic en Button 1 con otros parámetros de URL existentes
  • myApp://deep-link?page=home&abButtonId=1 - Vínculo profundo móvil con clic en Button 2
  • <a href="https://example.com/?abButtonId=1"> - Elemento de anclaje <a> con clic en Button 2

Para abrir enlaces fuera de tu aplicación en una nueva ventana, establece ?abExternalOpen=true. El mensaje se descartará antes de abrir el enlace.

Para la vinculación en profundidad, Braze abrirá tu URL independientemente del valor de abExternalOpen.

Para que Braze gestione tu enlace HTTP o HTTPS como un vínculo profundo, establece ?abDeepLink=true.

Cuando este parámetro de cadena de consulta está ausente o establecido en false, Braze intentará abrir el enlace web en un navegador web interno dentro de la aplicación anfitriona.

Cerrar mensaje dentro de la aplicación

Para cerrar un mensaje dentro de la aplicación, puedes usar el método de JavaScript brazeBridge.closeMessage().

Por ejemplo, <a onclick="brazeBridge.closeMessage()" href="#">Close</a> cerrará el mensaje dentro de la aplicación.

Carga HTML con vista previa

Al crear mensajes dentro de la aplicación con HTML personalizado, puedes previsualizar tu contenido interactivo directamente en Braze.

El panel de vista previa del mensaje en el editor muestra una vista previa realista que renderiza el JavaScript incluido en tu mensaje. Puedes previsualizar e interactuar con tus mensajes personalizados desde el panel de vista previa haciendo clic en la paginación, enviando formularios o cuestionarios, viendo animaciones JavaScript y más.

Interacción con la vista previa HTML deslizando entre páginas.

Crear una Campaign

Archivos de activos

Al crear mensajes dentro de la aplicación de código personalizado con carga HTML, puedes subir activos de la Campaign a la biblioteca de medios para referenciarlos en tu mensaje.

Los siguientes tipos de archivo son compatibles para la carga:

Tipo de archivo Extensión de archivo
Archivos de fuentes .ttf, .woff, .otf, .woff2
Imágenes SVG .svg
Archivos JavaScript .js
Archivos CSS .css

Braze recomienda subir activos a la biblioteca de medios por dos razones:

  1. Los activos añadidos a una Campaign a través de la biblioteca de medios permiten que tus mensajes se muestren incluso cuando el usuario está sin conexión o tiene una conexión a internet deficiente.
  2. Los activos subidos a Braze se pueden reutilizar en distintas Campaigns.
Añadir archivos de activos

Puedes añadir activos nuevos o existentes a tu Campaign.

Para añadir nuevos activos a tu Campaign, utiliza la sección de arrastrar y soltar para subir un archivo. Los activos añadidos en esta sección también se agregarán automáticamente a la biblioteca de medios. Para añadir activos que ya hayas subido a la biblioteca de medios, selecciona Añadir desde la biblioteca de medios.

Una vez añadidos tus activos, aparecerán en la sección Activos para esta Campaign.

Si el nombre de un archivo de activo coincide con el de un activo HTML local, se reemplaza automáticamente (por ejemplo, se sube cat.png y existe <img src="cat.png" />).

De lo contrario, pasa el cursor sobre un activo de la lista y selecciona Copiar para copiar la URL del archivo a tu portapapeles. Luego pega la URL del activo copiada en tu HTML como lo harías normalmente al referenciar un activo remoto.

Editor HTML

Los cambios que realices en el HTML se renderizan automáticamente en el panel de vista previa a medida que escribes. Los métodos JavaScript de brazeBridge que utilices en tu HTML no actualizarán los perfiles de usuario mientras previsualizas en el panel.

Seguimiento de botones

Puedes hacer seguimiento del rendimiento dentro de tu mensaje dentro de la aplicación de código personalizado utilizando el método JavaScript brazeBridge.logClick(button_id). Esto te permite hacer seguimiento programático de “Botón 1”, “Botón 2” y “Clics en el cuerpo” usando brazeBridge.logClick('0'), brazeBridge.logClick('1') o brazeBridge.logClick(), respectivamente.

Clics Método
Botón 1 brazeBridge.logClick('0')
Botón 2 brazeBridge.logClick('1')
Clic en el cuerpo brazeBridge.logClick()
Seguimiento de botón personalizado brazeBridge.logClick('your custom name here')

Utiliza brazeBridge.logClick(button_id) para mensajes HTML con vista previa cuando necesites más de dos botones con seguimiento. El botón 1 y el botón 2 se asignan a '0' y '1'; los botones adicionales usan ID personalizados (hasta 100 ID únicos por Campaign). Para restricciones de caracteres en los ID de botones, consulta Seguimiento de botones.

Si un botón en tu mensaje dentro de la aplicación con HTML personalizado no carga al hacer clic, verifica que el enlace utilice una URL válida o un esquema de vínculo profundo compatible. Las URL mal formadas o los esquemas personalizados no compatibles pueden impedir que la acción de clic se complete.

Clics en el cuerpo al cerrar el mensaje

Llamar a brazeBridge.closeMessage() cierra el mensaje pero no registra análisis por sí solo. Para registrar un clic en el cuerpo cuando el usuario cierra el mensaje, llama a brazeBridge.logClick() antes de brazeBridge.closeMessage() para que el registro de clics sea consistente en todas las plataformas.

El HTML personalizado no se renderiza en Android (archivos zip de Windows)

Si tu mensaje dentro de la aplicación con HTML personalizado se renderiza en la vista previa pero no se muestra en dispositivos Android, verifica cómo se empaquetaron tus archivos HTML y de activos. Algunas utilidades de zip de Windows añaden entradas de directorio (rutas de carpetas) dentro del archivo en lugar de colocar los archivos en el nivel raíz.

Android puede fallar al cargar activos referenciados con rutas relativas cuando el zip incluye entradas de directorio anidadas. Para solucionar esto:

  1. Extrae tus archivos HTML, CSS, JavaScript y de imagen en una sola carpeta.
  2. Selecciona todos los archivos (no la carpeta principal) al crear el archivo zip.
  3. Confirma que las rutas en tu HTML referencien archivos en la raíz del zip (por ejemplo, style.css, no assets/style.css), o ajusta las rutas para que coincidan con la estructura aplanada.
  4. Vuelve a subir el zip y envía un mensaje de prueba a un dispositivo Android.

Alternativamente, sube los activos a través de la biblioteca de medios en lugar de empaquetarlos en un archivo zip.

Cambios incompatibles con versiones anteriores

  1. El vínculo profundo braze://close, que anteriormente era compatible con aplicaciones móviles, ha sido eliminado en favor del JavaScript brazeBridge.closeMessage(). Esto permite mensajes HTML multiplataforma, ya que la Web no admite vínculos profundos.

  2. El seguimiento automático de clics, que usaba ?abButtonId=0 para los ID de botones, y el seguimiento de “clic en el cuerpo” en botones de cierre han sido eliminados. Los siguientes ejemplos de código muestran cómo cambiar tu HTML para usar nuestros nuevos métodos JavaScript de seguimiento de clics:

    Antes Después
    <a href="braze://close">Close Button</a> <a href="#" onclick="brazeBridge.logClick();brazeBridge.closeMessage()">Close Button</a>
    <a href="braze://close?abButtonId=0">Close Button</a> <a href="#" onclick="brazeBridge.logClick('0');brazeBridge.closeMessage()">Close Button</a>
    <a href="app://deeplink?abButtonId=0">Track button 1</a> <a href="app://deeplink" onclick="brazeBridge.logClick('0')">Track button 1</a>
    <script>
    location.href = "braze://close?abButtonId=1"
    </script>    		 <script>
    window.addEventListener("ab.BridgeReady", function(){
      brazeBridge.logClick("1");
      brazeBridge.closeMessage();
    });
    </script>
New Stuff!