ClickFunnels

Log into your ClickFunnels account. If the URL shows `myclickfunnels.com`, you are on ClickFunnels 2.0 — proceed. If you see `app.clickfunnels.com` or your own custom domain with the Classic interface, you are on Classic 1.0, and this guide does not apply — the APIs are incompatible. Note your workspace URL. It is the subdomain portion of your account URL, e.g., if your account is at `acme.myclickfunnels.com`, your workspace URL is `acme`. Every API request will be prefixed with this. To create API credentials, navigate to Settings in your ClickFunnels 2.0 workspace, then find the 'Developer Tools' or 'API' section and create a Platform Application. This gives you a client_id and client_secret. If ClickFunnels 2.0 also offers a personal Bearer token option (a simpler static token for private use), you can use that for a faster start — it avoids the full OAuth-2 flow but still must be kept server-side. For the OAuth-2 flow, you will exchange the client credentials for an access token via `POST /oauth/token` at `accounts.myclickfunnels.com`. The exact OAuth endpoints are documented in ClickFunnels 2.0's developer portal at `developers.myclickfunnels.com`. Copy the access token and refresh token into your backend environment variables — never into FlutterFlow.

Your backend proxy does two things: it holds the Bearer token (or runs OAuth-2 token refresh), and it prepends your workspace URL to every ClickFunnels API path so FlutterFlow API Calls stay simple. Create a Firebase Cloud Function (or Supabase Edge Function) with two HTTP-triggered endpoints: one for creating a contact and one for reading orders. In the function, set the ClickFunnels base URL as `https://accounts.myclickfunnels.com/api/v2/{workspaceUrl}` (replace `{workspaceUrl}` with your actual workspace subdomain, stored as an environment variable). Attach the `Authorization: Bearer YOUR_TOKEN` header server-side. For the create-contact endpoint, the function receives `{ name, email }` from FlutterFlow, then makes a `POST` to `/contacts` on the ClickFunnels API with the appropriate request body (check the ClickFunnels 2.0 API documentation for the exact field names, as contact schemas vary by workspace configuration). Return a success/failure response to FlutterFlow. For the read-orders endpoint, the function queries `GET /orders` with optional filter parameters and returns a clean array to FlutterFlow. If token refresh is needed, implement it in the function using the refresh token and update the stored access token before retrying the request.

1// Firebase Cloud Function — ClickFunnels 2.0 proxy (index.js)
2const functions = require('firebase-functions');
3const fetch = require('node-fetch');
4
5const CF_TOKEN = functions.config().clickfunnels.token;
6const CF_WORKSPACE = functions.config().clickfunnels.workspace; // e.g. 'acme'
7const CF_BASE = `https://accounts.myclickfunnels.com/api/v2/${CF_WORKSPACE}`;
8const authHeaders = {
9  'Authorization': `Bearer ${CF_TOKEN}`,
10  'Content-Type': 'application/json'
11};
12
13// Endpoint: create a contact/lead
14exports.createContact = functions.https.onRequest(async (req, res) => {
15  res.set('Access-Control-Allow-Origin', '*');
16  if (req.method === 'OPTIONS') return res.status(204).send('');
17
18  const { name, email } = req.body;
19  if (!email) return res.status(400).json({ error: 'email required' });
20
21  const r = await fetch(`${CF_BASE}/contacts`, {
22    method: 'POST',
23    headers: authHeaders,
24    body: JSON.stringify({ contact: { email, name } })
25  });
26  const data = await r.json();
27  res.status(r.status).json(data);
28});
29
30// Endpoint: list orders
31exports.getOrders = functions.https.onRequest(async (req, res) => {
32  res.set('Access-Control-Allow-Origin', '*');
33  if (req.method === 'OPTIONS') return res.status(204).send('');
34
35  const r = await fetch(`${CF_BASE}/orders?per_page=50`, { headers: authHeaders });
36  const data = await r.json();
37  res.json(data.orders || data);
38});
39

