Klaviyo

The Klaviyo Plugin enables mobile push notifications in your Median-powered app to increase user engagement and deliver detailed audience insights. It integrates directly with the official Klaviyo Swift SDK for iOS and Klaviyo Kotlin SDK for Android.

This guide explains how to configure the plugin and use its available functions through the Median JavaScript Bridge.

👍

Developer Demo

Display our demo page in your app to test during development https://median.dev/klaviyo/

Implementation Guide

Klaviyo Setup

Before configuring the plugin in Median, complete the following setup steps in your Klaviyo account:

• Add your iOS and Android apps to Klaviyo
• Retrieve your Klaviyo Public API Key

Add Your Android and iOS Apps

Follow Klaviyo’s official setup guides for mobile push:

• How to set up iOS push notifications
• How to set up Android push notifications

During the setup you will need access to your App Identifiers, as well as details for your Apple Developer Account and Google Service Account.

Retrieve Your Public API Key

Navigate to Settings → Account → API Keys to locate your Public API Key. This key is required when initializing Klaviyo's mobile SDKs for push notifications.

App Configuration

After setting up the app in Klaviyo, you will need to configure the Median plugin as well as the add the Google-Services files to your app configuration.

Plugin Configuration

After completing the Klaviyo setup, configure the plugin in Median App Studio.

Configuration fields:

• API Key - Your Klaviyo Public API Key (as obtained in the step above)
• Automatic Registration:
  • Enabled: Requests push permissions on app startup
  • Disabled: Allows you to request push permissions later using JavaScript

Below is an example configuration using a Public API Key with Automatic Registration enabled to prompt for push permissions at app launch.

Google Services Configuration

Please follow the steps in Google Services to obtain your GoogleSerivce-Info.plist and google-services.json files and upload them to your app configuration.

Deep Linking

The Klaviyo Plugin supports Deep Linking. When deep links are configured, tapping on a push notification will open the corresponding screen in your app rather than the mobile device browser.

JavaScript Bridge Functions

The following JavaScript functions are available through the Median JavaScript Bridge:

Request Push Notification Permission

Displays a dialog prompting users to enable push notifications. On Android 13 and above, explicit permission is required; for Android 12 and below, permissions are granted automatically.

↔️Median JavaScript Bridge

Javascript

median.klaviyo.promptNotification({
  callback: function(result) {
    console.log(result.granted); // true or false
  }
});

Check Push Notification Permission Status

Returns the current permission status for push notifications.

↔️Median JavaScript Bridge

Javascript

median.klaviyo.notificationEnabled({
  callback: function(result) {
    console.log(result.granted); // true or false
  }
});

User Profile Management

Use these functions to identify users and associate metadata for personalized push messaging and segmentation.

↔️Median JavaScript Bridge

Javascript

// Get the current user profile
median.klaviyo.getProfile();

// Set user profile attributes
median.klaviyo.setProfile({
  externalId: "USER_ID",
  email: "[email protected]",
  phoneNumber: "+1234567890"
});

// Clear the stored user profile
median.klaviyo.resetProfile();

Troubleshooting

How to resolve the IllegalStateException: Default FirebaseApp is not initialized in this process error?

To resolve this issue you will need to upload your GoogleSerivce-Info.plistandgoogle-services.json files to your app configuration. The SDK can not be initialized otherwise because Klaviyo requires Google Services to deliver notifications.