SurveyMonkey

Open developer.surveymonkey.com and sign in with your SurveyMonkey account. Click 'My Apps' in the top navigation, then click 'Add a New App'. Give it a name like 'FlutterFlow Dashboard', set the type to Private (for your own account's data), and agree to the terms. Once created, open the app settings and copy the Client ID and Client Secret — you will need these for the OAuth flow. Because this is a private app reading your own surveys, the simplest way to obtain an initial Bearer token is through SurveyMonkey's OAuth-2 authorization code flow. SurveyMonkey's developer docs provide a step-by-step: you visit the authorization URL in a browser (`https://api.surveymonkey.com/oauth/authorize?...`), grant access, receive a code, then exchange it for an access token via a POST to `https://api.surveymonkey.com/oauth/token`. The resulting `access_token` is what your backend proxy will use. Store the Client ID, Client Secret, and access token (plus the refresh token if issued) in your backend environment — in Firebase Functions Config or as Supabase secrets. Never paste these into FlutterFlow. Note which survey IDs you want to display; you can find a survey ID in the SurveyMonkey URL when viewing a survey in your account (`/survey/XXXXXXXX/`).

Your backend proxy is the security layer between FlutterFlow and SurveyMonkey. Deploy a Firebase Cloud Function (or Supabase Edge Function if you prefer Supabase). The function should expose at least two endpoints that FlutterFlow will call: one to return the list of surveys (`GET /surveys`), and one to return decoded survey results for a given survey ID (which internally calls both `GET /surveys/{id}/responses/bulk` and `GET /surveys/{id}/details`, joins them, and returns labelled data). For the Firebase Cloud Function approach: in the Firebase console, navigate to Functions → Get Started and create a Node.js function. Add the `node-fetch` or `axios` package to your functions/package.json, then write two HTTP-triggered functions. The first fetches your survey list and returns it to FlutterFlow. The second takes a survey ID as a query parameter, fetches both the bulk responses and the survey details in parallel, performs the ID-to-label join (match each answer's `choice_id` to the corresponding `choice` in the details questions array), and returns the combined data. Deploy with `firebase deploy --only functions`. The join step is crucial and easy to underestimate. SurveyMonkey responses contain fields like `{ "question_id": "123", "answers": [{ "choice_id": "456" }] }`. The survey details contain `{ "id": "123", "headings": [{ "heading": "How satisfied are you?" }], "answers": { "choices": [{ "id": "456", "text": "Very satisfied" }] } }`. Your backend must build a lookup map from IDs to text before returning clean data to FlutterFlow. Once the join is done server-side, FlutterFlow just binds clean label/value pairs to its widgets.

1// Firebase Cloud Function — SurveyMonkey proxy (index.js)
2const functions = require('firebase-functions');
3const fetch = require('node-fetch');
4
5const SM_TOKEN = functions.config().surveymonkey.token;
6const SM_BASE = 'https://api.surveymonkey.com/v3';
7const headers = { 'Authorization': `Bearer ${SM_TOKEN}`, 'Content-Type': 'application/json' };
8
9// Endpoint 1: list surveys
10exports.getSurveys = functions.https.onRequest(async (req, res) => {
11  res.set('Access-Control-Allow-Origin', '*');
12  const r = await fetch(`${SM_BASE}/surveys?per_page=50`, { headers });
13  const data = await r.json();
14  res.json(data.data || []);
15});
16
17// Endpoint 2: get labelled results for one survey
18exports.getSurveyResults = functions.https.onRequest(async (req, res) => {
19  res.set('Access-Control-Allow-Origin', '*');
20  const surveyId = req.query.id;
21  if (!surveyId) return res.status(400).json({ error: 'id required' });
22
23  const [detailsRes, responsesRes] = await Promise.all([
24    fetch(`${SM_BASE}/surveys/${surveyId}/details`, { headers }),
25    fetch(`${SM_BASE}/surveys/${surveyId}/responses/bulk?per_page=100`, { headers })
26  ]);
27
28  const details = await detailsRes.json();
29  const responses = await responsesRes.json();
30
31  // Build ID -> label maps from survey details
32  const questionMap = {};
33  const choiceMap = {};
34  (details.pages || []).forEach(page => {
35    (page.questions || []).forEach(q => {
36      questionMap[q.id] = q.headings?.[0]?.heading || q.id;
37      (q.answers?.choices || []).forEach(c => {
38        choiceMap[c.id] = c.text;
39      });
40    });
41  });
42
43  // Map responses to labelled data
44  const labelled = (responses.data || []).map(resp => ({
45    id: resp.id,
46    date_modified: resp.date_modified,
47    answers: resp.pages?.flatMap(p => p.questions?.map(q => ({
48      question: questionMap[q.id] || q.id,
49      answer: q.answers?.map(a => choiceMap[a.choice_id] || a.text || a.choice_id).join(', ')
50    })) || []) || []
51  }));
52
53  res.json({ survey_title: details.title, results: labelled });
54});
55

In your FlutterFlow project, click 'API Calls' in the left navigation bar. Click '+ Add' and choose 'Create API Group'. Name it 'SurveyMonkey' and set the base URL to the root domain of your Firebase Cloud Functions deployment (e.g., `https://us-central1-your-project.cloudfunctions.net`). You do not need to add any Authorization header here — your Cloud Function handles authentication internally. Click 'Save' to create the group. Now add the first API Call within the group. Click '+ Add API Call', name it 'Get Surveys', set the method to GET, and set the endpoint to `/getSurveys` (or whatever path your function uses). Switch to the 'Response & Test' tab, click 'Test', and you should see the survey list JSON. Click 'Generate JSON Paths' so FlutterFlow maps out all the fields automatically — you will see paths like `$.id`, `$.title`, `$.question_count` appear in the JSON Paths list. These are what you will bind to your widgets. Add a second API Call named 'Get Survey Results'. Set the method to GET and the endpoint to `/getSurveyResults`. Switch to the 'Variables' tab and add a variable named `survey_id`. In the endpoint field, add `?id={{survey_id}}` so the survey ID is passed as a query parameter. Head to 'Response & Test', enter a real survey ID in the variable field, click 'Test', and verify you get labelled results back. Generate JSON paths — you should see paths for `$.survey_title`, `$.results[0].id`, `$.results[0].answers[0].question`, `$.results[0].answers[0].answer`.

1// API Call config reference (for the Get Survey Results call)
2{
3  "method": "GET",
4  "endpoint": "/getSurveyResults?id={{survey_id}}",
5  "headers": {},
6  "variables": [
7    { "name": "survey_id", "type": "String" }
8  ],
9  "sample_json_paths": [
10    "$.survey_title",
11    "$.results[0].id",
12    "$.results[0].date_modified",
13    "$.results[0].answers[0].question",
14    "$.results[0].answers[0].answer"
15  ]
16}
17

On your home or dashboard screen in FlutterFlow, add a ListView widget. Open the widget's data source by clicking on the ListView, then in the right panel choose 'Backend Query' → 'API Call' → select your 'SurveyMonkey' group → 'Get Surveys'. FlutterFlow will fetch the response and let you bind individual fields from the JSON paths you generated. Inside the ListView, add a Card or Container with a Text widget for the survey title, a Text widget for the question count, and an IconButton or gesture to navigate to the results screen. For the title Text, set its value to the API response path `$.title` (from the list item). For the question count, use `$.question_count`. You can also add a small Chip or Badge widget bound to a status field if your response includes one. To navigate to the results screen when a card is tapped, use the Action Flow Editor: select the Card → click the lightning bolt Actions panel → '+ Add Action' → 'Navigate' → select your results page → pass the survey ID (`$.id` from the current list item) as a page parameter. That page parameter will become the `survey_id` variable fed into your second API Call.

Create a new screen in FlutterFlow for displaying a single survey's results. Add a page parameter called `surveyId` (String type) — this is the ID passed from the list screen when a user taps a survey card. On this screen, add a Text widget at the top bound to `$.survey_title` from the Get Survey Results API call. Below it, add a ListView for the answers list. Configure the ListView's backend query the same way: API Call → SurveyMonkey → Get Survey Results, and for the `survey_id` variable, select 'Page Parameter → surveyId'. Inside the ListView item, add two Text widgets: one bound to `$.results[0].answers[0].question` (the question label) and one to `$.results[0].answers[0].answer` (the answer text). FlutterFlow's item builder will automatically iterate over the `results` array, so each card represents one respondent's answers. For a richer view, add a FlutterFlow Chart widget (Bar or Pie). To power it, you may want to add a second backend query or use a Custom Function to aggregate the answers array into value/label pairs for the chart. This is an optional enhancement — even a simple ListView of labelled answers is already far more useful than raw ID-keyed JSON. Remember: if your SurveyMonkey plan does not support bulk export, you will receive a 403 from the bulk endpoint. In that case, update your Cloud Function to use the paginated single-response endpoint instead and loop to collect all responses before joining.