Skip to content

Messages in-app HTML personnalisés

Bien que nos messages in-app standard puissent être personnalisés de nombreuses façons, vous pouvez obtenir un contrôle encore plus grand sur l’apparence de vos campagnes en utilisant des messages conçus et construits avec HTML, CSS et JavaScript. Avec une composition simple, vous pouvez débloquer des fonctionnalités et un branding personnalisés pour répondre à tous vos besoins.

Ce type de message est disponible dans l’éditeur traditionnel.

Fonctionnement

Les messages in-app HTML permettent un contrôle accru sur l’apparence et le rendu d’un message, notamment les éléments suivants :

  • Polices et styles personnalisés
  • Vidéos
  • Images multiples
  • Comportements au clic
  • Composants interactifs
  • Animations personnalisées

Les messages HTML personnalisés peuvent utiliser les méthodes du pont JavaScript pour enregistrer des événements, définir des attributs personnalisés, fermer le message, et bien plus encore ! Consultez notre dépôt GitHub qui contient des instructions détaillées sur la façon d’utiliser et de personnaliser les messages in-app HTML selon vos besoins, ainsi qu’un ensemble de modèles de messages in-app HTML5 pour vous aider à démarrer.

Environnements de rendu

Les messages in-app HTML personnalisés s’affichent directement dans le navigateur sur le web, mais à l’intérieur d’une WebView de la plateforme sur iOS et Android. Étant donné que chaque environnement utilise un moteur de rendu différent, le même HTML et CSS peut s’afficher avec de légères différences visuelles selon les plateformes, en particulier pour les mises en page en colonnes, les polices et l’espacement.

Pour minimiser les différences entre plateformes :

  • Utilisez des valeurs CSS explicites plutôt que de vous appuyer sur les valeurs par défaut du navigateur
  • Incluez une balise meta viewport (par exemple, <meta name="viewport" content="width=device-width, initial-scale=1">)
  • Testez sur des appareils réels avec des envois de test

Encodage des caractères

Lorsque vous créez des messages in-app HTML personnalisés contenant des caractères spéciaux — tels que l’alphabet cyrillique, des caractères accentués ou d’autres textes non ASCII — incluez l’encodage UTF-8 dans votre HTML pour garantir un affichage correct. Sans l’encodage UTF-8, ces caractères peuvent apparaître cassés ou manquants lors du rendu dans la webview.

Pour activer l’encodage UTF-8, ajoutez la balise meta suivante dans la section <head> de votre HTML :

1

<meta charset="UTF-8">

Cela force l’encodage UTF-8, qui est le jeu de caractères attendu pour les webviews affichant les messages in-app.

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

Nom de la méthode Description
brazeBridge.closeMessage() Ferme le message actuel. Le comportement diffère selon le canal :

Messages in-app : ferme uniquement l’interface. Aucun rejet n’est enregistré et aucune suppression côté serveur n’a lieu.

Bannières : équivaut à appeler logBannerDismissal. Cela enregistre un rejet de bannière, supprime la bannière de l’interface et empêche son affichage pour l’utilisateur. Cela redéclenche également tous les abonnés subscribeToBannersUpdates actifs. N’appelez pas cette méthode si le message est déjà en cours de fermeture ou s’il se fermera automatiquement en raison du traitement d’un lien profond.
window.addEventListener("ab.BridgeReady", function(){...}, false) Méthode de rappel déclenchée une fois que le chargement de brazeBridge est terminé. Tout le code JavaScript doit être exécuté dans cette fonction de rappel.
brazeBridge.requestImmediateDataFlush() Envoie les données en file d’attente vers les serveurs Braze. Documentation JS
brazeBridge.logClick(button_id_string) Enregistre un clic de bouton pour un ID de bouton donné. Lorsque button_id_string est laissé vide, un clic sur le corps du message est enregistré à la place. Le paramètre button_id_string peut être transmis comme button_id dans les événements de clics des messages in-app via Currents.

Cette méthode a été introduite dans le SDK Android v8.0.0, le SDK Web v2.5.0 et le SDK iOS v3.23.0.

