FullStory

In FlutterFlow, open the left nav and click Custom Code, then click + Add and select Action. Name the action InitFullStory. In the Dependencies field, add the pub.dev package: `fullstory_flutter` (search pub.dev for the current stable version and paste the full package name; FlutterFlow will resolve the version from pub.dev). This tells FlutterFlow to include the package in the generated Flutter project without you running any terminal commands. In the Dart code editor, write the initialization call. Import the package at the top with `import 'package:fullstory_flutter/fullstory_flutter.dart';`. In the function body, call `FS.init(OrgIdOptions(orgId: 'YOUR_ORG_ID'))`. Replace YOUR_ORG_ID with the alphanumeric org ID from your FullStory account settings — this is a public identifier, not a secret, so it is safe to include directly in the Dart code. Add a `kIsWeb` guard: `if (kIsWeb) return;` at the top of the function body, because the `fullstory_flutter` package is designed for native iOS and Android. Without this guard the app will fail to compile for web targets. Import `foundation.dart` for the `kIsWeb` constant: `import 'package:flutter/foundation.dart';`. Once the Custom Action is saved, open your app's main entry point — the widget that FlutterFlow designates as the initial page or your app's root. Open its Actions panel, click + Add Action, navigate to Custom Actions, and select InitFullStory. Set the action to run On Page Load so FullStory initializes as soon as the app starts. Click Save. Note: Custom Actions do not run in FlutterFlow's web-based Test Mode or the preview canvas. You will see no FullStory recording activity until you test in Run Mode on a physical device or a real iOS/Android build. This is expected and is a known FlutterFlow limitation for any pub.dev SDK-based Custom Action.

1import 'package:flutter/foundation.dart';
2import 'package:fullstory_flutter/fullstory_flutter.dart';
3
4Future initFullStory() async {
5  // FullStory Flutter SDK does not support web
6  if (kIsWeb) return;
7
8  // orgId is a public capture identifier — safe to embed
9  await FS.init(OrgIdOptions(
10    orgId: 'YOUR_ORG_ID',
11    // Optional: set logLevel to debug during development
12    // logLevel: FSLogLevel.debug,
13  ));
14}

After the user signs in to your FlutterFlow app, you need to call FullStory's identify function to tag the session with your own user ID. This is the join key: when you later query FullStory's REST API for a user's sessions using `/v1/users/{uid}`, the uid you search with must exactly match the uid you passed to FS.identify in the app. Without this step, sessions are anonymous and you cannot look them up per user. Create a second Custom Action named IdentifyFullStoryUser. Add the same `fullstory_flutter` package dependency. The function should accept two String arguments: userId (your internal user ID — a stable, opaque identifier, never an email alone) and userEmail (optional, for display in FullStory). In the function body, add the `kIsWeb` guard first, then call `FS.identify(userId, {'email': userEmail, 'displayName': userDisplayName})`. FullStory stores whatever custom properties you pass as user variables, so include attributes that will be useful for filtering sessions in the FullStory dashboard: subscription plan, user role, account creation date. Wire this Custom Action to fire after a successful sign-in. In FlutterFlow, open your sign-in page or the page users land on after authentication. In the Actions panel for the navigation event or the success outcome of your auth action, add IdentifyFullStoryUser. Pass the signed-in user's ID from your Supabase or Firestore user record as the userId argument. This ensures every session from a logged-in user is tagged with your internal ID. Store the userId in an App State variable as well, because you will need it in Step 5 when you query the proxy for this user's sessions. Make the App State variable a String type and set it during the same sign-in action flow.

1import 'package:flutter/foundation.dart';
2import 'package:fullstory_flutter/fullstory_flutter.dart';
3
4// Arguments: userId (String), userEmail (String)
5Future identifyFullStoryUser(
6  String userId,
7  String userEmail,
8) async {
9  if (kIsWeb) return;
10
11  // Identify the user so sessions are searchable by your internal ID
12  await FS.identify(userId, {
13    'email': userEmail,
14    // Add any attributes useful for FullStory filtering
15    // 'plan': userPlan,
16    // 'createdAt': userCreatedAt,
17  });
18}

