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. Le InAppMessageJavascriptInterface 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 Android de Braze.

Ajouter l’interface à une WebView

L’utilisation de la fonctionnalité de Braze à partir d’une WebView dans votre application peut être effectuée en ajoutant l’interface JavaScript de Braze à votre WebView. Après l’ajout de l’interface, la même API est disponible pour User Guide : Les messages in-app HTML seront disponibles dans votre WebView personnalisé.

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égrer du contenu YouTube

YouTube et d’autres contenus HTML5 peuvent être joués 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 des 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">
        </iframe>
    </div>
</body>

Conditions préalables

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

About HTML messages

With the Braze JavaScript interface, you can leverage Braze inside the custom WebViews within your app. The interface’s ScriptMessageHandler is responsible for:

  1. Injecting the Braze JavaScript bridge into your WebView, as outlined in User Guide: HTML in-app messages.
  2. Passing the bridge methods received from your WebView to the Braze Swift SDK.

Adding the interface to a WebView

First, add the ScriptMessageHandler from WebViewBridge to your app.

1

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

Add the initialized scriptMessageHandler to a WkWebView’s userContentController.

1
2
3
4

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

Then create the WebView using your configuration.

1

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

When you’re finished, your code should be similar to the following:

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)

Example: Logging a custom event

In the following example, BrazeBridge logs a custom event from existing web content to the Braze Swift SDK.

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>
Github   Modifier cette page sur GitHub
New Stuff!