Skip to content

Personalize as mensagens no app

Saiba como personalizar as mensagens no app para o SDK do Braze. Para obter técnicas avançadas de estilo, confira nosso tutorial para personalizar o estilo de mensagens usando pares de valores-chave.

Pré-requisitos

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

Estilos personalizados

Os elementos da interface do usuário do 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 do Braze. Os estilos padrão do Braze são definidos em CSS no SDK do 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.

Na instância do app a seguir, há um exemplo de substituição que fará com que os cabeçalhos de uma mensagem no app apareçam em itálico:

1
2
3

  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.

1
2
3
4

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

Personalização do envio 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.

1
2
3
4
5

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

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.

1

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

Pré-requisitos

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

Configuração de ouvintes de gerenciadores personalizados

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

O SDK da Braze tem uma classe padrão DefaultHtmlInAppMessageActionListener que é usada se nenhum ouvinte personalizado for definido e realiza a ação apropriada automaticamente. Se precisar de mais controle sobre como um usuário interage com diferentes botões dentro de uma mensagem no app em HTML personalizado, implemente uma classe IHtmlInAppMessageActionListener personalizada.

Etapa 1: Implementar o ouvinte do gerenciador personalizado

Etapa 1.1: Implementar IInAppMessageManagerListener

Crie uma classe que implemente o IInAppMessageManagerListener.

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

IInAppMessageManagerListener também inclui métodos delegados 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 posterior.

Etapa 1.2: Conecte-se aos métodos de ciclo de vida de exibição do IAM (opcional)

A interface IInAppMessageManagerListener tem métodos de visualização de mensagens no app chamados em pontos distintos do ciclo de vida da visualização de mensagens no app. Esses métodos são chamados na seguinte ordem:

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

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

Crie uma classe que implemente o IHtmlInAppMessageActionListener.

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

  • Clica no botão Fechar
  • Dispara um evento personalizado
  • Cliques em um URL dentro de uma mensagem HTML no app
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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;
  }
}

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

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 o Braze a usar o ouvinte do gerenciador personalizado

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

Alteração de mensagens no app antes da exibição

Quando uma nova mensagem no app for recebida e já houver 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 delegado em IInAppMessageManagerListener será chamado:

1
2
3
4

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

1
2
3

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 seria a postergação de mensagens em determinadas partes do aplicativo, retornando DISPLAY_LATER quando as mensagens no app distraíssem a experiência do usuário no aplicativo.

Veja InAppMessageOperation para obter mais detalhes.

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

Depois que seu IHtmlInAppMessageActionListener for criado, chame BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener() para instruir BrazeInAppMessageManager a usar seu IHtmlInAppMessageActionListener personalizado em vez do action listener padrão.

Recomendamos que você configure seu IHtmlInAppMessageActionListener em seu Application.onCreate() antes de qualquer outra chamada para o Braze. Isso definirá o ouvinte de ação personalizado antes que qualquer mensagem no app seja exibida:

1

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

1

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

Configuração de fábricas personalizadas

Você pode substituir vários padrões por meio de objetos de fábrica personalizados. Esses podem ser registrados com o SDK da Braze conforme necessário para alcançar os resultados desejados. No entanto, se você decidir substituir uma fábrica, provavelmente precisará adiar explicitamente o padrão ou reimplementar a funcionalidade fornecida pelo padrão do Braze. O trecho de código a seguir ilustra como fornecer implementações personalizadas das interfaces IInAppMessageViewFactory e IInAppMessageViewWrapperFactory.

Tipos de mensagens no app

1
2
3
4
5
6
7
8

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

Tipos de mensagens no app

1
2
3
4
5
6
7
8
9

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 mensagens no app do 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 de suas mensagens no app em vez de usar um tipo padrão, o Braze torna isso possível definindo uma fábrica de visualizações personalizadas.

