Ir para o conteúdo

Personalize mensagens no app

Aprenda como personalizar mensagens no app para o SDK da Braze. Para técnicas avançadas de estilização, confira nosso tutorial sobre personalização de estilo de mensagens usando pares chave-valor.

Pré-requisitos

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

Estilos personalizados

Os elementos da interface do usuário da Braze vêm com uma aparência padrão que cria uma experiência neutra de mensagens no app e visa à consistência com outras plataformas móveis da Braze. Os estilos padrão da Braze são definidos em CSS no SDK da Braze.

Definição de um estilo padrão

Ao substituir estilos selecionados em seu aplicativo, você pode personalizar nossos tipos de mensagem no app padrão com suas próprias imagens de fundo, famílias de fontes, estilos, tamanhos, animações e muito mais.

Por exemplo, a seguir há uma substituição que fará com que os cabeçalhos de uma mensagem no app apareçam em itálico:




  body .ab-in-app-message .ab-message-header {
    font-style: italic;
  }

Consulte os JSDocs para saber mais.

Personalização do z-index

Por padrão, as mensagens no app são exibidas usando z-index: 9001. Isso pode ser configurado usando a opção de inicialização inAppMessageZIndex , caso seu site estilize elementos com valores mais altos do que esse.




braze.initialize("YOUR-API-KEY", {
    baseUrl: "YOUR-API-ENDPOINT",
    inAppMessageZIndex: 12000
});

Personalização do descarte de mensagens

Por padrão, quando uma mensagem no app estiver sendo exibida, pressionar o botão de escape ou clicar no fundo acinzentado da página descartará a mensagem. Configure a opção de inicialização requireExplicitInAppMessageDismissal para true para evitar esse comportamento e exigir um clique explícito no botão para descartar as mensagens.




import * as braze from "@braze/web-sdk";
braze.initialize("YOUR-API-KEY", {
    baseUrl: "YOUR-API-ENDPOINT",
    requireExplicitInAppMessageDismissal: true
});

Personalização do tempo de exibição

Para substituir o tempo de exibição padrão, remova as chamadas a braze.automaticallyShowInAppMessages() e manipule as mensagens em braze.subscribeToInAppMessage(). Registre seu retorno de chamada antes de braze.openSession(), para que você possa interceptar mensagens de início de sessão e decidir se deseja exibir ou adiar cada mensagem.

Por padrão, a Braze exibe mensagens no app quando elas são disparadas e estão elegíveis para exibição. Se você precisar de um comportamento diferente para a experiência do seu app, use um retorno de chamada personalizado para adiar ou exibir mensagens com base na sua própria lógica.

O exemplo a seguir mostra como se inscrever em mensagens no app disparadas, adiar mensagens selecionadas e exibir mensagens adiadas posteriormente:




import * as braze from "@braze/web-sdk";

braze.initialize("YOUR-API-KEY", {
    baseUrl: "YOUR-API-ENDPOINT"
});

braze.subscribeToInAppMessage(function (message) {
    // Control-group messages should always be "shown" to log analytics.
    if (message.isControl || message instanceof braze.ControlMessage) {
        braze.showInAppMessage(message);
        return;
    }

    const shouldDefer = true; // Replace with your own display logic

    if (shouldDefer) {
        braze.deferInAppMessage(message);
        return;
    }

    braze.showInAppMessage(message);
});

braze.openSession();

// Later, when your app is ready to display a deferred message:
const deferredMessage = braze.getDeferredInAppMessage();
if (deferredMessage) {
    braze.showInAppMessage(deferredMessage);
}

Para orientações relacionadas à personalização de entrega, consulte:

Para configurar os links das mensagens no app para abrirem em uma nova guia, defina a opção openInAppMessagesInNewTab como true para forçar todos os links de cliques em mensagens no app a abrirem em uma nova guia ou janela.




braze.initialize('api-key', { openInAppMessagesInNewTab: true} );

Pré-requisitos

Antes de usar este recurso, você precisará integrar o SDK Android da Braze. Você também precisará configurar mensagens no app.

Configurando listeners de gerenciador personalizados

Embora o listener do BrazeInAppMessageManager possa lidar automaticamente com a exibição e o ciclo de vida das mensagens no app, você precisará implementar um listener de gerenciador personalizado se quiser personalizar totalmente suas mensagens.

O SDK da Braze tem uma classe padrão DefaultHtmlInAppMessageActionListener que é usada quando nenhum listener personalizado é definido e executa as ações apropriadas automaticamente. Se você precisar de mais controle sobre como um usuário interage com diferentes botões dentro de uma mensagem no app HTML personalizada, implemente uma classe IHtmlInAppMessageActionListener personalizada.

Esse listener se aplica tanto a mensagens criadas com HTML personalizado quanto a mensagens criadas usando o editor Drag-and-Drop (DnD). Ele não se aplica a IAMs tradicionais. IAMs tradicionais são os tipos de mensagens integrados da Braze, renderizados pelo SDK (por exemplo, slideup, modal e tela cheia), criados no criador de mensagens no app original usando layouts predefinidos. Diferentemente das IAMs HTML personalizadas e DnD, elas não passam pelo fluxo do listener de ações HTML.

Se você definir um IHtmlInAppMessageActionListener personalizado, sua lógica substituirá o comportamento de clique padrão para todas as mensagens DnD. Certifique-se de que sua equipe de marketing esteja ciente disso, pois pode afetar as Campaigns de formas inesperadas.

Etapa 1: Implemente o listener de gerenciador personalizado

Etapa 1.1: Implemente IInAppMessageManagerListener

Crie uma classe que implemente IInAppMessageManagerListener.

Os retornos de chamada no seu IInAppMessageManagerListener também serão chamados em vários pontos do ciclo de vida da mensagem no app. Por exemplo, se você definir um listener de gerenciador personalizado quando uma mensagem no app for recebida da Braze, o método beforeInAppMessageDisplayed() será chamado. Se a sua implementação desse método retornar InAppMessageOperation.DISCARD, isso sinaliza à Braze que a mensagem no app será tratada pelo app host e não deve ser exibida pela Braze. Se InAppMessageOperation.DISPLAY_NOW for retornado, a Braze tentará exibir a mensagem no app. Esse método deve ser usado se você optar por exibir a mensagem no app de maneira personalizada.

IInAppMessageManagerListener também inclui métodos delegate para cliques em mensagens e botões, que podem ser usados em casos como interceptar uma mensagem quando um botão ou mensagem é clicado para processamento adicional.

Etapa 1.2: Conecte-se aos métodos de ciclo de vida da view de IAM (opcional)

