Personaliza tus mensajes de mensajería dentro de la aplicación de Firebase

Firebase In-App Messaging proporciona un conjunto útil de comportamientos y tipos de mensajes preconfigurados con una apariencia predeterminada, pero en algunos casos es posible que desees ampliar los comportamientos y el contenido de los mensajes. La mensajería dentro de la aplicación le permite agregar acciones a los mensajes y personalizar la apariencia de los mismos.

Añade una acción a tu mensaje

Con acciones, puede usar sus mensajes dentro de la aplicación para dirigir a los usuarios a un sitio web o una pantalla específica en su aplicación.

Firebase In-App Messaging utiliza controladores de enlaces para procesar acciones. El SDK puede usar varios controladores, por lo que si su aplicación ya tiene uno, Firebase In-App Messaging puede usarlo sin ninguna configuración adicional. Si aún no tiene un controlador, puede usar Firebase Dynamic Links. Para obtener más información, lea Crear vínculos dinámicos en iOS .

Agrega la acción a tu mensaje usando Firebase console

Una vez que su aplicación tenga un controlador de enlaces, estará listo para redactar una campaña con una acción. Abra Firebase console en Mensajería e inicie una nueva campaña o edite una campaña existente. En esa campaña, proporcione una Tarjeta , Texto de Botón y Acción de Botón , una Acción de Imagen o una Acción de Banner , donde la acción sea un vínculo profundo relevante.

El formato de la acción depende del diseño del mensaje que elija. Los modales obtienen botones de acción con contenido de texto de botón, color de texto y color de fondo personalizables. Las imágenes y los banners superiores, por otro lado, se vuelven interactivos e invocan la acción especificada cuando se tocan.

Modificar la apariencia del mensaje

Firebase In-App Messaging te permite personalizar la visualización de mensajes para cambiar la forma en que tu aplicación muestra el diseño de los mensajes, los estilos de fuente, las formas de los botones y otros detalles. Hay dos formas de modificar la visualización de mensajes: modificar las pantallas predeterminadas de Firebase In-App Messaging o crear su propia biblioteca de visualización de mensajes desde cero.

Nota: Este producto no está disponible en dispositivos macOS, Mac Catalyst, App Clip o watchOS.

Modificar pantallas predeterminadas

La forma más sencilla de personalizar tus mensajes es construir a partir del código de visualización de mensajes predeterminado de Firebase In-App Messaging.

Clonar el repositorio firebase-ios-sdk

Para comenzar, clone la última versión del repositorio firebase-ios-sdk y abra el directorio InAppMessaging .

Seleccionar tipos de mensajes para modificar

Con el repositorio clonado, puedes modificar cualquiera o todos los tipos de mensajes de Firebase In-App Messaging: Card , Modal , Banner e ImageOnly . Cada tipo corresponde a un diseño de mensaje en el flujo de creación de campañas de Firebase In-App Messaging.

En consecuencia, cada tipo tiene acceso a un conjunto diferente de datos, determinado por las opciones de personalización de la campaña en Firebase console:

Tipo texto del título cuerpo de texto color de texto color de fondo datos de imagen botón de acción botón de acción secundaria
Tarjeta
Modal
Bandera
Sólo imagen

Modificar el código de representación de visualización de mensajes

Teniendo en cuenta las limitaciones del tipo de mensaje, puedes modificarlas como quieras. Puede crear un banner que se muestre en la parte inferior de su aplicación, moverse por el botón de acción en un modal, incrustar el mensaje dentro de la aplicación en el feed de un usuario o cualquier otra modificación que haga que la apariencia de los mensajes se ajuste a su aplicación. .

Hay dos cosas principales a las que se debe prestar atención al modificar la visualización de mensajes:

  • Directorios de tipos de mensajes: cada tipo de mensaje tiene un directorio separado con archivos que determinan la lógica de ese tipo:
  • Guión gráfico: la biblioteca InAppMessaging también tiene un archivo .storyboard que ayuda a definir la interfaz de usuario para los tres tipos de mensajes:

Modifique archivos en los directorios de sus tipos de mensajes preferidos y las secciones correspondientes del .storyboard para crear sus pantallas de mensajes personalizadas.

Actualice su podfile para usar su código InAppMessaging modificado

Para que Firebase In-App Messaging use las pantallas de mensajes modificadas en lugar de las predeterminadas, actualice su podfile para usar su 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
Una vez hecho esto, puede actualizar sus pods, reconstruir su aplicación y ver sus mensajes nuevos y personalizados.

Crea tu propia biblioteca de visualización de mensajes

No está limitado a trabajar desde la biblioteca InAppMessaging para crear una interfaz de usuario para mostrar mensajes. También puedes escribir tu propio código desde cero.

Cree una clase que implemente el protocolo InAppMessagingDisplay

Firebase In-App Messaging usa la clase InAppMessaging para manejar las comunicaciones entre los servidores de Firebase y su aplicación. Esa clase, a su vez, utiliza el protocolo InAppMessagingDisplay para mostrar los mensajes que recibe. Para crear su propia biblioteca de visualización, escriba una clase que implemente el protocolo.

La definición del protocolo y la documentación sobre cómo cumplirlo se encuentran en el archivo FIRInAppMessagingDisplay.h de la biblioteca InAppMessaging .

Configure messageDisplayComponent para usar su biblioteca de visualización de mensajes

InAppMessaging usa su propiedad messageDisplayComponent para determinar qué objeto usar al mostrar mensajes. Establece esa propiedad en un objeto de tu clase de visualización de mensajes personalizada, para que Firebase In-App Messaging sepa cómo usar tu biblioteca para representar mensajes:

InAppMessaging.inAppMessaging().messageDisplayComponent = yourInAppMessagingRenderingInstance