O site BrazeInAppMessageManager lida automaticamente com a colocação do modelo de mensagem no app na hierarquia de exibição de atividade existente por padrão usando DefaultInAppMessageViewWrapper. Se precisar personalizar a forma como as mensagens no app são colocadas na hierarquia da visualização, você deverá usar um arquivo IInAppMessageViewWrapperFactory.

As mensagens no app têm um comportamento de animação predefinido. As mensagens Slideup deslizam para a tela; as mensagens full e modal aparecem e desaparecem. Se você quiser definir comportamentos de animação personalizados para suas mensagens no app, o Braze torna isso possível configurando uma fábrica de animação personalizada.

Etapa 1: Implementar a fábrica

Crie uma classe que implemente IInAppMessageViewFactory:

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

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);
    }
  }
}

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

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 retorna um arquivo IInAppMessageViewWrapper.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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();
  }
}

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

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:

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

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;
  }
}

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

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 o Braze a usar a fábrica

Depois que seu IInAppMessageViewFactory for criado, ligue para BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory() para instruir BrazeInAppMessageManager para usar seu IInAppMessageViewFactory personalizado em vez da visualização padrão de fábrica.

Como funciona?

A visualização de mensagens no app slideup implementa IInAppMessageView. As exibições de mensagens dos tipos full e modal implementam IInAppMessageImmersiveView. A implementação de uma dessas classes permite que o Braze adicione ouvintes de cliques à sua exibição personalizada, quando apropriado. Todas as classes de visualização do Braze estendem a classe View do Android.

A implementação do site IInAppMessageView permite que você defina uma determinada parte da visualização personalizada como clicável. A implementação de IInAppMessageImmersiveView permite que você defina visualizações de botões de mensagem e uma visualização de botão fechar.

Depois que seu IInAppMessageViewWrapper for criado, chame BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory() para instruir o site BrazeInAppMessageManager a usar seu IInAppMessageViewWrapperFactory personalizado em vez da fábrica de wrapper de exibição padrão.

Recomendamos que você defina seu IInAppMessageViewWrapperFactory em seu Application.onCreate() antes de qualquer outra chamada para o Braze. Isso definirá a fábrica do wrapper de exibição personalizado antes que qualquer mensagem no app seja exibida:

1

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

1

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

Depois que seu IInAppMessageAnimationFactory for criado, ligue para BrazeInAppMessageManager.getInstance().setCustomInAppMessageAnimationFactory() para instruir BrazeInAppMessageManager para usar seu site personalizado IInAppMessageAnimationFactory em vez da animação padrão de fábrica.

Recomendamos que você configure seu IInAppMessageAnimationFactory em seu Application.onCreate() antes de qualquer outra chamada para o Braze. Isso definirá a fábrica de animação personalizada antes que qualquer mensagem no app seja exibida.

Estilos personalizados

Os elementos da {Braze} UI vêm com uma aparência padrão que corresponde às diretrizes padrão de UI do {Android} e proporciona uma experiência perfeita. Este artigo de referência aborda o estilo personalizado de envio de mensagens no app para seu aplicativo Android ou FireOS.

Definição de um estilo padrão

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

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

  <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 integralmente para o arquivo styles.xml em seu projeto e faça as modificações. Todo o estilo deve ser copiado para seu arquivo local styles.xml para que todas as atribuições sejam definidas corretamente. Observe que esses estilos personalizados são para alterações em elementos individuais da interface do usuário, não para alterações em massa nos layouts. As alterações no nível do layout precisam ser tratadas com exibições personalizadas.

Personalização da fonte

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

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

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

1
2
3
4
5
6
7

  <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 quiser usar sua família de fontes personalizada em todos os textos possíveis de mensagens no app, você poderá definir sua família de fontes no estilo Braze.InAppMessage, que é o estilo pai de todas as mensagens no app.

Envio de mensagens

Desativação da desativação do botão Voltar

Por padrão, o botão Voltar do dispositivo descarta 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 de voltar dispense a mensagem:

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

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);
  }
});

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

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

