Freshdesk

Log in to your Freshdesk account. Click your avatar icon in the top-right corner and select Profile settings from the dropdown. On the right side of the Profile settings page, you will see a section called Your API Key with a long alphanumeric string. Click the copy icon to copy your API key. Now you need to compute the base64-encoded value for the Authorization header. Freshdesk Basic Auth is unusual: the API key is the username and the literal character X (uppercase, single character) is the password — not your Freshdesk password, not blank, but the specific character X. To compute the encoded value, take your API key and append :X to it. For example, if your API key is abc123def456, the string to encode is abc123def456:X. You can encode this at any online base64 encoder (search for 'base64 encode online'), or in a Mac/Linux terminal run: echo -n 'abc123def456:X' | base64. The result will be something like YWJjMTIzZGVmNDU2Olg=. You will use this encoded value in the next step. Keep a note of both your raw API key (for the Cloud Function) and the encoded value (for the direct API Group header). Verify the credential works by pasting the following into your browser address bar and checking for a JSON tickets response — you cannot use Basic Auth directly in a browser address bar, so use a tool like Postman, Insomnia, or the curl command: curl -u {APIKEY}:X https://{subdomain}.freshdesk.com/api/v2/tickets

1# Compute the Basic Auth header value (Mac/Linux terminal)
2echo -n 'YOUR_API_KEY:X' | base64
3
4# Result example: WU9VUl9BUElfS0VZOlg=
5# Use in Authorization header as: Basic WU9VUl9BUElfS0VZOlg=
6
7# Test the credential (replace values):
8# curl -u YOUR_API_KEY:X https://yoursubdomain.freshdesk.com/api/v2/tickets

Open your FlutterFlow project. In the left navigation bar, click API Calls. Click + Add and select Create API Group. Name it Freshdesk. Set the Base URL to https://{yoursubdomain}.freshdesk.com/api/v2, replacing {yoursubdomain} with your actual Freshdesk subdomain. For example, if your Freshdesk URL is https://acmesupport.freshdesk.com, the base URL is https://acmesupport.freshdesk.com/api/v2. Now add a shared header to the API Group. Under the Headers section, click + Add Header. Set the key to Authorization and the value to Basic {your_encoded_string}, where {your_encoded_string} is the base64 value you computed in Step 1 — for example, Basic WU9VUl9BUElfS0VZOlg=. Add a second shared header: key Content-Type, value application/json. Click Save to save the API Group. All API Calls you add inside this group will automatically include the Authorization and Content-Type headers on every request. For a demo or internal tool with a limited audience, this shared header approach is acceptable. For a shipped app, you will replace this with a Cloud Function proxy in Step 5 — the encoded credential should not live inside the compiled FlutterFlow binary.

Inside the Freshdesk API Group, click + Add API Call. Name it GetTickets. Set the method to GET and the endpoint to /tickets. Click the Variables tab and add the following variables: page (String, default '1') and per_page (String, default '30'). Back in the endpoint, update it to /tickets?include=requester,stats&per_page={{per_page}}&page={{page}}. The include=requester,stats parameter is particularly important: it tells Freshdesk to embed the requester's name and email alongside each ticket, and to include SLA statistics like due_by and first_responded_at — all in a single API call. Without this include parameter, you would need a separate API call per ticket to fetch requester details, which would quickly exhaust your 400 calls/min budget. Note: Freshdesk defaults to returning 30 tickets per page. The maximum per_page value is 100. Set per_page to 100 in your app if you need to load more tickets per call. Click Response & Test. In the test form, leave the defaults, then click Test API. You should see a JSON array of ticket objects. Click Generate JSON Paths to auto-create path variables. Key paths to verify: $[:].id, $[:].subject, $[:].status, $[:].priority, $[:].requester.name, $[:].requester.email, $[:].stats.agent_responded_at, $[:].due_by. Status codes in Freshdesk: 2=Open, 3=Pending, 4=Resolved, 5=Closed. Priority codes: 1=Low, 2=Medium, 3=High, 4=Urgent. You will need to map these integers to display labels in your FlutterFlow widget using a conditional expression.

1{
2  "group": "Freshdesk",
3  "name": "GetTickets",
4  "method": "GET",
5  "endpoint": "/tickets?include=requester,stats&per_page={{per_page}}&page={{page}}",
6  "variables": [
7    { "name": "per_page", "type": "String", "default": "30" },
8    { "name": "page", "type": "String", "default": "1" }
9  ],
10  "response_json_paths": [
11    "$[:].id",
12    "$[:].subject",
13    "$[:].status",
14    "$[:].priority",
15    "$[:].requester.name",
16    "$[:].requester.email",
17    "$[:].due_by",
18    "$[:].stats.agent_responded_at"
19  ]
20}

