Skip to content

Personalizando mensagens no aplicativo

Aprenda como personalizar mensagens no aplicativo para o Braze SDK.

Pré-requisitos

Antes de poder usar esse recurso, você precisará integrar o Android Braze SDK. 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 está 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 usar este recurso, você precisará integrar o SDK Swift Braze.

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.

Prerequisites

Before you can use this feature, you’ll need to integrate the Web Braze SDK.

Custom styles

Braze UI elements come with a default look and feel that create a neutral in-app message experience and aim for consistency with other Braze mobile platforms. The default Braze styles are defined in CSS within the Braze SDK.

Setting a default style

By overriding selected styles in your application, you can customize our standard in-app message types with your own background images, font families, styles, sizes, animations, and more.

For instance, the following is an example override that will cause an in-app message’s headers to appear italicized:

1
2
3

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

See the JSDocs for more information.

Customizing the z-index

By default, in-app messages are displayed using z-index: 9001. This is configurable using the inAppMessageZIndex initialization option in the scenario that your website styles elements with higher values than that.

1
2
3
4

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

Customizing message dismissals

By default, when an in-app message is showing, pressing the escape button or a click on the grayed-out background of the page will dismiss the message. Configure the requireExplicitInAppMessageDismissal initialization option to true to prevent this behavior and require an explicit button click to dismiss messages.

1
2
3
4
5

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

To set your in-app message links to open in a new tab, set the openInAppMessagesInNewTab option to true to force all links from in-app message clicks open in a new tab or window.

1

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

Prerequisites

Before you can use this feature, you’ll need to integrate the React Native Braze SDK.

Methods for logging

You can use these methods by passing your BrazeInAppMessage instance to log analytics and perform actions:

Handling message data

In most cases, you can use the Braze.addListener method to register event listeners to handle data coming from in-app messages.

Additionally, you can access the in-app message data in the JavaScript layer by calling the Braze.subscribeToInAppMessage method to have the SDKs publish an inAppMessageReceived event when an in-app message is triggered. Pass a callback to this method to execute your own code when the in-app message is triggered and received by the listener.

To customize how message data is handled, refer to the following implementation examples:

To enhance the default behavior, or if you don’t have access to customize the native iOS or Android code, we recommend that you disable the default UI while still receiving in-app message events from Braze. To disable the default UI, pass false to the Braze.subscribeToInAppMessage method and use the in-app message data to construct your own message in JavaScript. Note that you will need to manually log analytics on your messages if you choose to disable the default UI.

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

To include more advanced logic to determine whether or not to show an in-app message using the built-in UI, implement in-app messages through the native layer.

Implement the IInAppMessageManagerListener as described in our Android article on Custom Manager Listener. In your beforeInAppMessageDisplayed implementation, you can access the inAppMessage data, send it to the JavaScript layer, and decide to show or not show the native message based on the return value.

For more on these values, see our Android documentation.

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

Overriding the default UI delegate

By default, BrazeInAppMessageUI is created and assigned when you initialize the braze instance. BrazeInAppMessageUI is an implementation of the BrazeInAppMessagePresenter protocol and comes with a delegate property that can be used to customize the handling of in-app messages that have been received.

  1. Implement the BrazeInAppMessageUIDelegate delegate as described in our iOS article here.

  2. In the inAppMessage(_:displayChoiceForMessage:) delegate method, you can access the inAppMessage data, send it to the JavaScript layer, and decide to show or not show the native message based on the return value.

For more details on these values, see our iOS documentation.

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

To use this delegate, assign it to brazeInAppMessagePresenter.delegate after initializing the braze instance.

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

Overriding the default native UI

If you wish to fully customize the presentation of your in-app messages at the native iOS layer, conform to the BrazeInAppMessagePresenter protocol and assign your custom presenter following the sample below:

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;

Personalizando o comportamento de exibição

Você pode alterar o comportamento de exibição das mensagens no aplicativo em tempo de execução através 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);

Definindo 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!