Kartra

Log in to your Kartra account and click your account name in the top-right corner to reveal the account menu. Select My Integrations. On the integrations page, look for the API section — Kartra publishes the exact API endpoint URL, your app_id, your api_key, and your api_password here. Copy all four values: the endpoint URL (it will look like `https://app.kartra.com/api`), the app_id (a short alphanumeric string), the api_key, and the api_password. These are the three secret credentials that authenticate every API request. Store them temporarily in a password manager or secure note — you will paste them into your Firebase Cloud Function's environment configuration in the next step, not directly into FlutterFlow. Also note the names and IDs of any Kartra tags you want to assign to new leads — you can find tag IDs in Kartra → Leads → Tags. You will need the exact tag name (case-sensitive) or tag ID when constructing the actions[] fields. If you plan to grant product access (for example, a free mini-course), also copy the product ID from Kartra → Products → your product → API integration details.

Open your Firebase project in the Firebase console and navigate to Cloud Functions. You will create a Node.js function that receives a simple JSON payload from FlutterFlow (lead email, name, and any tags), builds the correct application/x-www-form-urlencoded body with Kartra's bracketed fields, and POSTs it to the Kartra API. Using the `axios` or built-in `https` module works well for this. Store your three Kartra credentials as Firebase environment variables — either using `firebase functions:config:set kartra.app_id="..."` and similar commands, or using Secret Manager for better security. The function must accept a JSON body from FlutterFlow (`email`, `name`, `tags` as a comma-separated string), construct the form-encoded string manually because `axios` needs the `qs` or `URLSearchParams` helper for nested array fields, POST to the Kartra endpoint, and return the Kartra response as JSON. Enable CORS in the function so FlutterFlow's web preview can reach it. Deploy with the Firebase CLI or from the Firebase console's inline editor. Once deployed, copy the HTTPS trigger URL — that is the URL you will set as the base URL in your FlutterFlow API Group.

1// Firebase Cloud Function — index.js
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const axios = require('axios');
5const cors = require('cors')({ origin: true });
6const qs = require('qs');
7
8admin.initializeApp();
9
10exports.kartraProxy = functions.https.onRequest((req, res) => {
11  cors(req, res, async () => {
12    if (req.method !== 'POST') {
13      return res.status(405).json({ error: 'Method not allowed' });
14    }
15
16    const { email, firstName, lastName, tags } = req.body;
17
18    const kartraEndpoint = process.env.KARTRA_ENDPOINT ||
19      functions.config().kartra.endpoint;
20
21    // Build form-encoded body with bracketed actions[]
22    const body = qs.stringify({
23      'app_id': process.env.KARTRA_APP_ID || functions.config().kartra.app_id,
24      'api_key': process.env.KARTRA_API_KEY || functions.config().kartra.api_key,
25      'api_password': process.env.KARTRA_API_PASSWORD || functions.config().kartra.api_password,
26      'actions[0][cmd]': 'create_lead',
27      'actions[0][first_name]': firstName || '',
28      'actions[0][last_name]': lastName || '',
29      'actions[0][email]': email,
30      // Assign a tag as a second action if provided
31      ...(tags ? {
32        'actions[1][cmd]': 'assign_tag',
33        'actions[1][email]': email,
34        'actions[1][tag_name]': tags
35      } : {})
36    });
37
38    try {
39      const response = await axios.post(kartraEndpoint, body, {
40        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
41      });
42      res.status(200).json(response.data);
43    } catch (err) {
44      const status = err.response ? err.response.status : 500;
45      res.status(status).json({ error: err.message });
46    }
47  });
48});
49

In your FlutterFlow project, click API Calls in the left navigation panel. Click + Add and choose Create API Group. Name it KartraProxy. In the Base URL field, paste your Firebase Cloud Function's HTTPS trigger URL. Leave the Headers section empty — your Cloud Function already sets the correct Content-Type header when calling Kartra. Click Save. Now click + Add API Call inside the KartraProxy group. Name it CreateLead. Set the Method to POST. Click the Body tab and set the body type to JSON (the Cloud Function accepts JSON from FlutterFlow and converts it internally to form-encoded before forwarding to Kartra — this is simpler than trying to build form-encoded syntax in FlutterFlow). Add Variables in the Variables tab: `email` (String, required), `firstName` (String), `lastName` (String), and `tags` (String, for a tag name like 'mobile-optin'). In the Body section, set the JSON body to `{ "email": "{{email}}", "firstName": "{{firstName}}", "lastName": "{{lastName}}", "tags": "{{tags}}" }`. Click Save, then open the Response & Test tab. Fill in the test variable values with a real email address and click Test. If everything is wired correctly, you should see a Kartra success response in the response panel. Check your Kartra account under Leads to confirm the test lead was created.

1// API Call config reference (visual setup in FlutterFlow)
2{
3  "group_name": "KartraProxy",
4  "base_url": "https://us-central1-YOUR_PROJECT.cloudfunctions.net/kartraProxy",
5  "calls": [
6    {
7      "name": "CreateLead",
8      "method": "POST",
9      "body_type": "JSON",
10      "body": {
11        "email": "{{email}}",
12        "firstName": "{{firstName}}",
13        "lastName": "{{lastName}}",
14        "tags": "{{tags}}"
15      },
16      "variables": [
17        { "name": "email", "type": "String", "required": true },
18        { "name": "firstName", "type": "String" },
19        { "name": "lastName", "type": "String" },
20        { "name": "tags", "type": "String" }
21      ]
22    }
23  ]
24}

Create the lead capture screen in FlutterFlow. Add a Column widget containing: a TextField for first name (set the controller variable to `firstNameController`), a TextField for last name (`lastNameController`), a TextField for email (`emailController`), and an ElevatedButton labeled 'Sign Up' or 'Get Access'. Open the Button's Actions panel and add a Validate Form action first (to check that the email field is not empty and follows email format). Then add a Backend/API Call action: select KartraProxy → CreateLead, and map the variables: email = `emailController.text`, firstName = `firstNameController.text`, lastName = `lastNameController.text`, tags = a hard-coded string like 'mobile-optin'. After the API Call action, add a Conditional action that checks the response status: if the call succeeded (HTTP 200), show a success Snackbar ('You're in! Check your email.') and optionally navigate to a confirmation screen. If the call failed, show an error Snackbar ('Something went wrong — please try again.'). To avoid double submissions, add a Boolean App State variable `isSubmitting` and toggle it true before the API Call and false after, binding it to the button's disabled state and showing a loading spinner while true.

Kartra's API response is JSON-ish — it returns a status field and sometimes a message. In FlutterFlow's Response & Test tab for the CreateLead call, paste a sample Kartra response and click Generate JSON Paths. Common paths to extract are `$.status` (typically 'Success' or 'Error') and `$.message` for any error description. Map these with JSON Path in your API Call response configuration. In your Action Flow, after the API Call step, add a Conditional action that evaluates the JSON Path result for `status`: if it equals 'Success', proceed to show the confirmation snackbar; if it equals 'Error', show the message value in an error snackbar so the user knows what went wrong (for example, if the email is already in Kartra and the action conflicts with existing data). You can also use the `status` path to log analytics events — track 'lead_captured' in Firebase Analytics or Mixpanel whenever Kartra returns success. This gives you a reliable mobile funnel conversion event independent of Kartra's own reporting.

1// JSON Path examples for Kartra API response
2$.status       // 'Success' or 'Error'
3$.message      // error description if status is Error
4$.lead_id      // may appear in success responses (verify in your account)