Klaviyo

Log in to Klaviyo and navigate to Account (bottom-left avatar) → Settings → API Keys. You will see two types of keys. The Public API Key (also listed as your Site ID) is a short string like `AbCd12` — this is safe to use client-side and you can copy it directly. The Private API Key is a longer string starting with `pk_` — treat this like a password and never put it anywhere it could end up in your app bundle. Copy both to a temporary notes file. Next, check Klaviyo's API reference for the current required revision date. The Klaviyo API requires every request to include a `revision` header with a date string in the format `YYYY-MM-DD` (for example, `2024-02-15`). This date pins your app to a specific API version. You can find the latest supported revision in the Klaviyo API changelog at `developers.klaviyo.com`. Missing this header causes your requests to fail with a 400 error, so get this right before building anything else. Write both keys and the revision date in a text file — you will enter them into FlutterFlow and your proxy backend in the next steps.

Because Klaviyo's private key grants full read/write access to your entire audience, it must never be placed inside a FlutterFlow API Call header — doing so bakes the key into the compiled Flutter app where anyone can extract it using a tool like jadx or apktool. Instead, deploy a thin backend proxy that FlutterFlow will call, and that proxy will forward the request to Klaviyo with the private key injected server-side. If you are using Firebase, open the Firebase Console, navigate to Functions, and either use the CLI locally or the inline editor to create a function. The function accepts POST requests from FlutterFlow with a JSON body specifying which Klaviyo endpoint to call (for example, `/api/profiles/` or `/api/lists/{id}/relationships/profiles/`) and any relevant data, then calls Klaviyo with your private key in the Authorization header and returns the response. If you are using Supabase, navigate to Edge Functions in your Supabase Dashboard, click New Function, and write a Deno function that does the same proxy work. Store your Klaviyo private key in the project's environment secrets (Settings → Edge Functions → Secrets) as `KLAVIYO_PRIVATE_KEY` — never hardcode it in the function source. The proxy only needs a few dozen lines of code. It receives your FlutterFlow request, adds the `Authorization: Klaviyo-API-Key YOUR_PRIVATE_KEY` header and the required `revision` header, forwards to `https://a.klaviyo.com/api`, and returns the result. Your FlutterFlow API Calls will point to your proxy URL, not to Klaviyo directly.

1// Firebase Cloud Function proxy for Klaviyo private-key calls
2// Deploy to Firebase Functions (Node.js 18+)
3const functions = require('firebase-functions');
4const fetch = require('node-fetch');
5
6exports.klaviyoProxy = functions.https.onRequest(async (req, res) => {
7  // Allow requests from your FlutterFlow app
8  res.set('Access-Control-Allow-Origin', '*');
9  res.set('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE');
10  res.set('Access-Control-Allow-Headers', 'Content-Type');
11  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
12
13  const KLAVIYO_PRIVATE_KEY = process.env.KLAVIYO_PRIVATE_KEY;
14  const KLAVIYO_REVISION = '2024-02-15'; // Update to your target revision
15
16  const { endpoint, method = 'GET', body } = req.body;
17  if (!endpoint) { res.status(400).json({ error: 'endpoint required' }); return; }
18
19  try {
20    const klaviyoRes = await fetch(`https://a.klaviyo.com/api${endpoint}`, {
21      method,
22      headers: {
23        'Authorization': `Klaviyo-API-Key ${KLAVIYO_PRIVATE_KEY}`,
24        'revision': KLAVIYO_REVISION,
25        'Content-Type': 'application/json',
26      },
27      body: body ? JSON.stringify(body) : undefined,
28    });
29    const data = await klaviyoRes.json();
30    res.status(klaviyoRes.status).json(data);
31  } catch (err) {
32    res.status(500).json({ error: err.message });
33  }
34});

