Firebase in-app messaging || Flutterflow

Firebase In-App Messaging empowers you to deliver targeted messages directly within your FlutterFlow app, enhancing user engagement at crucial moments. Lets' dives into the integration process, guiding you through setting up in-app messaging and unlocking its potential.

The Power of In-App Messaging : Firebase In-App Messaging goes beyond push notifications by displaying contextually relevant messages within your running app.

This allows you to:

Promote New Features: Highlight exciting new functionalities and encourage users to explore them.

Drive User Engagement: Guide users towards specific actions, like completing a purchase or signing up for a newsletter.

Deliver Targeted Content: Personalize messages based on user behavior and demographics for a more impactful experience.

For a deeper understanding of Firebase In-App Messaging, check out this insightful resource: Firebase In-App Messaging on Android - Medium

1. Setting the Stage:

   1. Enable Google Analytics: Integrate Google Analytics with both FlutterFlow and the Firebase console. This empowers data-driven targeting for your in-app messages.

      

   2. Building a Custom Action in FlutterFlow:

      1. Remember to include pubdev package # firebase_in_app_messaging: ^0.8.0+8

         Copy

         // Automatic FlutterFlow imports
         import '/backend/backend.dart';
         import '/backend/schema/structs/index.dart';
         import '/backend/schema/enums/enums.dart';
         import '/flutter_flow/flutter_flow_theme.dart';
         import '/flutter_flow/flutter_flow_util.dart';
         import '/custom_code/actions/index.dart'; // Imports other custom actions
         import '/flutter_flow/custom_functions.dart'; // Imports custom functions
         import 'package:flutter/material.dart';
         // Begin custom action code
         // DO NOT REMOVE OR MODIFY THE CODE ABOVE!
         
         import 'package:firebase_in_app_messaging/firebase_in_app_messaging.dart';
         import 'package:flutter/foundation.dart';
         
         Future initializeInAppMessaging() async {
           // Add your function code here!
           try {
             // Add platform check
             if (!kIsWeb) {
               // Only run on mobile platforms
               final fiam = FirebaseInAppMessaging.instance;
               await fiam.setMessagesSuppressed(false);
               debugPrint('In-App Messaging initialized successfully');
             } else {
               debugPrint('In-App Messaging not supported on web platform');
             }
           } catch (e) {
             debugPrint('Error initializing In-App Messaging: $e');
             // Log the full error details
             debugPrint(e.toString());
           }
         }

   3. Connect to Main.dart

      

   4. Creating the Campaign in Firebase

      1. Firebase Console: Navigate to the Firebase console and create a new in-app messaging campaign. The console offers a user-friendly interface for creating compelling messages, customizing their appearance, and defining targeting criteria.

      2. Define the message content, targeting parameters, and display triggers within the campaign.

   5. Enable Firebase In-App Messaging API from your projects google cloud console:

      

   6. Check if I AM permission is available or not in google cloud console: click on

      

   7. find account which probably would look like : firebase-adminsdk-someNumber@your-project.iam.gserviceaccount.com

   8. Edit Principal : Assign roles > Firebase In-App Messaging Admin

   9. Go Google Cloud Dashboard : APIs & Services > Credential

      

   10. Check if Restrictions tab allowed for Firebase in App messaging or not:

       

       
       

2. Troubleshoot : check your debug console while testing on emulator, if Firebase in app messaging initialized properly or not. If initialized, you will have complete error message in case something is preventing or blocking in app message (most likely permissions, if not correctly handled).

Hope this detailed guide, will save lot of time while enabling in app message in flutterflow. Would appreciate, if you would like to add more insights to this.

Cheers..