FullStory's REST API at `https://api.fullstory.com` requires an account-level API key sent as a Bearer token. This key has read access to all sessions and user data in your FullStory organization. If you place it in a FlutterFlow API Call header, it is compiled into the app binary and any user who downloads your app can extract it using standard tools. The solution is a thin proxy function. If you are using Firebase, open the Firebase Console, enable Cloud Functions, and write a Node.js function (Firebase Functions v2 is recommended). The function receives a request from your FlutterFlow app, adds the FullStory Bearer token from environment variables, forwards the request to `https://api.fullstory.com`, and returns the response. This way the token never touches the client. Deploy the function to Firebase using the Firebase Console's inline editor or the Firebase CLI from your development machine. Once deployed, note the function's HTTPS URL — this is the base URL you will use in your FlutterFlow API Group. If you are using Supabase instead, the same pattern applies: create a Supabase Edge Function (Deno runtime) that reads the API key from `Deno.env.get('FULLSTORY_API_KEY')`, forwards the request to FullStory, and returns the response. Store the API key in Supabase Dashboard → Settings → Edge Functions → Secrets. This proxy step is also where RapidDev can help if you'd rather have experts handle the backend plumbing — the team builds FlutterFlow integrations like this every week and offers a free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function (Node.js) — FullStory API proxy
2const { onRequest } = require('firebase-functions/v2/https');
3const { defineSecret } = require('firebase-functions/params');
4const axios = require('axios');
5
6const FULLSTORY_API_KEY = defineSecret('FULLSTORY_API_KEY');
7
8exports.fullstoryProxy = onRequest(
9  { secrets: [FULLSTORY_API_KEY] },
10  async (req, res) => {
11    // CORS for web builds
12    res.set('Access-Control-Allow-Origin', '*');
13    if (req.method === 'OPTIONS') {
14      res.set('Access-Control-Allow-Headers', 'Content-Type');
15      return res.status(204).send('');
16    }
17
18    const apiKey = FULLSTORY_API_KEY.value();
19    const path = req.query.path || '/v2/users';
20
21    try {
22      const response = await axios({
23        method: req.method,
24        url: `https://api.fullstory.com${path}`,
25        headers: {
26          Authorization: `Basic ${Buffer.from(apiKey + ':').toString('base64')}`,
27          'Content-Type': 'application/json',
28        },
29        data: req.body,
30        params: req.query.params ? JSON.parse(req.query.params) : {},
31      });
32      return res.json(response.data);
33    } catch (err) {
34      return res.status(err.response?.status || 500).json({
35        error: err.message,
36      });
37    }
38  }
39);