A interface IInAppMessageManagerListener possui métodos de view de mensagem no app chamados em pontos distintos do ciclo de vida da view da mensagem no app. Esses métodos são chamados na seguinte ordem:

  1. beforeInAppMessageViewOpened: Chamado logo antes de a mensagem no app ser adicionada à view da atividade. A mensagem no app ainda não está visível para o usuário nesse momento.
  2. afterInAppMessageViewOpened: Chamado logo após a mensagem no app ser adicionada à view da atividade. A mensagem no app agora está visível para o usuário nesse momento.
  3. beforeInAppMessageViewClosed: Chamado logo antes de a mensagem no app ser removida da view da atividade. A mensagem no app ainda está visível para o usuário nesse momento.
  4. afterInAppMessageViewClosed: Chamado logo após a mensagem no app ser removida da view da atividade. A mensagem no app não está mais visível para o usuário nesse momento.

Observe que o tempo entre afterInAppMessageViewOpened e beforeInAppMessageViewClosed é quando a view da mensagem no app está na tela, visível para o usuário.

Crie uma classe que implemente IHtmlInAppMessageActionListener.

Os retornos de chamada no seu IHtmlInAppMessageActionListener serão chamados sempre que o usuário iniciar qualquer uma das seguintes ações dentro da mensagem no app HTML:

  • Clicar no botão de fechar
  • Disparar um evento personalizado
  • Clicar em uma URL dentro da mensagem no app HTML



public class CustomHtmlInAppMessageActionListener implements IHtmlInAppMessageActionListener {
  private final Context mContext;

  public CustomHtmlInAppMessageActionListener(Context context) {
    mContext = context;
  }

  @Override
  public void onCloseClicked(IInAppMessage inAppMessage, String url, Bundle queryBundle) {
    Toast.makeText(mContext, "HTML In App Message closed", Toast.LENGTH_LONG).show();
    BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false);
  }

  @Override
  public boolean onCustomEventFired(IInAppMessage inAppMessage, String url, Bundle queryBundle) {
    Toast.makeText(mContext, "Custom event fired. Ignoring.", Toast.LENGTH_LONG).show();
    return true;
  }

  @Override
  public boolean onOtherUrlAction(IInAppMessage inAppMessage, String url, Bundle queryBundle) {
    Toast.makeText(mContext, "Custom url pressed: " + url + " . Ignoring", Toast.LENGTH_LONG).show();
    BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false);
    return true;
  }
}






class CustomHtmlInAppMessageActionListener(private val mContext: Context) : IHtmlInAppMessageActionListener {

    override fun onCloseClicked(inAppMessage: IInAppMessage, url: String, queryBundle: Bundle) {
        Toast.makeText(mContext, "HTML In App Message closed", Toast.LENGTH_LONG).show()
        BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false)
    }

    override fun onCustomEventFired(inAppMessage: IInAppMessage, url: String, queryBundle: Bundle): Boolean {
        Toast.makeText(mContext, "Custom event fired. Ignoring.", Toast.LENGTH_LONG).show()
        return true
    }

    override fun onOtherUrlAction(inAppMessage: IInAppMessage, url: String, queryBundle: Bundle): Boolean {
        Toast.makeText(mContext, "Custom url pressed: $url . Ignoring", Toast.LENGTH_LONG).show()
        BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false)
        return true
    }
}

Etapa 2: Instrua a Braze a usar o listener de gerenciador personalizado

Após criar o IInAppMessageManagerListener, chame BrazeInAppMessageManager.getInstance().setCustomInAppMessageManagerListener() para instruir o BrazeInAppMessageManager a usar o seu IInAppMessageManagerListener personalizado em vez do listener padrão. Faça isso no seu Application.onCreate() antes de qualquer outra chamada à Braze, para que o listener personalizado esteja definido antes de qualquer mensagem no app ser exibida.

Alterando mensagens no app antes da exibição

Quando uma nova mensagem no app é recebida e já existe uma mensagem no app sendo exibida, a nova mensagem será colocada no topo da pilha e poderá ser exibida posteriormente.

No entanto, se não houver nenhuma mensagem no app sendo exibida, o seguinte método delegate no IInAppMessageManagerListener será chamado:




@Override
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
  return InAppMessageOperation.DISPLAY_NOW;
}






override fun beforeInAppMessageDisplayed(inAppMessage: IInAppMessage): InAppMessageOperation {
  return InAppMessageOperation.DISPLAY_NOW
}

O valor de retorno InAppMessageOperation() pode controlar quando a mensagem deve ser exibida. O uso sugerido desse método é postergar mensagens em certas partes do app retornando DISPLAY_LATER quando mensagens no app seriam uma distração para a experiência do usuário.

Valor de retorno InAppMessageOperation Comportamento
DISPLAY_NOW A mensagem será exibida
DISPLAY_LATER A mensagem será devolvida à pilha e exibida na próxima oportunidade disponível
DISCARD A mensagem será descartada
null A mensagem será ignorada. Esse método NÃO deve retornar null

Consulte InAppMessageOperation para mais detalhes.

No Android, isso é feito chamando logClick e logImpression nas mensagens no app e logButtonClick nas mensagens no app imersivas.

Após o IHtmlInAppMessageActionListener ser criado, chame BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener() para instruir o BrazeInAppMessageManager a usar o seu IHtmlInAppMessageActionListener personalizado em vez do listener de ação padrão.

Recomendamos definir o IHtmlInAppMessageActionListener no seu Application.onCreate() antes de qualquer outra chamada à Braze. Isso definirá o listener de ação personalizado antes de qualquer mensagem no app ser exibida:




BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener(new CustomHtmlInAppMessageActionListener(context));






BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener(CustomHtmlInAppMessageActionListener(context))

Configurando factories personalizadas

Você pode substituir diversos comportamentos padrão por meio de objetos factory personalizados. Eles podem ser registrados no SDK da Braze conforme necessário para alcançar os resultados desejados. No entanto, se você decidir substituir uma factory, provavelmente precisará delegar explicitamente para o padrão ou reimplementar a funcionalidade fornecida pela factory padrão da Braze. O trecho de código a seguir ilustra como fornecer implementações personalizadas das interfaces IInAppMessageViewFactory e IInAppMessageViewWrapperFactory.

Tipos de mensagem no app




class BrazeDemoApplication : Application(){
 override fun onCreate() {
    super.onCreate()
    registerActivityLifecycleCallbacks(BrazeActivityLifecycleCallbackListener(true, true))
    BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(CustomInAppMessageViewWrapperFactory())
    BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory(CustomInAppMessageViewFactory())
  }
}

Tipos de mensagem no app




public class BrazeDemoApplication extends Application {
  @Override
  public void onCreate{
    super.onCreate();
    registerActivityLifecycleCallbacks(new BrazeActivityLifecycleCallbackListener(true, true));
    BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(new CustomInAppMessageViewWrapperFactory());
    BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory(new CustomInAppMessageViewFactory());
  }
}

Os tipos de mensagem no app da Braze são versáteis o suficiente para cobrir a maioria dos casos de uso personalizados. No entanto, se você quiser definir totalmente a aparência visual das suas mensagens no app em vez de usar um tipo padrão, a Braze torna isso possível configurando uma view factory personalizada.

