Personalize suas mensagens do Firebase In-App Messaging

iOS + Android Flutter

O Firebase In-App Messaging fornece um conjunto útil de comportamentos e tipos de mensagens pré-configurados com uma aparência padrão, mas em alguns casos você pode querer estender os comportamentos e o conteúdo da mensagem. As mensagens no aplicativo permitem adicionar ações às mensagens e personalizar a aparência das mensagens.

Adicione uma ação à sua mensagem

Com ações, você pode usar mensagens no aplicativo para direcionar os usuários a um site ou a uma tela específica do seu aplicativo.

Implementar um manipulador de link direto

O Firebase In-App Messaging usa manipuladores de links para processar ações. O SDK é capaz de usar vários gerenciadores. Portanto, se seu aplicativo já tiver um, o Firebase In-App Messaging poderá usá-lo sem qualquer configuração adicional. Se você ainda não tem um gerenciador, pode usar o Firebase Dynamic Links. Para saber mais, leia Criar links dinâmicos no iOS .

Adicione a ação à sua mensagem usando o console do Firebase

Assim que seu aplicativo tiver um gerenciador de links, você estará pronto para compor uma campanha com uma ação. Abra o console do Firebase no Messaging e inicie uma nova campanha ou edite uma campanha existente. Nessa campanha, forneça um cartão , um texto de botão e uma ação de botão , uma ação de imagem ou uma ação de banner , onde a ação é um link direto relevante.

O formato da ação depende do layout de mensagem escolhido. Os modais obtêm botões de ação com conteúdo de texto de botão personalizável, cor de texto e cor de fundo. As imagens e os banners superiores, por outro lado, tornam-se interativos e invocam a ação especificada quando tocados.

Modificar a aparência da mensagem

O Firebase In-App Messaging permite que você personalize a exibição de mensagens para alterar a forma como seu aplicativo renderiza o layout das mensagens, estilos de fonte, formatos de botões e outros detalhes. Há duas maneiras de modificar as exibições de mensagens: modificar as exibições padrão do Firebase In-App Messaging ou criar sua própria biblioteca de exibição de mensagens do zero.

Modificar exibições padrão

A maneira mais direta de personalizar suas mensagens é desenvolver o código de exibição de mensagens padrão do Firebase In-App Messaging.

Clone o repositório firebase-ios-sdk

Para começar, clone a versão mais recente do repositório firebase-ios-sdk e abra o diretório InAppMessaging .

Selecione os tipos de mensagens para modificar

Com o repositório clonado, você pode modificar qualquer um ou todos os tipos de mensagens do Firebase In-App Messaging: Card , Modal , Banner e ImageOnly . Cada tipo corresponde a um layout de mensagem no fluxo de criação de campanha do Firebase In-App Messaging.

Assim, cada tipo tem acesso a um conjunto diferente de dados, determinado pelas opções de personalização de campanha no console do Firebase:

Modifique o código de renderização de exibição de mensagens

Com as limitações do tipo de mensagem em mente, você pode modificá-las como desejar. Você pode criar um banner que é exibido na parte inferior do seu aplicativo, mover o botão de ação em um modal, incorporar a mensagem do aplicativo no feed de um usuário ou qualquer outra modificação que faça com que a aparência das mensagens se ajuste ao seu aplicativo .

Há duas coisas principais a serem observadas ao modificar a exibição de mensagens:

• Diretórios de tipo de mensagem: Cada tipo de mensagem possui um diretório separado com arquivos que determinam a lógica desse tipo:
  • Card
  • Modal
  • Banner
  • ImageOnly
• Storyboard: a biblioteca InAppMessaging também possui um arquivo .storyboard que ajuda a definir a IU para todos os três tipos de mensagens:
  • FIRInAppMessageDisplayStoryboard.storyboard

Modifique os arquivos nos diretórios de seus tipos de mensagens preferidos e nas seções correspondentes do .storyboard para criar suas exibições de mensagens personalizadas.

Atualize seu podfile para usar seu código InAppMessaging modificado

Para fazer com que o Firebase In-App Messaging use suas exibições de mensagens modificadas em vez das exibições padrão, atualize seu podfile para usar sua biblioteca InAppMessaging personalizada:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'YourProject' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!

# Pods for YourProject
pod 'Firebase'

# Remove the default InAppMessaging pod:
# pod 'Firebase/InAppMessaging'

# Overwrite it with a version that points to your local copy:
pod `FirebaseInAppMessaging', :path => '~/Path/To/The/Cloned/Repo/'

end

Crie sua própria biblioteca de exibição de mensagens

Você não está limitado a trabalhar na biblioteca InAppMessaging para criar uma IU para exibir mensagens. Você também pode escrever seu próprio código do zero.

Crie uma classe que implemente o protocolo InAppMessagingDisplay

O Firebase In-App Messaging usa a classe InAppMessaging para lidar com as comunicações entre os servidores Firebase e seu aplicativo. Essa classe, por sua vez, usa o protocolo InAppMessagingDisplay para exibir as mensagens que recebe. Para construir sua própria biblioteca de exibição, escreva uma classe que implemente o protocolo.

A definição do protocolo e a documentação sobre como estar em conformidade com ele estão no arquivo FIRInAppMessagingDisplay.h da biblioteca InAppMessaging .

Defina messageDisplayComponent para usar sua biblioteca de exibição de mensagens

InAppMessaging usa sua propriedade messageDisplayComponent para determinar qual objeto usar ao exibir mensagens. Defina essa propriedade como um objeto da sua classe de exibição de mensagem personalizada, para que o Firebase In-App Messaging saiba como usar sua biblioteca para renderizar mensagens:

InAppMessaging.inAppMessaging().messageDisplayComponent = yourInAppMessagingRenderingInstance