Open the screen in FlutterFlow where you want to display tickets. Add a Column containing a Row for filter chips (Open, Pending, Resolved) at the top, then a ListView below. Add a Page State variable called selectedStatus (Integer, default 2 for Open). Select the ListView widget and open its Backend Query. Click + Add Query → Freshdesk → GetTickets. Set per_page to '50' and page to '1'. Enable Trigger on Page Load. Inside the ListView's child template, add a Card widget. Inside the Card, add a Column with four Text widgets: one for $[:].subject bound to GetTickets.subject, one for $[:].requester.name, one for $[:].due_by (format the date string using FlutterFlow's date formatting function), and one for a status label. For the status label, use a Conditional Value: if status equals 2 display 'Open', if 3 display 'Pending', if 4 display 'Resolved'. Tint the label's background color accordingly — orange for Open, grey for Pending, green for Resolved. Add a priority badge in the corner of each card with a similar conditional: 1=Low (grey), 2=Medium (blue), 3=High (orange), 4=Urgent (red). For the filter chips at the top, wire each chip's tap action to set selectedStatus Page State to the corresponding integer, then re-trigger the GetTickets query. If the ListView shows no items but the API Call Test returns data, check that your JSON path starts with $[:]. (array root path) rather than $.data[:]. — Freshdesk returns a root-level array, not a data wrapper.

For any write operation — updating status, changing priority, or adding notes — the Authorization header credential must not live inside the compiled FlutterFlow app. The solution is a Firebase Cloud Function proxy that holds the credential server-side. Here is the full pattern: deploy the Cloud Function below to your Firebase project. It accepts a ticket ID, field updates, and an optional note body in the request body, then calls Freshdesk's API server-side using the stored credential. Once deployed (you will get a URL like https://us-central1-{project}.cloudfunctions.net/freshdeskProxy), create a new API Group in FlutterFlow named FreshdeskProxy with that function URL as the base URL. Add a PUT API Call named UpdateTicket with endpoint / (the function handles routing) and body variables for ticket_id (Integer), status (Integer, optional), priority (Integer, optional). Add a separate POST API Call named AddNote with body variables for ticket_id and body text and private (Boolean). In your app, wire the status-update button's action flow to FreshdeskProxy → UpdateTicket with the ticket's ID and the new status integer. Wire a private-note form's submit button to FreshdeskProxy → AddNote. The response structure mirrors Freshdesk's response so your existing JSON paths work for displaying the updated ticket. Note on rate limits: Freshdesk enforces 400 API calls per minute per account. For a small team of 3-5 agents refreshing the app every 30 seconds, this budget is easily exceeded. Add a minimum refresh interval of 60 seconds in your app and avoid triggering GetTickets queries on every scroll event.

1// Firebase Cloud Function: functions/index.js
2const functions = require('firebase-functions');
3const axios = require('axios');
4
5const FRESHDESK_KEY = functions.config().freshdesk.apikey;
6const FRESHDESK_DOMAIN = functions.config().freshdesk.subdomain;
7const BASE_URL = `https://${FRESHDESK_DOMAIN}.freshdesk.com/api/v2`;
8const AUTH_HEADER = 'Basic ' + Buffer.from(`${FRESHDESK_KEY}:X`).toString('base64');
9
10exports.freshdeskProxy = functions.https.onRequest(async (req, res) => {
11  res.set('Access-Control-Allow-Origin', '*');
12  if (req.method === 'OPTIONS') {
13    res.set('Access-Control-Allow-Methods', 'GET, PUT, POST');
14    res.set('Access-Control-Allow-Headers', 'Content-Type');
15    return res.status(204).send('');
16  }
17
18  const { action, ticket_id, status, priority, note_body, note_private } = req.body;
19  const headers = {
20    Authorization: AUTH_HEADER,
21    'Content-Type': 'application/json'
22  };
23
24  try {
25    if (action === 'update_ticket') {
26      const body = {};
27      if (status !== undefined) body.status = status;
28      if (priority !== undefined) body.priority = priority;
29      const r = await axios.put(`${BASE_URL}/tickets/${ticket_id}`, body, { headers });
30      return res.json(r.data);
31    }
32    if (action === 'add_note') {
33      const r = await axios.post(`${BASE_URL}/tickets/${ticket_id}/notes`, {
34        body: note_body,
35        private: note_private ?? true
36      }, { headers });
37      return res.json(r.data);
38    }
39    return res.status(400).json({ error: 'Unknown action' });
40  } catch (err) {
41    return res.status(err.response?.status || 500).json({ error: err.message });
42  }
43});
44
45// Deploy:
46// firebase functions:config:set freshdesk.apikey="YOUR_API_KEY" freshdesk.subdomain="yoursubdomain"
47// firebase deploy --only functions
48// If you'd prefer someone else handle this setup, RapidDev builds FlutterFlow integrations
49// like this every week — free scoping call at rapidevelopers.com/contact