O BrazeInAppMessageManager lida automaticamente com a inserção do modelo de mensagem no app na hierarquia de views da activity existente, usando por padrão o DefaultInAppMessageViewWrapper. Se você precisar personalizar como as mensagens no app são inseridas na hierarquia de views, deve usar uma IInAppMessageViewWrapperFactory personalizada.

As mensagens no app possuem comportamentos de animação predefinidos. Mensagens Slideup deslizam para a tela; mensagens full e modal aparecem e desaparecem com fade. Se você quiser definir comportamentos de animação personalizados para suas mensagens no app, a Braze torna isso possível configurando uma animation factory personalizada.

Etapa 1: Implemente a factory

Crie uma classe que implemente IInAppMessageViewFactory:




public class CustomInAppMessageViewFactory implements IInAppMessageViewFactory {
  @Override
  public View createInAppMessageView(Activity activity, IInAppMessage inAppMessage) {
    // Uses a custom view for slideups, modals, and full in-app messages.
    // HTML in-app messages and any other types will use the Braze default in-app message view factories
    switch (inAppMessage.getMessageType()) {
      case SLIDEUP:
      case MODAL:
      case FULL:
        // Use a custom view of your choosing
        return createMyCustomInAppMessageView();
      default:
        // Use the default in-app message factories
        final IInAppMessageViewFactory defaultInAppMessageViewFactory = BrazeInAppMessageManager.getInstance().getDefaultInAppMessageViewFactory(inAppMessage);
        return defaultInAppMessageViewFactory.createInAppMessageView(activity, inAppMessage);
    }
  }
}






class CustomInAppMessageViewFactory : IInAppMessageViewFactory {
  override fun createInAppMessageView(activity: Activity, inAppMessage: IInAppMessage): View {
    // Uses a custom view for slideups, modals, and full in-app messages.
    // HTML in-app messages and any other types will use the Braze default in-app message view factories
    when (inAppMessage.messageType) {
      MessageType.SLIDEUP, MessageType.MODAL, MessageType.FULL ->
        // Use a custom view of your choosing
        return createMyCustomInAppMessageView()
      else -> {
        // Use the default in-app message factories
        val defaultInAppMessageViewFactory = BrazeInAppMessageManager.getInstance().getDefaultInAppMessageViewFactory(inAppMessage)
        return defaultInAppMessageViewFactory!!.createInAppMessageView(activity, inAppMessage)
      }
    }
  }
}

Crie uma classe que implemente IInAppMessageViewWrapperFactory e retorne um IInAppMessageViewWrapper.

Essa factory é chamada imediatamente após a criação da view da mensagem no app. A maneira mais fácil de implementar um IInAppMessageViewWrapper personalizado é simplesmente estender o DefaultInAppMessageViewWrapper padrão:




public class CustomInAppMessageViewWrapper extends DefaultInAppMessageViewWrapper {
  public CustomInAppMessageViewWrapper(View inAppMessageView,
                                       IInAppMessage inAppMessage,
                                       IInAppMessageViewLifecycleListener inAppMessageViewLifecycleListener,
                                       BrazeConfigurationProvider brazeConfigurationProvider,
                                       Animation openingAnimation,
                                       Animation closingAnimation, View clickableInAppMessageView) {
    super(inAppMessageView,
        inAppMessage,
        inAppMessageViewLifecycleListener,
        brazeConfigurationProvider,
        openingAnimation,
        closingAnimation,
        clickableInAppMessageView);
  }

  @Override
  public void open(@NonNull Activity activity) {
    super.open(activity);
    Toast.makeText(activity.getApplicationContext(), "Opened in-app message", Toast.LENGTH_SHORT).show();
  }

  @Override
  public void close() {
    super.close();
    Toast.makeText(mInAppMessageView.getContext().getApplicationContext(), "Closed in-app message", Toast.LENGTH_SHORT).show();
  }
}






class CustomInAppMessageViewWrapper(inAppMessageView: View,
                                    inAppMessage: IInAppMessage,
                                    inAppMessageViewLifecycleListener: IInAppMessageViewLifecycleListener,
                                    brazeConfigurationProvider: BrazeConfigurationProvider,
                                    openingAnimation: Animation,
                                    closingAnimation: Animation, clickableInAppMessageView: View) :
    DefaultInAppMessageViewWrapper(inAppMessageView,
        inAppMessage,
        inAppMessageViewLifecycleListener,
        brazeConfigurationProvider,
        openingAnimation,
        closingAnimation,
        clickableInAppMessageView) {

  override fun open(activity: Activity) {
    super.open(activity)
    Toast.makeText(activity.applicationContext, "Opened in-app message", Toast.LENGTH_SHORT).show()
  }

  override fun close() {
    super.close()
    Toast.makeText(mInAppMessageView.context.applicationContext, "Closed in-app message", Toast.LENGTH_SHORT).show()
  }
}

Crie uma classe que implemente IInAppMessageAnimationFactory:




public class CustomInAppMessageAnimationFactory implements IInAppMessageAnimationFactory {

  @Override
  public Animation getOpeningAnimation(IInAppMessage inAppMessage) {
    Animation animation = new AlphaAnimation(0, 1);
    animation.setInterpolator(new AccelerateInterpolator());
    animation.setDuration(2000L);
    return animation;
  }

  @Override
  public Animation getClosingAnimation(IInAppMessage inAppMessage) {
    Animation animation = new AlphaAnimation(1, 0);
    animation.setInterpolator(new DecelerateInterpolator());
    animation.setDuration(2000L);
    return animation;
  }
}






class CustomInAppMessageAnimationFactory : IInAppMessageAnimationFactory {
  override fun getOpeningAnimation(inAppMessage: IInAppMessage): Animation {
    val animation: Animation = AlphaAnimation(0, 1)
    animation.interpolator = AccelerateInterpolator()
    animation.duration = 2000L
    return animation
  }

  override fun getClosingAnimation(inAppMessage: IInAppMessage): Animation {
    val animation: Animation = AlphaAnimation(1, 0)
    animation.interpolator = DecelerateInterpolator()
    animation.duration = 2000L
    return animation
  }
}

Etapa 2: Instrua a Braze a usar a factory

Após a criação da sua IInAppMessageViewFactory, chame BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory() para instruir o BrazeInAppMessageManager a usar sua IInAppMessageViewFactory personalizada em vez da view factory padrão.

Como funciona

A view da mensagem no app do tipo slideup implementa IInAppMessageView. As views dos tipos full e modal implementam IInAppMessageImmersiveView. Implementar uma dessas classes permite que a Braze adicione listeners de clique à sua view personalizada quando apropriado. Todas as classes de view da Braze estendem a classe View do Android.

Implementar IInAppMessageView permite que você defina uma parte específica da sua view personalizada como clicável. Implementar IInAppMessageImmersiveView permite que você defina views de botões de mensagem e uma view de botão de fechar.

Após a criação do seu IInAppMessageViewWrapper, chame BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory() para instruir o BrazeInAppMessageManager a usar sua IInAppMessageViewWrapperFactory personalizada em vez da view wrapper factory padrão.

