Skip to content

Delegado da UI de mensagens no app

Use o opcional BrazeInAppMessageUIDelegate para personalizar a apresentação de mensagens no app e reagir a vários eventos do ciclo de vida. Esse protocolo delegado pode ser usado para receber cargas úteis de mensagens no app disparadas para processamento adicional, receber eventos do ciclo de vida da exibição e controlar o tempo de exibição.

Pré-requisitos

Para usar BrazeInAppMessageUIDelegate:

  • Você precisa estar usando a implementação padrão do BrazeInAppMessageUI padrão como seu inAppMessagePresenter.
  • Você deve incluir a biblioteca BrazeUI em seu projeto.

Configuração do delegado de mensagem no app

Defina seu objeto BrazeInAppMessageUIDelegate delegado na instância da Braze seguindo este código de exemplo:

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

Em seguida, 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

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
4
5
6
7
@interface AppDelegate () <BrazeInAppMessageUIDelegate>

@end

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

Em seguida, atribua o objeto delegate na instância do app BrazeInAppMessageUI antes de atribuir essa mensagem no app UI como seu inAppMessagePresenter.

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

Nem todos os métodos delegados estão disponíveis em Objective C devido à incompatibilidade de seus parâmetros com o tempo de execução da linguagem.

Guia passo a passo

Para obter uma implementação passo a passo do delegado da UI de mensagens no app, consulte este tutorial.

Personalização da orientação de mensagens no app para iOS

Definição de uma orientação preferencial

É possível configurar todas as mensagens no app para serem apresentadas em uma orientação específica, independentemente da orientação do dispositivo. Para definir uma orientação preferencial, use o método delegado inAppMessage(_:prepareWith:) para definir a propriedade preferredOrientation no PresentationContext.

Por exemplo, para criar uma orientação preferencial de retrato:

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

Depois que a mensagem no app for apresentada, 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 isso seja compatível com a configuração orientation da mensagem.

Observe que 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.

Envio de mensagens de orientação

Como alternativa, você pode definir a orientação por mensagem. Essa propriedade define todos os tipos de orientação disponíveis para essa mensagem. Para fazer isso, defina a propriedade orientation em um determinado 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;

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 de cliques em botões

Para acessar as informações do botão de mensagem no app ou substituir o comportamento do clique, implemente BrazeInAppMessageUIDelegate.inAppMessage(_:shouldProcess:). Retorne true para permitir que a Braze processe a ação de clique ou retorne false para substituir o comportamento.

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

Ocultação da barra de status durante a exibição

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:

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:

Amostras de implementação

Consulte InAppMessageUI em nossa pasta Examples para ver um exemplo em Swift e Objective C

QUÃO ÚTIL FOI ESTA PÁGINA?
New Stuff!