In your FlutterFlow project, click 'API Calls' in the left navigation bar. Click '+ Add' and select 'Create API Group'. Name it 'ClickFunnels' and set the base URL to the root of your Firebase Cloud Functions deployment (e.g., `https://us-central1-your-project.cloudfunctions.net`). No Authorization header is needed here — your backend proxy adds it. Click 'Save'. Add the first API Call within this group for lead capture. Click '+ Add API Call', name it 'Create Contact', set the method to POST, and set the endpoint to `/createContact`. Switch to the 'Variables' tab and add two variables: `contact_name` (String) and `contact_email` (String). Switch to the 'Body' tab, select JSON body type, and write the body as `{ "name": "{{contact_name}}", "email": "{{contact_email}}" }` — FlutterFlow will substitute the double-brace variable names at runtime. Switch to the 'Response & Test' tab, fill in test values, click 'Test', and confirm the Cloud Function returns a success response and a new contact appears in your ClickFunnels 2.0 workspace. Add a second API Call named 'Get Orders', set method to GET, endpoint to `/getOrders`. Test it and generate JSON paths from the returned order objects so you can bind fields to widgets later.

1// FlutterFlow API Call config reference
2{
3  "group_name": "ClickFunnels",
4  "base_url": "https://us-central1-YOUR_PROJECT.cloudfunctions.net",
5  "api_calls": [
6    {
7      "name": "Create Contact",
8      "method": "POST",
9      "endpoint": "/createContact",
10      "body_type": "JSON",
11      "body": { "name": "{{contact_name}}", "email": "{{contact_email}}" },
12      "variables": [
13        { "name": "contact_name", "type": "String" },
14        { "name": "contact_email", "type": "String" }
15      ]
16    },
17    {
18      "name": "Get Orders",
19      "method": "GET",
20      "endpoint": "/getOrders"
21    }
22  ]
23}
24

Navigate to the screen in your FlutterFlow project that has the lead-capture form. If you do not have one yet, add a Column containing two TextFields (one for name, one for email) and a Button. Name the TextFields' controllers clearly — FlutterFlow creates them automatically when you add a TextField; you will reference them in the action. Select the Submit/Join button and open its Actions panel by clicking the lightning bolt icon on the right. Click '+ Add Action'. Under 'Backend/Database', choose 'API Call'. Select the 'ClickFunnels' group and the 'Create Contact' API Call. For the `contact_name` variable, click the binding button and select 'Widget State → [your name TextField controller]'. For `contact_email`, bind it to the email TextField controller. After the API Call action, add a follow-up action: 'Show Snack Bar' with a message like 'You are on the list!' to confirm success to the user. To handle errors, add a conditional action that checks the API response status code — if it is not 200 or 201, show an error snack bar instead. Test the full flow in FlutterFlow's Run Mode (or on a real device): fill in the form, tap Submit, and verify the contact appears in your ClickFunnels 2.0 account under Contacts.

If your use case includes reading order data, create a new screen in FlutterFlow and add a ListView. Configure its backend query: 'API Call → ClickFunnels → Get Orders'. Inside the ListView item, add Card widgets with Text widgets bound to the JSON paths you generated — for example, order ID, total price, status, and creation date. Bind each field to the corresponding JSON path (e.g., `$.id`, `$.total`, `$.state`, `$.created_at`). For the visual polish, add a status Chip or Container whose background color is set conditionally based on the order status field: green for 'paid' or 'fulfilled', orange for 'pending', red for 'refunded'. FlutterFlow's conditional visibility and conditional value features make this straightforward. Before publishing or sharing the app, run a full end-to-end test: submit a lead from the form screen, verify it in ClickFunnels 2.0, then view the orders screen and confirm it loads real data. Pay special attention to the 404 response if the workspace URL prefix is incorrect — if orders return 404, double-check that your Cloud Function is using the exact workspace subdomain that ClickFunnels 2.0 requires, not a guess.