Recomendamos configurar sua IInAppMessageViewWrapperFactory no Application.onCreate() antes de qualquer outra chamada à Braze. Isso garantirá que a view wrapper factory personalizada seja definida antes que qualquer mensagem no app seja exibida:




BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(new CustomInAppMessageViewWrapper());






BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(CustomInAppMessageViewWrapper())

Após a criação da sua IInAppMessageAnimationFactory, chame BrazeInAppMessageManager.getInstance().setCustomInAppMessageAnimationFactory() para instruir o BrazeInAppMessageManager a usar sua IInAppMessageAnimationFactory personalizada em vez da animation factory padrão.

Recomendamos configurar sua IInAppMessageAnimationFactory no Application.onCreate() antes de qualquer outra chamada à Braze. Isso garantirá que a animation factory personalizada seja definida antes que qualquer mensagem no app seja exibida.

Estilos personalizados

Os elementos de interface da Braze vêm com uma aparência padrão que segue as diretrizes padrão de interface do Android e proporciona uma experiência integrada. Este artigo de referência aborda a estilização personalizada de mensagens no app para seu aplicativo Android ou FireOS.

Definindo um estilo padrão

Você pode ver os estilos padrão no arquivo styles.xml do SDK da Braze:




  <style name="Braze"/>
  <style name="Braze.InAppMessage"/>
  <style name="Braze.InAppMessage.Header">
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:padding">0.0dp</item>
    <item name="android:background">@android:color/transparent</item>
    <item name="android:textColor">@color/com_braze_inappmessage_header_text</item>
    <item name="android:textSize">20.0sp</item>
    <item name="android:lineSpacingMultiplier">1.3</item>
    <item name="android:gravity">center</item>
    <item name="android:textStyle">bold</item>
    <item name="android:layout_centerHorizontal">true</item>
  </style>

Se preferir, você pode substituir esses estilos para criar uma aparência que se adapte melhor ao seu app.

Para substituir um estilo, copie-o na íntegra para o arquivo styles.xml do seu projeto e faça as modificações. O estilo inteiro deve ser copiado para o seu arquivo styles.xml local para que todos os atributos sejam definidos corretamente. Observe que esses estilos personalizados são para alterações em elementos individuais da interface, não para mudanças completas nos layouts. Alterações no nível do layout precisam ser tratadas com visualizações personalizadas.

Personalizando a fonte

Você pode definir uma fonte personalizada localizando o typeface no diretório res/font. Para usá-la, substitua o estilo do texto da mensagem, dos cabeçalhos e do texto dos botões e use o atributo fontFamily para instruir a Braze a usar sua família de fontes personalizada.

Por exemplo, para atualizar a fonte no texto do botão da sua mensagem no app, substitua o estilo Braze.InAppMessage.Button e faça referência à sua família de fontes personalizada. O valor do atributo deve apontar para uma família de fontes no seu diretório res/font.

Aqui está um exemplo resumido com uma família de fontes personalizada, my_custom_font_family, referenciada na última linha:




  <style name="Braze.InAppMessage.Button">
    <item name="android:layout_height">wrap_content</item>
    ...
    <item name="android:paddingBottom">15.0dp</item>
    <item name="android:fontFamily">@font/my_custom_font_family</item>
    <item name="fontFamily">@font/my_custom_font_family</item>
  </style>

Além do estilo Braze.InAppMessage.Button para o texto do botão, o estilo para o texto da mensagem é Braze.InAppMessage.Message e o estilo para os cabeçalhos da mensagem é Braze.InAppMessage.Header. Se você quiser usar sua família de fontes personalizada em todo o texto possível de mensagens no app, pode definir sua família de fontes no estilo Braze.InAppMessage, que é o estilo pai para todas as mensagens no app.

Dispensar mensagens

Deslizar para dispensar mensagens slideup

Por padrão, mensagens no app do tipo slideup podem ser dispensadas com um gesto de deslizar. A direção do deslize depende da posição do slideup:

  • Deslizar para a esquerda ou direita: Dispensa o slideup independentemente da posição.
  • Slideup a partir da parte inferior: Deslizar de cima para baixo dispensa a mensagem. Deslizar de baixo para cima não a dispensa.
  • Slideup a partir da parte superior: Deslizar de baixo para cima dispensa a mensagem. Deslizar de cima para baixo não a dispensa.

Esse comportamento de deslize é integrado ao DefaultInAppMessageViewWrapper padrão e se aplica apenas a mensagens no app do tipo slideup. Mensagens no app modais e em tela cheia não suportam o gesto de deslizar para dispensar. Para personalizar esse comportamento, você pode implementar uma fábrica de wrapper de visualização personalizada.

Desativar o disparo pelo botão Voltar

Por padrão, o botão Voltar do hardware dispensa as mensagens no app da Braze. Esse comportamento pode ser desativado por mensagem via BrazeInAppMessageManager.setBackButtonDismissesInAppMessageView().

No exemplo a seguir, disable_back_button é um par chave-valor personalizado definido na mensagem no app que indica se a mensagem deve permitir que o botão Voltar a dispense:




BrazeInAppMessageManager.getInstance().setCustomInAppMessageManagerListener(new DefaultInAppMessageManagerListener() {
  @Override
  public void beforeInAppMessageViewOpened(View inAppMessageView, IInAppMessage inAppMessage) {
    super.beforeInAppMessageViewOpened(inAppMessageView, inAppMessage);
    final Map<String, String> extras = inAppMessage.getExtras();
    if (extras != null && extras.containsKey("disable_back_button")) {
      BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(false);
    }
  }

  @Override
  public void afterInAppMessageViewClosed(IInAppMessage inAppMessage) {
    super.afterInAppMessageViewClosed(inAppMessage);
    BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(true);
  }
});






BrazeInAppMessageManager.getInstance().setCustomInAppMessageManagerListener(object : DefaultInAppMessageManagerListener() {
  override fun beforeInAppMessageViewOpened(inAppMessageView: View, inAppMessage: IInAppMessage) {
    super.beforeInAppMessageViewOpened(inAppMessageView, inAppMessage)
    val extras = inAppMessage.extras
    if (extras != null && extras.containsKey("disable_back_button")) {
      BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(false)
    }
  }

  override fun afterInAppMessageViewClosed(inAppMessage: IInAppMessage) {
    super.afterInAppMessageViewClosed(inAppMessage)
    BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(true)
  }
})

Ativar o disparo por toque fora da mensagem

Por padrão, dispensar a modal ao tocar fora está definido como false. Definir esse valor como true fará com que a mensagem no app modal seja dispensada quando o usuário tocar fora da mensagem no app. Esse comportamento pode ser ativado chamando:




BrazeInAppMessageManager.getInstance().setClickOutsideModalViewDismissInAppMessageView(true)

Personalizando a orientação

Para definir uma orientação fixa para uma mensagem no app, primeiro configure um listener de gerenciador de mensagens no app personalizado. Em seguida, atualize a orientação no objeto IInAppMessage no método delegado beforeInAppMessageDisplayed():




