Calendly

The quickest way to add Calendly to your FlutterFlow app is embedding the scheduling page in a WebView widget — no API Group, no Cloud Function, no credentials. In FlutterFlow, open the page where you want booking to appear. In the widget tree, click the + icon to add a widget, search for 'WebView', and drop it onto your canvas. In the WebView properties panel on the right, set the 'Content Type' to 'URL' and paste your Calendly link in the URL field — for example, `https://calendly.com/your-name/30min`. You can also make this dynamic by creating a page parameter called `bookingUrl` and binding the WebView URL to that parameter, so the same screen works for multiple meeting types or multiple team members. If you want booking to open in a full-screen overlay rather than an embedded panel, use the 'Launch URL' action instead: wire a button's On Tap action to Action Flow Editor → + Add Action → Utilities → Launch URL, then set the URL to your Calendly link. On mobile, this opens the device browser or the Calendly app if installed. Important limitation: the WebView embed is online-only (no offline fallback) and cannot pass booking data back into your FlutterFlow app state — you cannot read who just booked from the WebView itself. If you need post-booking confirmation inside the app, you'll need the API path in Steps 2–5.

For the data-sync path — reading scheduled events into a native FlutterFlow list — you need the Calendly v2 REST API. Start by getting a Personal Access Token (PAT): log in to Calendly, go to app.calendly.com/integrations/api_webhooks, click 'Personal Access Tokens', then 'Create new token'. Name it (e.g., 'FlutterFlow App'), copy the token immediately — you won't see it again. Now, the critical security step: this PAT must not go into a FlutterFlow API Call header, because FlutterFlow compiles to a client-side Flutter app and the header value ships inside the app bundle. Anyone who downloads your app can extract it with standard reverse-engineering tools and access your Calendly account. The solution is a Firebase Cloud Function that holds the PAT as a server-side environment variable and acts as a proxy. In your Firebase project console, go to Cloud Functions → click 'Get started' if not already enabled. You'll write a simple HTTP-triggered function that receives a request from FlutterFlow, adds the Authorization header with your PAT, calls the Calendly API, and returns the response. Deploy this function and note its HTTPS trigger URL — this is what FlutterFlow will call, not Calendly directly. Set your PAT as a Cloud Function environment variable using `firebase functions:config:set calendly.token="YOUR_PAT"` in the Firebase CLI (this keeps the token out of version control and out of the app bundle entirely).

1// Firebase Cloud Function proxy for Calendly v2 API
2// index.js — deploy with: firebase deploy --only functions
3const functions = require('firebase-functions');
4const https = require('https');
5
6exports.calendlyProxy = functions.https.onRequest((req, res) => {
7  // Allow FlutterFlow web target (CORS)
8  res.set('Access-Control-Allow-Origin', '*');
9  res.set('Access-Control-Allow-Methods', 'GET, OPTIONS');
10  res.set('Access-Control-Allow-Headers', 'Content-Type');
11  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
12
13  const token = functions.config().calendly.token;
14  const path = req.query.path || '/users/me';
15
16  const options = {
17    hostname: 'api.calendly.com',
18    path: path,
19    method: 'GET',
20    headers: {
21      'Authorization': `Bearer ${token}`,
22      'Content-Type': 'application/json'
23    }
24  };
25
26  const proxyReq = https.request(options, (proxyRes) => {
27    let data = '';
28    proxyRes.on('data', chunk => { data += chunk; });
29    proxyRes.on('end', () => {
30      res.status(proxyRes.statusCode).json(JSON.parse(data));
31    });
32  });
33  proxyReq.on('error', (e) => { res.status(500).json({ error: e.message }); });
34  proxyReq.end();
35});

Now wire FlutterFlow to your Cloud Function proxy. In the left navigation panel of FlutterFlow, click 'API Calls'. Click '+ Add' and choose 'Create API Group'. Name the group 'Calendly', set the Base URL to your Cloud Function's HTTPS trigger URL (e.g., `https://us-central1-your-project.cloudfunctions.net/calendlyProxy`). You do not need any shared group-level headers here because the Cloud Function handles the Calendly authorization internally — the token never touches the FlutterFlow side. Next, click '+ Add API Call' inside the Calendly group. Name this call 'Get Scheduled Events'. Set the Method to GET. In the Variables tab, add a variable called `path` with a default value of `?path=/scheduled_events`. This lets the proxy know which Calendly endpoint to forward to. In the API Call URL field, append `{{ path }}` so the full URL becomes your function URL plus the path variable. Now click 'Response & Test'. Add a sample Calendly scheduled_events response in the Response Body field — you can get this by running the Cloud Function in your browser. Click 'Generate JSON Paths' and FlutterFlow will analyze the JSON and suggest bindable paths like `$.collection[*].name.text`, `$.collection[*].start_time`, `$.collection[*].status`. These JSON paths are how FlutterFlow reads individual fields out of the API response to bind to widgets.

To display scheduled events in a native FlutterFlow list, you need to define a Custom Data Type that matches the fields you care about from the Calendly response. Go to Settings → Data Types → + Add Data Type. Name it 'CalendlyEvent'. Add fields: `eventName` (String), `startTime` (String), `status` (String), `inviteeName` (String). These map to Calendly's JSON structure under `collection[*]`. Now go to your screen in FlutterFlow. Add a ListView widget to the canvas. In the ListView's Backend Query section (on the right panel), select 'API Call' as the query type and pick your 'Get Scheduled Events' call. FlutterFlow will display the available JSON paths from your earlier test. Map `$.collection[*].name.text` to `eventName`, `$.collection[*].start_time` to `startTime`, and `$.collection[*].status` to `status`. Inside the ListView, add a Card widget as the list item. Inside the card, add Text widgets for the event name and start time. Bind each Text widget's value to the corresponding field on the CalendlyEvent Data Type — in the widget's properties panel, click the orange binding icon next to the value field and select the list item's field. Add conditional visibility to show a status badge only when `status == 'active'`. Your ListView will now populate with real Calendly events when the screen loads, fetched through your Cloud Function proxy. For the invitee name, add a second API Call named 'Get Invitees' that passes the event UUID — get the UUID from `$.collection[*].uri` split on the last slash. Make this a separate call triggered from the card's On Tap action, showing invitee details on a new screen.

Calendly's free plan does not support webhooks — there's no push notification when a new booking is made. The paid Standard plan ($10/user/month) adds webhook support, but webhooks also require a backend to receive them (a Cloud Function endpoint), which FlutterFlow cannot host natively. For most founders, the practical solution on the free plan is polling: refresh the events list when the user opens the screen, and add a pull-to-refresh gesture so they can manually refresh. To add pull-to-refresh in FlutterFlow, select your ListView widget and look for the 'Pull to Refresh' toggle in the properties panel — enable it. Then set the action that fires on refresh: open the Action Flow Editor for the ListView's On Pull to Refresh event, add a 'Refresh Page' or 'Re-trigger Backend Query' action. This forces the ListView to re-execute the API Call and fetch the latest events from Calendly. If you do upgrade to a paid Calendly plan and want real-time updates: set up a Calendly webhook subscription (via API: POST /webhook_subscriptions) pointing at a new Cloud Function endpoint. That function receives the booking event, writes it to your Firestore database, and your FlutterFlow app reads from Firestore in real time using FlutterFlow's native Firebase integration. This is the proper architecture for live booking notifications — Calendly pushes to Cloud Function, function writes to Firestore, app subscribes to Firestore stream. For the RapidDev note: if you're building a booking-heavy app and want the full real-time webhook architecture set up correctly, RapidDev's team builds FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.