Capacitação para demissões por contato externo

Por padrão, a desativação do modal usando um toque externo é definida como false. Definir esse valor como true resultará no fechamento da mensagem no app modal quando o usuário tocar fora da mensagem no app. Esse comportamento pode ser ativado chamando:

1

BrazeInAppMessageManager.getInstance().setClickOutsideModalViewDismissInAppMessageView(true)

Personalização da orientação

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

1
2
3
4
5

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

1
2
3
4
5

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.

Desativação do tema escuro

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

1
2
3
4
5
6
7

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

1
2
3
4
5
6

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

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

Personalização do prompt de revisão do Google Play

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

Pré-requisitos

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

Configuração do delegado da interface do usuário (obrigatório)

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

  • Use a implementação padrão BrazeInAppMessageUI como sua inAppMessagePresenter.
  • Inclua a biblioteca BrazeUI em seu projeto.

Etapa 1: Implementar o protocolo BrazeInAppMessageUIDelegate

Primeiro, implemente o protocolo BrazeInAppMessageUIDelegate e os métodos correspondentes que você desejar. Em nosso exemplo abaixo, estamos implementando esse protocolo na classe AppDelegate do nosso aplicativo.

1
2
3

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

1
2
3
4
5
6
7

@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 app BrazeInAppMessageUI antes de atribuir essa mensagem no app UI como seu inAppMessagePresenter.

1
2
3

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

1
2
3

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

Comportamento ao clicar

Cada objeto Braze.InAppMessage contém um objeto ClickActioncorrespondente, que define o comportamento ao clicar.

Clique nos tipos de ação

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

Personalização do comportamento ao clicar

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

1
2
3
4
5
6
7
8

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.

Manipulação do comportamento personalizado

O seguinte método BrazeInAppMessageUIDelegate é chamado quando uma mensagem no app é clicada. Para cliques em botões de mensagens no app e botões de mensagens no app em HTML (links), um ID de botão é fornecido como um parâmetro opcional.

1
2
3
4
5
6
7

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

1
2
3
4
5
6

- (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 o Braze deve continuar a executar a ação de clique.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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
  }

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

- (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;
}

Personalização de dispensas modais

Para ativar a dispensa por toques externos, você pode modificar a propriedade dismissOnBackgroundTap na estrutura Attributes do tipo de mensagem no app que deseja personalizar.

Por exemplo, se quiser ativar esse recurso para mensagens no app com imagens modais, você pode configurar o seguinte:

1

BrazeInAppMessageUI.ModalImageView.Attributes.defaults.dismissOnBackgroundTap = true

A personalização via Attributes não está disponível em Objective C.

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

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

Personalização da orientação das mensagens

Você pode personalizar a orientação de suas mensagens no app. Você pode 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 site PresentationContext.

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

1
2
3
4
5
6

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

1
2
3
4

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

1
2
3
4
5
6
7
8

// 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

1
2
3
4
5
6
7
8

// 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 for exibida, qualquer mudança de orientação do dispositivo enquanto a mensagem ainda estiver sendo exibida fará com que a mensagem gire com o dispositivo (desde que seja compatível com a configuração orientation da mensagem).

A orientação do dispositivo também deve 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 com seu aplicativo na seção Informações de implementação das configurações do seu direcionamento no Xcode.

Orientações suportadas no Xcode.

Personalização do tempo de exibição

É possível 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 queira que a mensagem no app seja exibida, como durante um jogo em tela cheia ou em uma tela de carregamento, é possível postergar ou descartar mensagens pendentes de mensagens no app. Para controlar o tempo da mensagem no app, use o método delegado inAppMessage(_:displayChoiceForMessage:) para definir a propriedade BrazeInAppMessageUI.DisplayChoice.

1
2
3
4

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

1

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

Configure o site BrazeInAppMessageUI.DisplayChoice para retornar um dos seguintes valores:

Ocultação da barra de status

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

