Personalizar suas mensagens do recurso Mensagens no app do Firebase


O recurso Mensagens no app do Firebase 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 ampliar o comportamento e o conteúdo das mensagens. O recurso de Mensagens no app permite que você adicione ações às mensagens e personalize a aparência da mensagem.

Adicionar uma ação à sua mensagem

Com as ações, é possível usar suas Mensagens no app para direcionar os usuários para um site ou uma tela específica no app.

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

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

Quando seu app tiver um gerenciador de links, você estará pronto para criar uma campanha com uma ação. Abra o console do Firebase no recurso Mensagens e inicie uma nova campanha ou edite uma que já existe. Nessa campanha, insira um Cartão, um Texto do botão e uma Ação do botão, uma Ação da imagem ou uma Ação do banner, sendo que a ação é um link direto relevante.

O formato da ação depende do layout de mensagem escolhido. Os modais têm botões de ação com conteúdo, cor de texto e cor de fundo personalizáveis. As imagens e os banners principais, 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 personalizar a exibição de mensagens para mudar a maneira como seu app processa o layout, os estilos de fontes, as formas de botões e outros detalhes. Há duas maneiras de modificar a exibição de mensagens: modificar as exibições de Firebase In-App Messaging padrão ou criar sua própria biblioteca de exibição de mensagens do zero.

Observação: este produto não está disponível para destinos macOS, Mac Catalyst, App Clip ou watchOS.

Modificar exibições padrão

A maneira mais direta de personalizar suas mensagens é partir do 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.

Selecionar os tipos de mensagens a serem modificados

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

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

Tipo titleText bodyText textColor backgroundColor imageData actionButton secondaryActionButton
Card
Modal
Banner
ImageOnly

Modificar o código de renderização da exibição de mensagens

É possível modificar os tipos de mensagem da maneira que você preferir, mas lembre-se das limitações de cada tipo. Você pode criar um banner mostrado na parte inferior do seu aplicativo, mover o botão de ação em um modal, incorporar a mensagem no app ao feed de um usuário ou qualquer outra modificação que faça com que as mensagens sejam adequadas ao seu aplicativo.

Ao modificar as exibições de mensagens, lembre-se destes dois itens:

  • Diretórios de tipo de mensagem: cada tipo de mensagem tem um diretório separado com arquivos que determinam a lógica desse tipo:
  • Storyboard: a biblioteca InAppMessaging também tem um arquivo .storyboard que ajuda a definir a IU para todos os três tipos de mensagem:

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

Atualizar o podfile para usar o código InAppMessaging modificado

Para que Firebase In-App Messaging use suas exibições de mensagens modificadas em vez das padrão, atualize o podfile para usar a 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
Com isso, é possível atualizar seus pods, reconstruir seu app e ver suas novas exibições de mensagens personalizadas.

Criar sua própria biblioteca de exibições de mensagens

Você não precisa trabalhar somente com a biblioteca InAppMessaging para criar uma IU para exibir mensagens. Também é possível 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 processar as comunicações entre os servidores do Firebase e seu app. Essa classe, por sua vez, usa o protocolo InAppMessagingDisplay para mostrar as mensagens recebidas. Para criar sua própria biblioteca de exibições, crie 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.

Configurar messageDisplayComponent para usar sua biblioteca de exibições de mensagens

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

InAppMessaging.inAppMessaging().messageDisplayComponent = yourInAppMessagingRenderingInstance