public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
  // Set the orientation to portrait
  inAppMessage.setOrientation(Orientation.PORTRAIT);
  return InAppMessageOperation.DISPLAY_NOW;
}






override fun beforeInAppMessageDisplayed(inAppMessage: IInAppMessage): InAppMessageOperation {
  // Set the orientation to portrait
  inAppMessage.orientation = Orientation.PORTRAIT
  return InAppMessageOperation.DISPLAY_NOW
}

Para dispositivos tablet, as mensagens no app aparecerão no estilo de orientação preferido do usuário, independentemente da orientação real da tela.

Desabilitando o tema escuro

Por padrão, o beforeInAppMessageDisplayed() de IInAppMessageManagerListener verifica as configurações do sistema e habilita condicionalmente o estilo do tema escuro na mensagem com o seguinte código:




@Override
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
  if (inAppMessage instanceof IInAppMessageThemeable && ViewUtils.isDeviceInNightMode(BrazeInAppMessageManager.getInstance().getApplicationContext())) {
    ((IInAppMessageThemeable) inAppMessage).enableDarkTheme();
  }
  return InAppMessageOperation.DISPLAY_NOW;
}






override fun beforeInAppMessageDisplayed(inAppMessage: IInAppMessage): InAppMessageOperation {
  if (inAppMessage is IInAppMessageThemeable && ViewUtils.isDeviceInNightMode(BrazeInAppMessageManager.getInstance().applicationContext!!)) {
    (inAppMessage as IInAppMessageThemeable).enableDarkTheme()
  }
  return InAppMessageOperation.DISPLAY_NOW
}

Para mudar isso, você pode chamar enableDarkTheme em qualquer etapa do processo pré-exibição para implementar sua própria lógica condicional.

Personalizando o prompt de avaliação do Google Play

Devido às limitações e restrições definidas pelo Google, prompts personalizados de avaliação do Google Play não são atualmente compatíveis com a Braze. Embora alguns usuários tenham conseguido integrar esses prompts com sucesso, outros apresentaram baixas taxas de sucesso devido às cotas do Google Play. Integre por sua conta e risco. Consulte a documentação sobre prompts de avaliação no app do Google Play.

Pré-requisitos

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

Configurando o delegate de UI (obrigatório)

Para personalizar a apresentação de mensagens no app e reagir a diversos eventos do ciclo de vida, você precisará configurar o BrazeInAppMessageUIDelegate. Este é um protocolo de delegate usado para receber e processar cargas úteis de mensagens no app disparadas, receber eventos do ciclo de vida de exibição e controlar o tempo de exibição. Para usar o BrazeInAppMessageUIDelegate, você deve:

  • Usar a implementação padrão do BrazeInAppMessageUI como seu inAppMessagePresenter.
  • Incluir a biblioteca BrazeUI no seu projeto.

Etapa 1: Implementar o protocolo BrazeInAppMessageUIDelegate

Primeiro, implemente o protocolo BrazeInAppMessageUIDelegate e quaisquer métodos correspondentes que desejar. No exemplo a seguir, este protocolo é implementado na classe AppDelegate da aplicação.




extension AppDelegate: BrazeInAppMessageUIDelegate {
  // Implement your protocol methods here.
}






@interface AppDelegate () <BrazeInAppMessageUIDelegate>

@end

@implementation AppDelegate
  // Implement your protocol methods here.
@end

Etapa 2: Atribuir o objeto delegate

Atribua o objeto delegate na instância do BrazeInAppMessageUI antes de atribuir esta UI de mensagem no app como seu inAppMessagePresenter.




let inAppMessageUI = BrazeInAppMessageUI()
inAppMessageUI.delegate = self
AppDelegate.braze?.inAppMessagePresenter = inAppMessageUI






BrazeInAppMessageUI *inAppMessageUI = [[BrazeInAppMessageUI alloc] init];
inAppMessageUI.delegate = self;
AppDelegate.braze.inAppMessagePresenter = inAppMessageUI;

Comportamento ao clicar

Cada objeto Braze.InAppMessage contém uma ClickAction correspondente, que define o comportamento ao clicar.

Tipos de ação de clique

A propriedade clickAction no seu Braze.InAppMessage tem como padrão .none, mas pode ser definida como um dos seguintes valores:

ClickAction Comportamento ao clicar
.url(URL, useWebView: Bool) Abre a URL fornecida em um navegador externo. Se useWebView estiver definido como true, será aberta em uma web view.
.none A mensagem será descartada quando clicada.

Personalização do comportamento ao clicar

Para personalizar esse comportamento, você pode modificar a propriedade clickAction consultando o exemplo a seguir:




func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  prepareWith context: inout BrazeInAppMessageUI.PresentationContext
) {
  if let newUrl = URL(string: "{your-url}") {
    context.message.clickAction = .url(newUrl, useWebView: true)
  }
}

O método inAppMessage(_:prepareWith:) não está disponível em Objective-C.

Tratamento do comportamento personalizado

O seguinte método delegado BrazeInAppMessageUIDelegate é chamado quando um usuário clica em uma mensagem no app. Esse retorno de chamada é disparado para cliques iniciados pelo usuário em botões de mensagens no app e botões de mensagens no app em HTML (links), e um ID de botão é fornecido como parâmetro opcional para essas interações. Esse retorno de chamada não é invocado para cliques programáticos disparados por brazeBridge.logClick().




func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  shouldProcess clickAction: Braze.InAppMessage.ClickAction,
  buttonId: String?,
  message: Braze.InAppMessage,
  view: InAppMessageView
) -> Bool






- (BOOL)inAppMessage:(BrazeInAppMessageUI *)ui
       shouldProcess:(enum BRZInAppMessageRawClickAction)clickAction
                 url:(NSURL *)uri
            buttonId:(NSString *)buttonId
             message:(BRZInAppMessageRaw *)message
                view:(UIView *)view;

Esse método retorna um valor booleano para indicar se a Braze deve continuar executando a ação de clique.




func inAppMessage(
  _ ui: BrazeInAppMessageUI, shouldProcess clickAction: Braze.InAppMessage.ClickAction,
  buttonId: String?, message: Braze.InAppMessage, view: InAppMessageView
) -> Bool {
    guard let buttonId,
      let idInt = Int(buttonId)
    else { return true }
    var button: BrazeKit.Braze.InAppMessage.Button? = nil

    switch message {
    case .modal(let modal):
      button = modal.buttons[idInt]

    case .modalImage(let modalImage):
      button = modalImage.buttons[idInt]

    case .full(let full):
      button = full.buttons[idInt]

    case .fullImage(let fullImage):
      button = fullImage.buttons[idInt]

    default:
      break
    }

    print(button?.id)
    print(button?.text)
    print(button?.clickAction)

    return true
  }