Desativar o modo escuro

Para evitar que as mensagens no app adotem o estilo do modo escuro quando o dispositivo do usuário tiver o modo escuro ativado, implemente o método inAppMessage(_:prepareWith:) delegate method. 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 seu 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 uma nova matriz de botões com um tema light e nenhum tema dark.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

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
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

- (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;
  }
}

Personalização do prompt de revisão da loja de aplicativos

É possível usar mensagens no app em uma campanha para solicitar aos usuários uma avaliação da App Store.

Etapa 1: Defina o delegado de mensagem no app

Primeiro, defina o BrazeInAppMessageUIDelegate em seu app.

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

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

1
2
3
4
5
6
7
8
9

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
  }
}

1
2
3
4
5
6
7
8
9

- (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 código de tratamento do deep link, adicione o seguinte código para processar o deep link {YOUR-APP-SCHEME}:app-store-review. Note que você precisará importar StoreKit para usar SKStoreReviewController:

1
2
3
4
5
6
7
8

func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
  let urlString = url.absoluteString.removingPercentEncoding
  if (urlString == "{YOUR-APP-SCHEME}:app-store-review") {
    SKStoreReviewController.requestReview()
    return true;
  }
  // Other deep link handling code…
}

1
2
3
4
5
6
7
8

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options {
  NSString *urlString = url.absoluteString.stringByRemovingPercentEncoding;
  if ([urlString isEqualToString:@"{YOUR-APP-SCHEME}:app-store-review"]) {
    [SKStoreReviewController requestReview];
    return YES;
  }
  // Other deep link handling code…
}

Etapa 4: Definir comportamento personalizado ao clicar

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

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

Pré-requisitos

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

Métodos de registro

Você pode usar esses métodos passando sua instânciaBrazeInAppMessage para registro análise de dados e realizar ações:

Envio de mensagens de dados

Na maioria dos casos, você pode usar o método Braze.addListener para registrar ouvintes de eventos para lidar com dados provenientes 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 acionada. Passe um retorno de chamada para este método para executar seu próprio código quando a mensagem no app for acionada e recebida pelo ouvinte.

Para personalizar a forma como os dados das mensagens são tratados, consulte os exemplos de implementação a seguir:

Para aprimorar o comportamento padrão, ou se você não tiver acesso para personalizar o código nativo do iOS ou do Android, recomendamos que você desative a interface do usuário padrão e, ao mesmo tempo, continue recebendo eventos de mensagens no app com código personalizado do Braze. Para desativar a interface do usuário 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. Note que será necessário registrar manualmente a análise de dados em suas mensagens se optar por desativar a IU padrão.

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

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 uma lógica mais avançada para determinar se deve ou não mostrar uma mensagem no app usando a interface do usuário integrada, implemente mensagens no app através da camada nativa.

Implemente o IInAppMessageManagerListener conforme descrito em nosso artigo do Android sobre Custom Manager Listener. Na sua beforeInAppMessageDisplayed implementação, você pode acessar os dados inAppMessage, enviá-los para a camada JavaScript e decidir mostrar 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.

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

// 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 do usuário 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 o tratamento de mensagens no app que foram recebidas.

  1. Implemente o BrazeInAppMessageUIDelegate conforme descrito em nosso artigo sobre iOS aqui.

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

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

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

- (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 este delegate, atribua-o a brazeInAppMessagePresenter.delegate após inicializar a instância braze.

1
2
3
4
5
6
7
8

@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 de usuário nativa padrão

Se você deseja personalizar totalmente a apresentação de suas mensagens no app na camada nativa do iOS, conforme o protocolo BrazeInAppMessagePresenter e atribua seu apresentador personalizado seguindo o exemplo abaixo:

1
2
3
4

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

Personalização do comportamento de exibição

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

1
2
3
4
5
6
7
8

// 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);

Configuração de um ouvinte personalizado

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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.
}
Github   Editar esta página no GitHub
New Stuff!