Personalizar suas mensagens do recurso do Firebase de mensagens no app

O recurso do Firebase de Mensagens no app 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 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 recurso do Firebase de Mensagens no app usa gerenciadores de links diretos para processar ações. O SDK pode usar vários gerenciadores. Portanto, se o app já tiver um, o recurso do Firebase de Mensagens no app poderá usá-lo sem nenhuma configuração adicional. Se você ainda não tiver um gerenciador, poderá usar o 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 no app e inicie uma nova campanha ou edite uma campanha atual. Nessa campanha, insira um Cartão, um Texto do botão e uma Ação de 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

Com o recurso do Firebase de mensagens no app, você pode personalizar a exibição de mensagens para alterar 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 a exibição padrão do recurso do Firebase ou criar sua própria biblioteca de exibição de mensagens a partir do zero.

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 recurso do Firebase de mensagens no app.

Clonar o repositório firebase-ios-sdk

Para começar, copie o repositório mais recente (em inglês) do firebase-ios-sdk e abra o diretório InAppMessagingDisplay (em inglês).

Selecionar os tipos de mensagens a serem modificados

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

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

Tipo titleText bodyText textColor backgroundColor imageData actionButton secondaryActionButton
Cartão check check check check check check check
Modal check check check check check check
Banner check check check check check
ImageOnly check

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 InAppMessagingDisplay também tem um arquivo .storyboard que ajuda a definir a IU para os três tipos de mensagens:

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 seu podfile para usar sua InAppMessagingDisplay modificada

Para que o recurso do Firebase de mensagens no app use suas exibições de mensagens modificadas em vez das exibições padrão, atualize seu podfile para usar a InAppMessagingDisplay 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 InAppMessagingDisplay pod:
# pod 'Firebase/InAppMessagingDisplay'

# Overwrite it with a version that points to your local copy:
pod `FirebaseInAppMessagingDisplay', :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 InAppMessagingDisplay para criar uma interface do usuário para exibir mensagens. Também é possível escrever seu próprio código do zero.

Criar uma classe que implemente a interface FIRInAppMessagingRendering

O recurso do Firebase de mensagens no app usa a classe FIRInAppMessaging para gerenciar as comunicações entre os servidores do Firebase e seu aplicativo. Por sua vez, essa classe usa o protocolo FIRInAppMessagingRendering para exibir as mensagens que recebe. 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 se adequar a ela estão no arquivo FIRInAppMessagingRendering.h da biblioteca InAppMessaging. Se você já configurou o recurso do Firebase de mensagens no app, poderá encontrar o arquivo no diretório do projeto Xcode:

FirebaseInAppMessaging > Frameworks > FirebaseInAppMessaging.framework > Headers > FIRInAppMessagingRendering.h.

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

O FIRInAppMessaging 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 o recurso do Firebase de mensagens no app saiba que precisa usar sua biblioteca para renderizar mensagens:

[FIRInAppMessaging inAppMessaging].messageDisplayComponent = yourFIRInAppMessagingRenderingInstance;

Modificar seu podfile para usar a versão sem comando do recurso do Firebase de mensagens no app

O pod padrão do recurso do Firebase de mensagens no app, Firebase/InAppMessagingDisplay, é atribuído automaticamente como messageDisplayComponent do aplicativo. Para contornar isso, use o pod Firebase/InAppMessaging sem comando:

# 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 InAppMessagingDisplay pod:
# pod 'Firebase/InAppMessagingDisplay'

# Include the headless pod instead:
pod `Firebase/InAppMessaging'

end
Com isso, é possível atualizar seus pods, reconstruir seu app e ver suas novas exibições de mensagens personalizadas.