- (BOOL)inAppMessage:(BrazeInAppMessageUI *)ui
       shouldProcess:(enum BRZInAppMessageRawClickAction)clickAction
                 url:(NSURL *)uri
            buttonId:(NSString *)buttonId
             message:(BRZInAppMessageRaw *)message
                view:(UIView *)view {
  NSInteger buttonInt = [buttonId integerValue];

  if (message.type == BRZInAppMessageRawTypeFull || message.type == BRZInAppMessageRawTypeModal) {
    BRZInAppMessageRawButton *button = message.buttons[buttonInt];
    NSLog(@"%ld", (long)button.identifier);
    NSLog(@"%@", button.text);
    NSLog(@"%ld", (long)button.clickAction);
  }
  return YES;
}

Deslizar para dispensar mensagens slideup

Por padrão, mensagens no app do tipo slideup podem ser dispensadas com um gesto de deslizar. A direção do deslize depende da posição do slideup:

  • Deslizar para esquerda ou direita: Dispensa o slideup independentemente da sua posição.
  • Slideup a partir da parte inferior: Deslizar de cima para baixo dispensa a mensagem. Deslizar de baixo para cima não dispensa.
  • Slideup a partir da parte superior: Deslizar de baixo para cima dispensa a mensagem. Deslizar de cima para baixo não dispensa.

Esse comportamento de deslize é integrado à SlideupView padrão do BrazeInAppMessageUI e se aplica apenas a mensagens no app do tipo slideup. Mensagens no app modais e de tela cheia não suportam dispensa por deslize. Para personalizar ainda mais a visualização de slideup, incluindo o comportamento de deslize, você pode modificar o SlideupView.Attributes ou fornecer uma visualização personalizada por meio de subclasse.

Personalizando dispensas de modal

Para ativar dispensas ao tocar fora, você pode modificar a propriedade dismissOnBackgroundTap na struct Attributes do tipo de mensagem no app que deseja personalizar.

Por exemplo, se você deseja ativar esse recurso para mensagens no app de imagem modal, pode configurar o seguinte:




BrazeInAppMessageUI.ModalImageView.Attributes.defaults.dismissOnBackgroundTap = true

A personalização por meio de Attributes não está disponível em Objective-C.

O valor padrão é false. Isso determina se a mensagem no app modal será dispensada quando o usuário tocar fora da mensagem no app.

DismissModalOnOutsideTap Descrição
true Mensagens no app modais serão dispensadas ao tocar fora.
false Padrão, mensagens no app modais não serão dispensadas ao tocar fora.

Para mais detalhes sobre personalização de mensagens no app, consulte este artigo.

Personalização da orientação da mensagem

Você pode personalizar a orientação das suas mensagens no app. É possível definir uma nova orientação padrão para todas as mensagens ou definir uma orientação personalizada para uma única mensagem.

Para escolher uma orientação padrão para todas as mensagens no app, use o método inAppMessage(_:prepareWith:) para definir a propriedade preferredOrientation no PresentationContext.

Por exemplo, para definir retrato como a orientação padrão:




func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  prepareWith context: inout BrazeInAppMessageUI.PresentationContext
) {
  context.preferredOrientation = .portrait
}






- (void)inAppMessage:(BrazeInAppMessageUI *)ui
         prepareWith:(BrazeInAppMessageUIPresentationContextRaw *)context {
  context.preferredOrientation = BRZInAppMessageRawOrientationPortrait;
}

Para definir a orientação de uma única mensagem, modifique a propriedade orientation de Braze.InAppMessage:




// Set inAppMessage orientation to support any configuration
inAppMessage.orientation = .any

// Set inAppMessage orientation to only display in portrait
inAppMessage.orientation = .portrait

// Set inAppMessage orientation to only display in landscape
inAppMessage.orientation = .landscape






// Set inAppMessage orientation to support any configuration
inAppMessage.orientation = BRZInAppMessageRawOrientationAny;

// Set inAppMessage orientation to only display in portrait
inAppMessage.orientation = BRZInAppMessageRawOrientationPortrait;

// Set inAppMessage orientation to only display in landscape
inAppMessage.orientation = BRZInAppMessageRawOrientationLandscape;

Depois que a mensagem no app é exibida, qualquer mudança na orientação do dispositivo enquanto a mensagem ainda estiver sendo exibida fará com que a mensagem rotacione junto com o dispositivo (desde que seja compatível com a configuração de orientation da mensagem).

A orientação do dispositivo também precisa ser compatível com a propriedade orientation da mensagem no app para que a mensagem seja exibida. Além disso, a configuração preferredOrientation só será respeitada se estiver incluída nas orientações de interface compatíveis do seu aplicativo, na seção Deployment Info das configurações do seu target no Xcode.

Orientações compatíveis no Xcode.

Personalização do tempo de exibição

Você pode controlar se uma mensagem no app disponível será exibida durante determinados pontos da experiência do usuário. Se houver situações em que você não deseja que a mensagem no app apareça, como durante um jogo em tela cheia ou em uma tela de carregamento, é possível atrasar ou descartar mensagens no app pendentes. Para controlar o tempo de exibição da mensagem no app, use o método delegado inAppMessage(_:displayChoiceForMessage:) para definir a propriedade BrazeInAppMessageUI.DisplayChoice.




func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  displayChoiceForMessage message: Braze.InAppMessage
) -> BrazeInAppMessageUI.DisplayChoice






- (enum BRZInAppMessageUIDisplayChoice)inAppMessage:(BrazeInAppMessageUI *)ui displayChoiceForMessage:(BRZInAppMessageRaw *)message

Configure BrazeInAppMessageUI.DisplayChoice para retornar um dos seguintes valores:

Opção de exibição Comportamento
.now A mensagem será exibida imediatamente. Este é o valor padrão.
.reenqueue A mensagem não será exibida e será colocada de volta no topo da pilha.
.later A mensagem não será exibida e será colocada de volta no topo da pilha. (Descontinuado, use .reenqueue)
.discard A mensagem será descartada e não será exibida.

Ocultar a barra de status

Para mensagens no app Full, FullImage e HTML, o SDK oculta a barra de status por padrão. Para outros tipos de mensagens no app, a barra de status permanece inalterada. Para configurar esse comportamento, use o método delegado inAppMessage(_:prepareWith:) para definir a propriedade statusBarHideBehavior no PresentationContext. Esse campo aceita um dos seguintes valores:

Comportamento de ocultação da barra de status Descrição
.auto A visualização da mensagem decide o estado de ocultação da barra de status.
.hidden Sempre ocultar a barra de status.
.visible Sempre exibir a barra de status.

Desativando o modo escuro

Para evitar que as mensagens no app adotem o estilo do modo escuro quando o dispositivo do usuário tem o modo escuro ativado, implemente o método delegado inAppMessage(_:prepareWith:). O PresentationContext passado para o método contém uma referência ao objeto InAppMessage a ser apresentado. Cada InAppMessage tem uma propriedade themes que contém um tema de modo dark e light. Se você definir a propriedade themes.dark como nil, a Braze apresentará automaticamente a mensagem no app usando o tema claro.