Le paramètre button_id_string n’accepte que les caractères alphanumériques, les espaces, les tirets et les traits de soulignement. L’ajout d’un caractère accentué (par exemple ö, â, ê) interrompt le suivi des clics sur le bouton, ce qui fait que la chaîne de caractères du bouton n’apparaît pas dans la section d’analyse de la campagne et que les clics ne sont pas comptabilisés.
brazeBridge.logCustomEvent(eventName,eventProperties) Enregistre un événement personnalisé. Documentation JS
brazeBridge.logPurchase(productId, price, currencyCode, quantity, purchaseProperties) Enregistre un achat. Documentation JS
brazeBridge.getUser().addAlias(alias, label) Ajoute un alias à un utilisateur. Introduit dans le SDK Web v2.7.0, le SDK Android v8.1.0 et le SDK iOS v3.26.0. Documentation JS
brazeBridge.getUser().addToCustomAttributeArray(key, value) Ajoute une valeur à un tableau d’attributs personnalisés. Documentation JS
brazeBridge.getUser().addToSubscriptionGroup(subscriptionGroupId) Ajoute un utilisateur à un groupe d’abonnement e-mail ou SMS. Documentation JS.

Cette méthode a été introduite dans le SDK Android v15.0.0, le SDK Web v3.4.0 et le SDK iOS v4.3.3.
brazeBridge.getUser().removeFromSubscriptionGroup(subscriptionGroupId) Supprime un utilisateur d’un groupe d’abonnement e-mail ou SMS. Documentation JS.

Cette méthode a été introduite dans le SDK Android v15.0.0, le SDK Web v3.4.0 et le SDK iOS v4.3.3.
brazeBridge.getUser().setFirstName(firstName) Définit le prénom d’un utilisateur. Documentation JS
brazeBridge.getUser().setLastName(lastName) Définit le nom de famille d’un utilisateur. Documentation JS
brazeBridge.getUser().setEmail(email) Définit l’adresse e-mail d’un utilisateur. Documentation JS
brazeBridge.getUser().setGender(gender) Définit le sexe d’un utilisateur. Documentation JS
brazeBridge.getUser().setDateOfBirth(year, month, day) Définit la date de naissance d’un utilisateur. Documentation JS
brazeBridge.getUser().setCountry(country) Définit le pays d’un utilisateur. Documentation JS
brazeBridge.getUser().setHomeCity(city) Définit la ville d’un utilisateur. Documentation JS
brazeBridge.getUser().setEmailNotificationSubscriptionType(notificationSubscriptionType) Définit l’état d’abonnement aux notifications par e-mail. Documentation JS
brazeBridge.getUser().setPushNotificationSubscriptionType(notificationSubscriptionType) Définit l’état d’abonnement aux notifications push. Documentation JS
brazeBridge.getUser().setPhoneNumber(phoneNumber) Définit le numéro de téléphone d’un utilisateur. Documentation JS
brazeBridge.getUser().setCustomUserAttribute(key, value, merge) Définit un attribut utilisateur personnalisé. Documentation JS
brazeBridge.getUser().removeFromCustomAttributeArray(key, value) Supprime une valeur d’un tableau d’attributs personnalisés. Documentation JS
brazeBridge.getUser().incrementCustomUserAttribute(key, incrementValue) Incrémente un attribut utilisateur personnalisé. Documentation JS
brazeBridge.getUser().setLanguage(language) Définit la langue d’un utilisateur. Introduit dans le SDK Android v5.0.0 et le SDK Web v2.6.0. Documentation JS
brazeBridge.getUser().setCustomLocationAttribute(key, latitude, longitude) Définit un attribut d’emplacement personnalisé. Introduit dans le SDK Android v5.0.0. Documentation JS
brazeBridge.web.registerAppboyPushMessages(successCallback, deniedCallback) S’inscrire aux notifications push Web (Web uniquement). Cette méthode est sans effet lorsqu’elle est appelée dans un environnement non Web. Documentation JS
brazeBridge.requestPushPermission(successCallback, deniedCallback) S’inscrire aux notifications push sur Web, iOS et Android. Remarque : les rappels de la méthode sont uniquement pris en charge sur le Web. Cette méthode a été introduite à partir du SDK Web v4.0.0, du SDK Android v21.0.0 et du SDK Swift v5.4.0. Documentation JS
brazeBridge.changeUser(id, sdkAuthSignature?) Identifie l’utilisateur avec un ID unique. Documentation JS

Cette méthode a été introduite dans le 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.