Public-key event tracking to Klaviyo's Track endpoint is safe to call directly from FlutterFlow without a proxy because the public key is designed to be exposed. This is how you fire behavioral events like 'Viewed Product', 'Started Checkout', and 'Placed Order' that feed Klaviyo's automation flows. In FlutterFlow, click API Calls in the left navigation panel. Click + Add and select Create API Group. Name it 'Klaviyo Track Events' and set the Base URL to `https://a.klaviyo.com`. Click Save. Now click + Add again and select Create API Call. Set the Name to 'Track Event', the Method to POST, and the Endpoint to `/client/events/`. In the Variables tab, click + Add Variable and create one called `event_name` (String) and another called `event_properties` (JSON or String). In the Headers tab, click + Add Header and add: `revision` with the value `2024-02-15` (or your target revision). Also add `Content-Type: application/json`. In the Request Body tab, set the body format to JSON and enter the Klaviyo Track event structure. The public key is used as a URL parameter or in the body depending on the endpoint version — check the Klaviyo Client API documentation for the correct format for your revision. Click Test, enter a test event name and properties, and click Run Test. If you see a `200 OK` or `202 Accepted` response, the connection is working. This API Call will be triggered from widget Actions when users interact with your app — for example, when they tap a product card, open the checkout screen, or complete a purchase.

1{
2  "method": "POST",
3  "endpoint": "/client/events/",
4  "base_url": "https://a.klaviyo.com",
5  "headers": {
6    "revision": "2024-02-15",
7    "Content-Type": "application/json"
8  },
9  "query_params": {
10    "company_id": "{{ public_key }}"
11  },
12  "body": {
13    "data": {
14      "type": "event",
15      "attributes": {
16        "metric": {
17          "data": {
18            "type": "metric",
19            "attributes": {
20              "name": "{{ event_name }}"
21            }
22          }
23        },
24        "properties": "{{ event_properties }}",
25        "profile": {
26          "data": {
27            "type": "profile",
28            "attributes": {
29              "email": "{{ user_email }}"
30            }
31          }
32        }
33      }
34    }
35  }
36}

For list management, profile reads, and campaign metrics — anything requiring the private key — you need a second API Group that talks to your proxy, not directly to Klaviyo. The proxy adds the private key and revision header server-side, so FlutterFlow only needs to know your proxy URL. In FlutterFlow, click API Calls in the left navigation. Click + Add and select Create API Group. Name it 'Klaviyo Proxy' and set the Base URL to your deployed proxy URL (e.g., `https://us-central1-your-project.cloudfunctions.net`). Add a Header: `Content-Type: application/json`. Create an API Call inside this group named 'Get List Members'. Set the Method to POST and the Endpoint to `/klaviyoProxy` (or your actual function path). In the Variables tab, add: `endpoint` (String, default value `/lists/{list_id}/relationships/profiles/`) and `list_id` (String). Set the Request Body to JSON: `{ "endpoint": "/lists/{{ list_id }}/relationships/profiles/", "method": "GET" }`. In the Response & Test tab, paste a sample Klaviyo list members response (you can copy one from the Klaviyo API docs). Click Generate JSON Paths. FlutterFlow will automatically generate JSON Path expressions for each field in the response. The main one you need is `$.data[*].id` for profile IDs and `$.links.next` for the pagination cursor. Click + Add Data Type to create a 'KlaviyoProfile' type with fields `id` (String), `email` (String), and any custom properties you care about. Map the JSON paths to this Data Type. Pagination is cursor-based in Klaviyo — the response includes a `links.next` URL when more pages exist. Build a loop in your Action Flow (use a Loop or While variable) that calls this API Call, stores the cursor from `$.links.next`, and repeats until `next` is null. For large lists with thousands of profiles, this prevents the silent truncation you would get from a single un-paginated call.

