klaviyo_flutter

Pub CI

Flutter wrapper for Klaviyo Android, and iOS projects.

  • Uses Klaviyo Android SDK Version 2.2.1.
  • The minimum Android SDK minSdkVersion required is 23.
  • Uses Klaviyo iOS SDK Version 3.0.4.
  • The minimum iOS target version required is 13.

Usage

Import package:klaviyo_flutter/klaviyo_flutter.dart and use the methods in Klaviyo class.

Example:

import 'package:flutter/material.dart';
import 'package:klaviyo_flutter/klaviyo_flutter.dart';

void main() async {
  // initialize the flutter binding.
  WidgetsFlutterBinding.ensureInitialized();
  // initialize the Klaviyo.
  // make sure to add key from your Klaviyo account public API.
  await await Klaviyo.instance.initialize('apiKeyHere');
  runApp(App());
}

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Text('Send Klaviyo SUCCESSFUL_PAYMENT event'),
      onPressed: () async {
        await Klaviyo.instance.logEvent(
          '\$successful_payment',
          {'\$value': 'paymentValue'},
        );
      },
    );
  }
}

See Klaviyo Android and iOS package documentation for more information.

Android

Permissions:

<uses-permission android:name="android.permission.INTERNET" />

Optional permissions:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /><uses-permission
android:name="android.permission.VIBRATE" /><uses-permission
android:name="android.permission.POST_NOTIFICATIONS" />

Enable AndroidX + Jetifier support in your android/gradle.properties file (see example app):

android.useAndroidX=true
android.enableJetifier=true

iOS

Make sure that you have a NSPhotoLibraryUsageDescription entry in your Info.plist.

  <key>NSPhotoLibraryUsageDescription</key>

  IPHONEOS_DEPLOYMENT_TARGET = 13.0;

Push notifications setup

This plugin works in combination with the firebase_messaging plugin to receive Push Notifications.

Prerequisites:

  • Firebase account
  • Familiarity with Firebase documentation.

KlaviyoPushService

The Klaviyo Push SDK for Android works as a wrapper around FirebaseMessagingService so the setup process is very similar to the Firebase client documentation linked above. You should follow all other setup recommendations from the FCM documentation. Register KlaviyoPushService to receive MESSAGING_EVENT intents. This allows Klaviyo's Push SDK to receive new and updated push tokens via the onNewToken method, as well as display notifications via the onMessageReceived method.

<service android:name="com.klaviyo.pushFcm.KlaviyoPushService" android:exported="false">
  <intent-filter>
    <action android:name="com.google.firebase.MESSAGING_EVENT" />
  </intent-filter>
</service>

To specify a notification icon, add the following metadata to your app manifest. Absent this, the application's launcher icon will be used.

<meta-data android:name="com.klaviyo.push.default_notification_icon"
    android:resource="{YOUR_ICON_RESOURCE}" />

final firebaseMessaging = FirebaseMessaging.instance;
final token = Platform.isIOS
        ? await firebaseMessaging.getAPNSToken()
        : await firebaseMessaging.getToken();

if (token != null && token.isNotEmpty) {
  Klaviyo.instance.sendTokenToKlaviyo(token);
}

Sending push notifications

  1. Add the following code to the application delegate file in application:didRegisterForRemoteNotificationsWithDeviceToken. You may need to add this code to your application delegate if you have not done so already.
    if #available(iOS 10.0, *) {
        UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
    }

Any users that enable/accept push notifications from your app now will be eligible to receive your custom notifications.

To read more about sending push notifications, check out our additional push notification guides.

Now, if either Firebase direct (e.g. by your own backend server) or Klaviyo sends you a message, it will be delivered to your app.

Tracking push notifications

The following code example allows you to track when a user opens a push notification.

  1. Add the following code that extends your main app:
    FirebaseMessaging.onBackgroundMessage(firebaseMessagingBackgroundHandler);

    Future<void> firebaseMessagingBackgroundHandler(RemoteMessage message) async {
        await Firebase.initializeApp();
        await Klaviyo.instance.handleBackgroundMessage(message);
    }

Once your first push notifications are sent and opened, you should start to see Opened Push metrics within your Klaviyo dashboard.

Libraries

klaviyo_flutter