Skip to content

Messages in-app HTML

Découvrez comment ajouter l’interface JavaScript de Braze à votre application, afin d’utiliser l’API de Braze pour créer des messages HTML in-app dans vos WebViews personnalisées.

Conditions préalables

Avant de pouvoir utiliser cette fonctionnalité, vous devrez intégrer le SDK Android Braze.

À propos des messages HTML

Grâce à l’interface JavaScript de Braze, vous pouvez exploiter Braze à l’intérieur des WebViews personnalisées de votre application. L’élément InAppMessageJavascriptInterface est responsable de :

  1. Injecter le pont JavaScript de Braze dans votre WebView, comme indiqué dans le guide d’utilisation : Messages HTML in-app.
  2. Transmettre les méthodes de pont reçues de votre WebView au SDK Android de Braze.

Ajouter l’interface à une WebView

Pour utiliser les fonctionnalités de Braze à partir d’une WebView dans votre application, ajoutez l’interface JavaScript de Braze à votre WebView. Une fois l’interface ajoutée, la même API disponible pour le guide d’utilisation : Messages HTML in-app sera accessible dans votre WebView personnalisée.

1
2
3
4
5

String javascriptString = BrazeFileUtils.getAssetFileStringContents(context.getAssets(), "braze-html-bridge.js");
myWebView.loadUrl("javascript:" + javascriptString);

final InAppMessageJavascriptInterface javascriptInterface = new InAppMessageJavascriptInterface(context, inAppMessage);
myWebView.addJavascriptInterface(javascriptInterface, "brazeInternalBridge");

1
2
3
4
5

val javascriptString = context.assets.getAssetFileStringContents("braze-html-bridge.js")
myWebView.loadUrl("javascript:" + javascriptString!!)

val javascriptInterface = InAppMessageJavascriptInterface(context, inAppMessage)
myWebView.addJavascriptInterface(javascriptInterface, "brazeInternalBridge")

Intégration de contenu YouTube

YouTube et d’autres contenus HTML5 peuvent être lus dans des messages in-app HTML. Cela nécessite que l’accélération matérielle soit activée dans l’activité où le message in-app est affiché. Consultez le guide du développeur Android pour plus de détails. L’accélération matérielle est uniquement disponible sur les versions 11 et ultérieures de l’API Android.

Voici un exemple de vidéo YouTube intégrée dans un extrait de code HTML :

1
2
3
4
5
6
7
8
9

<body>
    <div class="box">
        <div class="relativeTopRight">
            <a href="appboy://close">X</a>
        </div>
        <iframe width="60%" height="50%" src="https://www.youtube.com/embed/_x45EB3BWqI" title="YouTube video player">
        </iframe>
    </div>
</body>

Lorsque vous utilisez des liens profonds ou des liens externes dans des messages in-app HTML Android, n’appelez pas brazeBridge.closeMessage() dans votre JavaScript. La logique interne du SDK ferme automatiquement le message in-app lorsqu’il redirige vers un lien. L’appel de brazeBridge.closeMessage() interfère avec ce processus et peut entraîner un blocage du message lorsque les utilisateurs reviennent à votre application.

Voici un exemple de lien profond dans un extrait de code :

1
2
3
4
5

<script>
document.querySelectorAll('[data-button-id]').forEach(function (node)
Unknown macro: { node.addEventListener('click', function () { brazeBridge.logClick(node.dataset.buttonId); brazeBridge.closeMessage(); }); }
);
</script>

Conditions préalables

Avant de pouvoir utiliser cette fonctionnalité, vous devrez intégrer le SDK Swift Braze.

À propos des messages HTML

Grâce à l’interface JavaScript de Braze, vous pouvez exploiter Braze à l’intérieur des WebViews personnalisées de votre application. L’élément ScriptMessageHandler est responsable de :

  1. Injecter le pont JavaScript de Braze dans votre WebView, comme indiqué dans le guide d’utilisation de : Messages HTML in-app.
  2. Transmission des méthodes de pont reçues de votre WebView au SDK Braze Swift.

Ajouter l’interface à une WebView

Tout d’abord, ajoutez le fichier ScriptMessageHandler from WebViewBridge à votre application.

1

let scriptMessageHandler = Braze.WebViewBridge.ScriptMessageHandler(braze: braze)

Ajoutez l’adresse scriptMessageHandler initialisée à l’adresse userContentController d’un WkWebView.

1
2
3
4

configuration.userContentController.add(
  scriptMessageHandler,
  name: Braze.WebViewBridge.ScriptMessageHandler.name
)

Créez ensuite la WebView en utilisant votre configuration.

1

let webView = WKWebView(frame: .zero, configuration: configuration)

Lorsque vous aurez terminé, votre code devrait ressembler à ce qui suit :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// Create the script message handler using your initialized Braze instance.
let scriptMessageHandler = Braze.WebViewBridge.ScriptMessageHandler(braze: braze)

// Create a web view configuration and setup the script message handler.
let configuration = WKWebViewConfiguration()
configuration.userContentController.addUserScript(
  Braze.WebViewBridge.ScriptMessageHandler.script
)
configuration.userContentController.add(
  scriptMessageHandler,
  name: Braze.WebViewBridge.ScriptMessageHandler.name
)

// Create the webview using the configuration
let webView = WKWebView(frame: .zero, configuration: configuration)

Exemple : Enregistrement d’un événement personnalisé

Dans l’exemple suivant, BrazeBridge enregistre un événement personnalisé à partir d’un contenu Web existant vers le SDK Braze Swift.

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Logging data via BrazeBridge Example</title>
    <script>
      function logData(data) {
        window.brazeBridge.logCustomEvent(data);
      }
    </script>
  </head>

  <body>
    <input
      type="button"
      value="Click to log a custom Event 'completed_level'"
      onclick="logData('completed_level')"
    />
  </body>
</html>
New Stuff!