Skip to content

Mensagens no app em HTML

Saiba como adicionar a interface JavaScript do Braze ao seu app, para que você possa usar a API do Braze para criar mensagens HTML no app em suas WebViews personalizadas.

Pré-requisitos

Antes de usar este recurso, você precisará integrar o SDK Android Braze.

Sobre mensagens HTML

Com a interface JavaScript do Braze, você pode aproveitar o Braze dentro das WebViews personalizadas em seu app. O InAppMessageJavascriptInterface é responsável por:

  1. Injetar a ponte JavaScript do Braze em sua WebView, conforme descrito em Guia do Usuário: Mensagens HTML no app.
  2. Passar os métodos da ponte recebidos de sua WebView para o Braze Android SDK.

Adição da interface a um WebView

O uso da funcionalidade da Braze a partir de um WebView em seu app pode ser feito adicionando a interface Braze JavaScript ao seu WebView. Depois que a interface foi adicionada, a mesma API disponível para Guia do Usuário: Mensagens HTML no app estarão disponíveis dentro de sua WebView personalizada.

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")

Incorporando conteúdo do YouTube

O YouTube e outros conteúdos em HTML5 podem ser reproduzidos em mensagens no app em HTML. Isso requer que a aceleração de hardware seja ativada na atividade em que a mensagem no app está sendo exibida; consulte o guia do desenvolvedor do Android para obter mais detalhes. A aceleração de hardware está disponível apenas nas versões 11 e posteriores da API do Android.

A seguir, um exemplo de um vídeo do YouTube incorporado em um trecho de 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>

Ao usar deep links ou links externos em mensagens HTML no app Android, não chame brazeBridge.closeMessage() em seu JavaScript. A lógica interna do SDK fecha automaticamente a mensagem no app quando redireciona para um link. Chamar brazeBridge.closeMessage() interfere nesse processo e pode fazer com que a mensagem fique sem resposta quando os usuários retornarem ao seu app.

O seguinte é um exemplo de um deep link em um trecho de código:

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>

Pré-requisitos

Antes de poder usar esse recurso, você precisará integrar o Swift Braze SDK.

Sobre o envio de mensagens HTML

Com a interface JavaScript do Braze, você pode aproveitar o Braze dentro das WebViews personalizadas em seu app. A interface ScriptMessageHandler da interface é responsável por:

  1. Injetar a ponte Braze JavaScript em seu WebView, conforme descrito no Guia do Usuário : Mensagens no app em HTML.
  2. Passar os métodos bridge recebidos de seu WebView para o Braze Swift SDK.

Adição da interface a um WebView

Primeiro, adicione o ScriptMessageHandler de WebViewBridge ao seu app.

1

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

Adicione o site scriptMessageHandler inicializado ao site userContentController de um WkWebView.

1
2
3
4

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

Em seguida, crie o WebView usando sua configuração.

1

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

Quando terminar, seu código deverá ser semelhante ao seguinte:

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)

Exemplo: Registro de um evento personalizado

No exemplo a seguir, o site BrazeBridge registra um evento personalizado do conteúdo da Web existente para o 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   Editar esta página no GitHub
New Stuff!