Now that the proxy is deployed, wire it up in FlutterFlow. In the left nav, click API Calls, then click + Add and select Create API Group. Name the group FullStoryProxy. In the Base URL field, paste your deployed Firebase Cloud Function URL (or Supabase Edge Function URL) from the previous step. Do not add any Authorization headers here — authentication is handled by the proxy function, not by FlutterFlow. With the API Group created, add an API Call inside it: click + Add Call on the group. Name it GetUserSessions. Set the method to GET. In the endpoint path field, leave it empty or add a path variable if your proxy forwards the FullStory path as a query parameter — for example `/` with a query variable named `path` set to `/v2/users/{{userId}}/sessions`. Add a Variable named userId in the Variables tab and set its type to String. Click the Response & Test tab. Paste a sample FullStory sessions API response (you can get this by calling FullStory's API directly from a REST client like Postman using your API key). Click Generate JSON Paths to extract the fields you want to bind in FlutterFlow: session ID, creation time, duration, and `fsUrl` (the replay link). FlutterFlow will generate JSON Path expressions like `$.sessions[*].fsUrl` for each field. Create a custom Data Type in FlutterFlow named FullStorySession with fields: sessionId (String), createdTime (String), durationMs (Integer), fsUrl (String). Map the JSON Paths to this Data Type so FlutterFlow knows how to deserialize the response into typed objects you can bind to list widgets. Save the API Group. Test it by entering a real userId in the Test tab and verifying sessions are returned.

1{
2  "group_name": "FullStoryProxy",
3  "base_url": "https://YOUR_REGION-YOUR_PROJECT.cloudfunctions.net/fullstoryProxy",
4  "calls": [
5    {
6      "name": "GetUserSessions",
7      "method": "GET",
8      "endpoint": "/",
9      "query_params": {
10        "path": "/v2/users/{{userId}}/sessions"
11      },
12      "variables": [
13        { "name": "userId", "type": "String" }
14      ],
15      "json_paths": {
16        "sessionId": "$.sessions[*].id",
17        "createdTime": "$.sessions[*].createdTime",
18        "durationMs": "$.sessions[*].durationMs",
19        "fsUrl": "$.sessions[*].fsUrl"
20      }
21    }
22  ]
23}

Create a new screen in FlutterFlow named SupportPanel (or add it to an existing user-profile or account screen). This screen will show the signed-in user's recent FullStory sessions and let them open replay links, or let a CS agent look up any user by ID. Add a ListView widget to the screen. Set its data source to an API Call backend query — select the FullStoryProxy → GetUserSessions API Call. Pass the userId from your App State variable as the query argument. FlutterFlow will execute the call when the page loads and populate the list with the returned FullStorySession items. Inside the ListView item template, add: a Text widget bound to `createdTime` (format it as a readable date), another Text widget bound to `durationMs` (you can use a Dart string expression to convert milliseconds to minutes), and a Button labeled 'Watch Replay' whose On Tap action is Launch URL → bound to `fsUrl` from the list item. This opens the FullStory session player in the device browser. Add a gate to prevent the panel from showing if the user is not signed in or if the API call is still loading. Use a Conditional Widget wrapping the ListView: show a CircularProgressIndicator while the API call is in the Loading state, and show an error Text when the API call returns an error state. Role-gate the entire screen: only accounts with a support or admin role should be able to navigate to SupportPanel. Configure this in FlutterFlow's navigation action by checking the user's role from your Firestore or Supabase user document before navigating. Add a note in the UI that session replay links require a FullStory viewer license to open — users without a FullStory account will see a login page when they tap the link.

FullStory records user behavior which is personally identifiable information — session recordings capture what users tap, type, and see. You need a consent flow before initializing FullStory, both for GDPR (EU users) and for good product practice. In FlutterFlow, the simplest approach is to store a consent flag in your Supabase or Firestore user document and only call the InitFullStory Custom Action if consent is granted. Open your app's consent or privacy screen. Add a toggle or checkbox labeled 'Allow session recording to help us improve the app.' When the user taps Accept, set a `sessionRecordingConsent` boolean field to true in their user document, then fire the InitFullStory Custom Action. When the user declines or revokes consent, call FS.shutdown() (add a ShutdownFullStory Custom Action) and update the field to false. Note that iOS 14.5+ App Tracking Transparency (ATT) applies when you track users for cross-app attribution. For first-party product analytics within your own app, ATT is generally not required — FullStory's session recording is considered first-party analytics. However, consult your legal team for your specific jurisdiction and use case. For testing: Custom Actions do not execute in FlutterFlow's browser-based Test Mode. To verify FullStory is capturing sessions, use Run Mode which builds and runs the app on a real device or emulator. Check the FullStory dashboard → Live Sessions to confirm sessions appear. If you see no sessions after running on a device, verify that the org ID in the Custom Action matches your FullStory account and that the function is not returning an error in the device logs.

1import 'package:flutter/foundation.dart';
2import 'package:fullstory_flutter/fullstory_flutter.dart';
3
4// Custom Action: ShutdownFullStory
5// Call this when user revokes consent
6Future shutdownFullStory() async {
7  if (kIsWeb) return;
8  await FS.shutdown();
9}