Os tipos de mensagens no app com botões têm um objeto themes adicional em sua propriedade buttons. Para evitar que os botões adotem o estilo do modo escuro, você pode usar map(_:) para criar um novo array de botões com um tema light e sem tema dark.




func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  prepareWith context: inout BrazeInAppMessageUI.PresentationContext
) {
  switch context.message {
    case .slideup:
      guard var slideup = context.message.slideup else { return }
      slideup.themes.dark = nil
      context.message.slideup = slideup

    case .modal:
      guard var modal = context.message.modal else { return }
      modal.themes.dark = nil
      modal.buttons = modal.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.modal = modal

    case .modalImage:
      guard var modalImage = context.message.modalImage else { return }
      modalImage.themes.dark = nil
      modalImage.buttons = modalImage.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.modalImage = modalImage

    case .full:
      guard var full = context.message.full else { return }
      full.themes.dark = nil
      full.buttons = full.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.full = full

    case .fullImage:
      guard var fullImage = context.message.fullImage else { return }
      fullImage.themes.dark = nil
      fullImage.buttons = fullImage.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.fullImage = fullImage

    default:
      break
  }
}






- (void)inAppMessage:(BrazeInAppMessageUI *)ui
         prepareWith:(BrazeInAppMessageUIPresentationContextRaw *)context {
  switch (context.message.type) {
    case BRZInAppMessageRawTypeSlideup: {
      NSMutableDictionary *updatedThemes = [context.message.themes mutableCopy];
      [updatedThemes removeObjectForKey:@"dark"];
      context.message.themes = updatedThemes;
      break;
    }
    case BRZInAppMessageRawTypeModal:
    case BRZInAppMessageRawTypeFull:
    {
      NSMutableDictionary *updatedThemes = [context.message.themes mutableCopy];
      [updatedThemes removeObjectForKey:@"dark"];
      context.message.themes = updatedThemes;

      NSMutableArray *updatedButtons = [NSMutableArray arrayWithCapacity:context.message.buttons.count];
      for (BRZInAppMessageRawButton *button in context.message.buttons) {
        BRZInAppMessageRawButtonTheme *lightTheme = BRZInAppMessageRawButtonTheme.defaultLight;
        BRZInAppMessageRawButton *newButton = [button mutableCopy];
        newButton.textColor = lightTheme.textColor;
        newButton.backgroundColor = lightTheme.backgroundColor;
        newButton.borderColor = lightTheme.borderColor;
        [updatedButtons addObject:newButton];
      }
      context.message.buttons = updatedButtons;
      break;
    }
    default:
      break;
  }
}

Personalizando o prompt de avaliação na App Store

Você pode usar mensagens no app em uma Campaign para pedir aos usuários uma avaliação na App Store.

Etapa 1: Definir o delegate de mensagem no app

Primeiro, defina o BrazeInAppMessageUIDelegate no seu app.

Etapa 2: Desativar a mensagem padrão de avaliação da App Store

Em seguida, implemente o método delegate inAppMessage(_:displayChoiceForMessage:) para desativar a mensagem padrão de avaliação da App Store.




func inAppMessage(_ ui: BrazeInAppMessageUI, displayChoiceForMessage message: Braze.InAppMessage) -> BrazeInAppMessageUI.DisplayChoice {
  if message.extras["AppStore Review"] != nil,
    let messageUrl = message.clickAction.url {
      UIApplication.shared.open(messageUrl, options: [:], completionHandler: nil)
      return .discard
  } else {
    return .now
  }
}






- (enum BRZInAppMessageUIDisplayChoice)inAppMessage:(BrazeInAppMessageUI *)ui
                            displayChoiceForMessage:(BRZInAppMessageRaw *)message {
  if (message.extras != nil && message.extras[@"AppStore Review"] != nil) {
    [[UIApplication sharedApplication] openURL:message.url options:@{} completionHandler:nil];
    return BRZInAppMessageUIDisplayChoiceDiscard;
  } else {
    return BRZInAppMessageUIDisplayChoiceNow;
  }
}

No seu handler scene:openURLContexts:, adicione o código a seguir para processar o deep link {YOUR-APP-SCHEME}:app-store-review. Observe que será necessário importar StoreKit para usar SKStoreReviewController:




func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
  guard let url = URLContexts.first?.url else { return }
  let urlString = url.absoluteString.removingPercentEncoding
  if (urlString == "{YOUR-APP-SCHEME}:app-store-review") {
    SKStoreReviewController.requestReview()
    return;
  }
  // Other deep link handling code…
}






- (void)scene:(UIScene *)scene openURLContexts:(NSSet<UIOpenURLContext *> *)URLContexts {
  NSURL *url = URLContexts.allObjects.firstObject.URL;
  NSString *urlString = url.absoluteString.stringByRemovingPercentEncoding;
  if ([urlString isEqualToString:@"{YOUR-APP-SCHEME}:app-store-review"]) {
    [SKStoreReviewController requestReview];
    return;
  }
  // Other deep link handling code…
}

Etapa 4: Definir o comportamento personalizado ao clicar

Em seguida, crie uma Campaign de mensagens no app com o seguinte:

  • O par chave-valor "AppStore Review" : "true"
  • O comportamento ao clicar definido como “Deep Link Into App”, usando o deep link {YOUR-APP-SCHEME}:app-store-review.

Pré-requisitos

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

Métodos para registro

Você pode usar esses métodos passando sua instância de BrazeInAppMessage para registrar análise de dados e executar ações:

Método Descrição
logInAppMessageClicked(inAppMessage) Registra um clique para os dados da mensagem no app fornecida.
logInAppMessageImpression(inAppMessage) Registra uma impressão para os dados da mensagem no app fornecida.
logInAppMessageButtonClicked(inAppMessage, buttonId) Registra um clique de botão para os dados da mensagem no app e o ID do botão fornecidos.
hideCurrentInAppMessage() Descarta a mensagem no app exibida no momento.
performInAppMessageAction(inAppMessage) Executa a ação de uma mensagem no app.
performInAppMessageButtonAction(inAppMessage, buttonId) Executa a ação de um botão de mensagem no app.

Manipulando dados de mensagens

Na maioria dos casos, você pode usar o método Braze.addListener para registrar ouvintes de eventos que manipulam dados vindos de mensagens no app.

Além disso, você pode acessar os dados da mensagem no app na camada JavaScript chamando o método Braze.subscribeToInAppMessage para que os SDKs publiquem um evento inAppMessageReceived quando uma mensagem no app for disparada. Passe um retorno de chamada para esse método para executar seu próprio código quando a mensagem no app for disparada e recebida pelo ouvinte.

Para personalizar como os dados de mensagens são manipulados, consulte os seguintes exemplos de implementação:

Para aprimorar o comportamento padrão, ou se você não tiver acesso para personalizar o código nativo do iOS ou Android, recomendamos desativar a interface padrão enquanto ainda recebe eventos de mensagens no app da Braze. Para desativar a interface padrão, passe false para o método Braze.subscribeToInAppMessage e use os dados da mensagem no app para construir sua própria mensagem em JavaScript. Observe que será necessário registrar manualmente a análise de dados das suas mensagens se optar por desativar a interface padrão.




import Braze from "@braze/react-native-sdk";

// Option 1: Listen for the event directly via `Braze.addListener`.
//
// You may use this method to accomplish the same thing if you don't
// wish to make any changes to the default Braze UI.
Braze.addListener(Braze.Events.IN_APP_MESSAGE_RECEIVED, (event) => {
  console.log(event.inAppMessage);
});

// Option 2: Call `subscribeToInAppMessage`.
//
// Pass in `false` to disable the automatic display of in-app messages.
Braze.subscribeToInAppMessage(false, (event) => {
  console.log(event.inAppMessage);
  // Use `event.inAppMessage` to construct your own custom message UI.
});

Para incluir lógica mais avançada para determinar se uma mensagem no app deve ou não ser exibida usando a interface integrada, implemente as mensagens no app pela camada nativa.

Implemente o IInAppMessageManagerListener conforme descrito em nosso artigo sobre Android em Custom Manager Listener. Na sua implementação de beforeInAppMessageDisplayed, você pode acessar os dados de inAppMessage, enviá-los para a camada JavaScript e decidir se deseja exibir ou não a mensagem nativa com base no valor de retorno.

Para mais informações sobre esses valores, consulte nossa documentação do Android.




// In-app messaging
@Override
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
    WritableMap parameters = new WritableNativeMap();
    parameters.putString("inAppMessage", inAppMessage.forJsonPut().toString());
    getReactNativeHost()
        .getReactInstanceManager()
        .getCurrentReactContext()
        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
        .emit("inAppMessageReceived", parameters);
    // Note: return InAppMessageOperation.DISCARD if you would like
    // to prevent the Braze SDK from displaying the message natively.
    return InAppMessageOperation.DISPLAY_NOW;
}

Substituindo o delegate de interface padrão

Por padrão, BrazeInAppMessageUI é criado e atribuído quando você inicializa a instância braze. BrazeInAppMessageUI é uma implementação do protocolo BrazeInAppMessagePresenter e vem com uma propriedade delegate que pode ser usada para personalizar a manipulação de mensagens no app que foram recebidas.

  1. Implemente o delegate BrazeInAppMessageUIDelegate conforme descrito em nosso tutorial de interface de mensagens no app para iOS.

  2. No método de delegate inAppMessage(_:displayChoiceForMessage:), você pode acessar os dados de inAppMessage, enviá-los para a camada JavaScript e decidir se deseja exibir ou não a mensagem nativa com base no valor de retorno.

Para mais detalhes sobre esses valores, consulte nossa documentação do iOS.




- (enum BRZInAppMessageUIDisplayChoice)inAppMessage:(BrazeInAppMessageUI *)ui
                            displayChoiceForMessage:(BRZInAppMessageRaw *)message {
  // Convert the message to a JavaScript representation.
  NSData *inAppMessageData = [message json];
  NSString *inAppMessageString = [[NSString alloc] initWithData:inAppMessageData encoding:NSUTF8StringEncoding];
  NSDictionary *arguments = @{
    @"inAppMessage" : inAppMessageString
  };

  // Send to JavaScript.
  [self sendEventWithName:@"inAppMessageReceived" body:arguments];

  // Note: Return `BRZInAppMessageUIDisplayChoiceDiscard` if you would like
  // to prevent the Braze SDK from displaying the message natively.
  return BRZInAppMessageUIDisplayChoiceNow;
}

Para usar esse delegate, atribua-o a brazeInAppMessagePresenter.delegate após inicializar a instância braze.




@import BrazeUI;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:apiKey endpoint:endpoint];
  Braze *braze = [BrazeReactBridge initBraze:configuration];
  ((BrazeInAppMessageUI *)braze.inAppMessagePresenter).delegate = [[CustomDelegate alloc] init];
  AppDelegate.braze = braze;
}

Substituindo a interface nativa padrão

Se deseja personalizar completamente a apresentação das suas mensagens no app na camada nativa do iOS, implemente o protocolo BrazeInAppMessagePresenter e atribua seu apresentador personalizado seguindo este exemplo:




BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:apiKey endpoint:endpoint];
Braze *braze = [BrazeReactBridge initBraze:configuration];
braze.inAppMessagePresenter = [[MyCustomPresenter alloc] init];
AppDelegate.braze = braze;

Personalizando o comportamento de exibição

Você pode alterar o comportamento de exibição de mensagens no app em tempo de execução por meio do seguinte:




// Sets in-app messages to display immediately when triggered.
Appboy.AppboyBinding.SetInAppMessageDisplayAction(BrazeUnityInAppMessageDisplayActionType.IAM_DISPLAY_NOW);

// Sets in-app messages to display at a later time and be saved in a stack.
Appboy.AppboyBinding.SetInAppMessageDisplayAction(BrazeUnityInAppMessageDisplayActionType.IAM_DISPLAY_LATER);

// Sets in-app messages to be discarded after being triggered.
Appboy.AppboyBinding.SetInAppMessageDisplayAction(BrazeUnityInAppMessageDisplayActionType.IAM_DISCARD);

Definindo um listener personalizado

Se você precisar de mais controle sobre como um usuário interage com mensagens no app, use um BrazeInAppMessageListener e atribua-o a Appboy.AppboyBinding.inAppMessageListener. Para quaisquer delegates que você não queira usar, basta deixá-los como null.




BrazeInAppMessageListener listener = new BrazeInAppMessageListener() {
  BeforeInAppMessageDisplayed = BeforeInAppMessageDisplayed,
  OnInAppMessageButtonClicked = OnInAppMessageButtonClicked,
  OnInAppMessageClicked       = OnInAppMessageClicked,
  OnInAppMessageHTMLClicked   = OnInAppMessageHTMLClicked,
  OnInAppMessageDismissed     = OnInAppMessageDismissed,
};
Appboy.AppboyBinding.inAppMessageListener = listener;

public void BeforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
  // Executed before an in-app message is displayed.
}

public void OnInAppMessageButtonClicked(IInAppMessage inAppMessage, InAppMessageButton inAppMessageButton) {
  // Executed whenever an in-app message button is clicked.
}

public void OnInAppMessageClicked(IInAppMessage inAppMessage) {
  // Executed whenever an in-app message is clicked.
}

public void OnInAppMessageHTMLClicked(IInAppMessage inAppMessage, Uri uri) {
  // Executed whenever an HTML in-app message is clicked.
}

public void OnInAppMessageDismissed(IInAppMessage inAppMessage) {
  // Executed whenever an in-app message is dismissed without a click.
}

Documentação da plataforma de engajamento do cliente Braze.

Recursos
Jurídico
Empresa
© 2026 Braze, Inc. Todos os direitos reservados.
Verificando o status do Braze
New Stuff!