Flutter Crisp Chat

Appearance

Firebase Setup ​

Crisp uses Firebase Cloud Messaging (FCM) on Android and Apple Push Notification service (APNs) on iOS to deliver push notifications. This page covers the Firebase project setup required for both platforms.

1. Create a Firebase Project ​

If you don't already have a Firebase project:

  1. Go to the Firebase Console
  2. Click Add project and follow the setup wizard
  3. Add your Android and iOS apps to the project

For detailed instructions, see the Firebase Get Started guide.

2. Add Firebase Dependencies ​

Add the Firebase packages to your Flutter project:

shell
flutter pub add firebase_core
flutter pub add firebase_messaging

3. Initialize Firebase ​

In your main.dart:

dart
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'firebase_options.dart';

@pragma('vm:entry-point')
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  print("Handling a background message: ${message.messageId}");
}

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  runApp(const MyApp());
}

Background Handler Requirements

  • Must not be an anonymous function
  • Must be a top-level function (not a class method)
  • Must be annotated with @pragma('vm:entry-point') (Flutter 3.3.0+)

4. Request Notification Permission ​

On iOS and Android 13+, you must request permission before receiving notifications:

dart
FirebaseMessaging messaging = FirebaseMessaging.instance;

NotificationSettings settings = await messaging.requestPermission(
  alert: true,
  announcement: false,
  badge: true,
  carPlay: false,
  criticalAlert: false,
  provisional: false,
  sound: true,
);

print('Permission: ${settings.authorizationStatus}');

5. Configure Crisp Dashboard for Android (FCM) ​

  1. Go to your Firebase Project Settings > Cloud Messaging tab
  2. In the Firebase Cloud Messaging API (V1) section, copy your Sender ID

Copy Sender ID

  1. Go to Service accounts tab > click Generate new private key and save the file

Generate Private Key

  1. Go to your Crisp Dashboard > Settings > ChatBox Settings > Push Notifications
  2. Under Firebase Cloud Messaging:
    • Enable Notify users using Android
    • Paste the Sender ID into the Project ID field
    • Upload your Firebase Admin private key file
    • Click Verify Credentials

Enable Push Notifications

  1. Wait for Crisp to verify your credentials:

Checking Credentials

  1. Once verified, the status will show live:

Credentials Verified

Next Steps ​