With your Track Events API Call set up, connect it to actual user interactions in your FlutterFlow app so Klaviyo receives real behavioral data. The Action Flow Editor is where FlutterFlow actions are sequenced — you can chain multiple actions, pass data between them, and conditionally fire events. Navigate to the screen where you want to track an event — for example, a product detail screen. Click on the widget that the user interacts with, such as a 'View Details' button or the screen itself (use the On Page Load trigger). In the right panel, click the Actions tab and then + Add Action. Scroll to the Backend/API section and select 'Backend Call'. Choose the Klaviyo Track Events group and the Track Event call. In the 'Set Variables' section, set `event_name` to a string like `Viewed Product` (or create an App Value for it). Set `event_properties` to a JSON object containing relevant fields — you can build this dynamically from page variables using Set Variable in a custom action, or pass a static JSON string for simple cases. Set `user_email` to the current user's email from your authentication system (if you use Supabase or Firebase Auth, this is accessible via the Auth User Email variable in FlutterFlow). Repeat this for other key conversion points: add a 'Started Checkout' event on the checkout screen's On Page Load trigger, and a 'Placed Order' event on the success screen. In Klaviyo, create corresponding flows that trigger on these metric names to send follow-up emails. Note that FlutterFlow fires these calls asynchronously — the user does not wait for the Klaviyo response before seeing the next screen. This is correct behavior for analytics events. Do NOT wait for the API response or show a loading indicator for tracking calls.

If your app displays Klaviyo campaign stats, flow performance, or audience metrics to admins or users, polling Klaviyo's API directly on every screen open will quickly exhaust the 75 requests/second private-key rate limit — especially if multiple users open the analytics screen simultaneously. The solution is to cache metrics in your database (Firestore collection or Supabase table) and refresh the cache on a scheduled Cloud Function. In Firebase: create a scheduled function using `functions.pubsub.schedule('every 60 minutes')` that calls your Klaviyo proxy for campaign stats, parses the response, and writes the results to a Firestore collection named `klaviyo_cache` with documents like `campaigns_summary` and `flow_metrics`. In Supabase: use a pg_cron job or a scheduled Edge Function invocation to do the same, writing to a `klaviyo_cache` Supabase table. Back in FlutterFlow, create a new API Group called 'Klaviyo Cache' pointing to your Firestore or Supabase. The API Calls in this group read from the cache table/collection, not from Klaviyo directly. Add a 'Refresh' button on your analytics screen that calls a special proxy endpoint to trigger an on-demand cache refresh — but rate-limit this button on the client side (disable it for 60 seconds after tapping) to prevent spam. This architecture means your analytics data is at most one hour stale, your app loads instantly without waiting on Klaviyo API calls, and you will never hit rate limit errors regardless of how many users are in the app simultaneously. If you need fresher data, reduce the schedule to every 15 minutes — still well within Klaviyo's limits for a single scheduled job calling a handful of endpoints. If you are struggling with the backend setup for caching or the proxy architecture, RapidDev's team builds FlutterFlow integrations like this every week and offers a free scoping call at rapidevelopers.com/contact.

1// Scheduled Firebase function: refresh Klaviyo metrics cache every hour
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const fetch = require('node-fetch');
5admin.initializeApp();
6
7exports.refreshKlaviyoCache = functions.pubsub
8  .schedule('every 60 minutes')
9  .onRun(async () => {
10    const KLAVIYO_PRIVATE_KEY = process.env.KLAVIYO_PRIVATE_KEY;
11    const REVISION = '2024-02-15';
12
13    const response = await fetch('https://a.klaviyo.com/api/campaigns/?filter=equals(messages.channel,\'email\')', {
14      headers: {
15        'Authorization': `Klaviyo-API-Key ${KLAVIYO_PRIVATE_KEY}`,
16        'revision': REVISION,
17      }
18    });
19    const data = await response.json();
20
21    await admin.firestore()
22      .collection('klaviyo_cache')
23      .doc('campaigns_summary')
24      .set({ data: data.data, updated_at: Date.now() });
25
26    console.log('Klaviyo cache refreshed:', data.data?.length, 'campaigns');
27  });