En plus du JavaScript personnalisé, les SDK Braze peuvent également envoyer des données analytiques avec ces raccourcis d’URL pratiques. Notez que ces paramètres de requête et schémas d’URL sont tous sensibles à la casse.

Suivi des clics sur les boutons (obsolète)

Pour enregistrer les clics sur les boutons dans les analyses des messages in-app, vous pouvez ajouter abButtonId comme paramètre de requête à tout deep link, URL de redirection ou élément d’ancrage <a>. Utilisez ?abButtonId=0 pour enregistrer un clic sur « Bouton 1 », et ?abButtonId=1 pour enregistrer un clic sur « Bouton 2 ».

Comme pour les autres paramètres d’URL, le premier paramètre doit commencer par un point d’interrogation ?, tandis que les paramètres suivants doivent être séparés par une esperluette &.

Exemples d’URL

  • https://example.com/?abButtonId=0 - Clic sur le bouton 1
  • https://example.com/?abButtonId=1 - Clic sur le bouton 2
  • https://example.com/?utm_source=braze&abButtonId=0 - Clic sur le bouton 1 avec d’autres paramètres d’URL existants
  • myApp://deep-link?page=home&abButtonId=1 - Deep link mobile avec clic sur le bouton 2
  • <a href="https://example.com/?abButtonId=1"> - Élément d’ancrage <a> avec clic sur le bouton 2

Pour ouvrir des liens en dehors de votre application dans une nouvelle fenêtre, définissez ?abExternalOpen=true. Le message sera fermé avant l’ouverture du lien.

Pour le deep linking, Braze ouvrira votre URL quelle que soit la valeur de abExternalOpen.

Pour que Braze traite votre lien HTTP ou HTTPS comme un deep link, définissez ?abDeepLink=true.

Lorsque ce paramètre de chaîne de requête est absent ou défini sur false, Braze tentera d’ouvrir le lien web dans un navigateur web interne à l’intérieur de l’application hôte.

Fermer le message in-app

Pour fermer un message in-app, vous pouvez utiliser la méthode JavaScript brazeBridge.closeMessage().

Par exemple, <a onclick="brazeBridge.closeMessage()" href="#">Fermer</a> fermera le message in-app.

Téléchargement HTML avec aperçu

Lors de la création de messages in-app HTML personnalisés, vous pouvez prévisualiser votre contenu interactif directement dans Braze.

Le panneau d’aperçu du message dans l’éditeur affiche un aperçu réaliste qui exécute le JavaScript inclus dans votre message. Vous pouvez prévisualiser et interagir avec vos messages personnalisés depuis le panneau d’aperçu en naviguant entre les pages, en soumettant des formulaires ou des sondages, en regardant des animations JavaScript, et plus encore !

Interaction avec l'aperçu HTML en faisant défiler les pages.

Créer une campagne

Fichiers de ressources

Lors de la création de messages in-app avec code personnalisé par téléchargement HTML, vous pouvez télécharger les ressources de la campagne dans la bibliothèque multimédia pour les référencer dans votre message.

Les types de fichiers suivants sont pris en charge pour le téléchargement :

Type de fichier Extension de fichier
Fichiers de polices .ttf, .woff, .otf, .woff2
Images SVG .svg
Fichiers JavaScript .js
Fichiers CSS .css

Braze recommande de télécharger les ressources dans la bibliothèque multimédia pour deux raisons :

  1. Les ressources ajoutées à une campagne via la bibliothèque multimédia permettent à vos messages de s’afficher même lorsque l’utilisateur est hors ligne ou dispose d’une mauvaise connexion Internet.
  2. Les ressources téléchargées dans Braze peuvent être réutilisées dans plusieurs campagnes.
Ajouter des fichiers de ressources

Vous pouvez ajouter des ressources nouvelles ou existantes à votre campagne.

Pour ajouter de nouvelles ressources à votre campagne, utilisez la section de glisser-déposer pour télécharger un fichier. Les ressources ajoutées dans cette section seront également automatiquement ajoutées à la bibliothèque multimédia. Pour ajouter des ressources que vous avez déjà téléchargées dans la bibliothèque multimédia, sélectionnez Add from Media Library.

Une fois vos ressources ajoutées, elles apparaîtront dans la section Assets for this campaign.

Si le nom de fichier d’une ressource correspond à celui d’une ressource HTML locale, elle est remplacée automatiquement (par exemple, cat.png est téléchargé et <img src="cat.png" /> existe).

Sinon, survolez une ressource dans la liste et sélectionnez Copy pour copier l’URL du fichier dans votre presse-papiers. Collez ensuite l’URL de la ressource copiée dans votre HTML comme vous le feriez normalement pour référencer une ressource distante.

Éditeur HTML

Les modifications que vous apportez dans le HTML s’affichent automatiquement dans le panneau d’aperçu au fur et à mesure de la saisie. Les méthodes JavaScript brazeBridge que vous utilisez dans votre HTML ne mettront pas à jour les profils utilisateur lors de la prévisualisation dans le tableau de bord.

Suivi des boutons

Vous pouvez suivre les performances au sein de votre message in-app avec code personnalisé en utilisant la méthode JavaScript brazeBridge.logClick(button_id). Cela vous permet de suivre programmatiquement « Button 1 », « Button 2 » et « Body Clicks » en utilisant respectivement brazeBridge.logClick('0'), brazeBridge.logClick('1') ou brazeBridge.logClick().

Clics Méthode
Button 1 brazeBridge.logClick('0')
Button 2 brazeBridge.logClick('1')
Clic sur le corps brazeBridge.logClick()
Suivi de bouton personnalisé brazeBridge.logClick('your custom name here')

Utilisez brazeBridge.logClick(button_id) pour les messages HTML avec aperçu lorsque vous avez besoin de plus de deux boutons suivis. Button 1 et Button 2 correspondent à '0' et '1' ; les boutons supplémentaires utilisent des ID personnalisés (jusqu’à 100 ID uniques par campagne). Pour les restrictions de caractères sur les ID de boutons, consultez Suivi des boutons.

Si un bouton de votre message in-app HTML personnalisé ne se charge pas lorsqu’on clique dessus, vérifiez que le lien utilise une URL valide ou un schéma de deep link pris en charge. Les URL mal formées ou les schémas personnalisés non pris en charge peuvent empêcher l’action de clic de s’exécuter.

Clics sur le corps lors de la fermeture du message

L’appel à brazeBridge.closeMessage() ferme le message mais n’enregistre pas d’analyse en soi. Pour enregistrer un clic sur le corps lorsque l’utilisateur ferme le message, appelez brazeBridge.logClick() avant brazeBridge.closeMessage() afin que l’enregistrement des clics reste cohérent sur toutes les plateformes.

Le HTML personnalisé ne s’affiche pas sur Android (fichiers zip Windows)

Si votre message in-app HTML personnalisé s’affiche dans l’aperçu mais ne s’affiche pas sur les appareils Android, vérifiez comment vos fichiers HTML et de ressources ont été empaquetés. Certains utilitaires de compression Windows ajoutent des entrées de répertoire (chemins de dossiers) à l’intérieur de l’archive au lieu de placer les fichiers au niveau racine.

Android peut échouer à charger les ressources référencées avec des chemins relatifs lorsque le zip inclut des entrées de répertoire imbriquées. Pour corriger cela :

  1. Extrayez vos fichiers HTML, CSS, JavaScript et images dans un seul dossier.
  2. Sélectionnez tous les fichiers (pas le dossier parent) lors de la création de l’archive zip.
  3. Confirmez que les chemins dans votre HTML référencent les fichiers à la racine du zip (par exemple, style.css, et non assets/style.css), ou ajustez les chemins pour correspondre à la structure aplatie.
  4. Téléchargez à nouveau le zip et envoyez un message de test à un appareil Android.

Vous pouvez également télécharger les ressources via la bibliothèque multimédia au lieu de les regrouper dans un fichier zip.

Modifications rétro-incompatibles

  1. Le deep link braze://close, qui était auparavant pris en charge sur les applications mobiles, a été supprimé au profit de la méthode JavaScript brazeBridge.closeMessage(). Cela permet des messages HTML multiplateformes, puisque le web ne prend pas en charge les deep links.

  2. Le suivi automatique des clics, qui utilisait ?abButtonId=0 pour les ID de boutons, et le suivi des « clics sur le corps » sur les boutons de fermeture ont été supprimés. Les exemples de code suivants montrent comment modifier votre HTML pour utiliser nos nouvelles méthodes JavaScript de suivi des clics :

    Avant Aprè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!