Discord

Open Discord in your browser or desktop app and navigate to the server where you want to receive FlutterFlow notifications. Find the channel you want to post to — or create a new dedicated channel like #app-notifications or #new-orders. Right-click on the channel name (or click the gear icon on hover) to open Channel Settings. In the channel settings sidebar, click Integrations. On the Integrations page, click Create Webhook (or Webhooks, then New Webhook if webhooks already exist). A webhook editor appears. Click the default webhook name 'Spidey Bot' and rename it to something descriptive — this name appears as the message sender in Discord (e.g., 'FlutterFlow App', 'Order Bot', 'Alerts'). Optionally, click the avatar area to upload a profile picture for the webhook sender — this makes your notifications look polished and identifiable at a glance. Click Copy Webhook URL. The URL looks like: https://discord.com/api/webhooks/1234567890/XXXXX...XXXXX. This is your only credential — the entire URL, including the token at the end, must be kept private. Anyone who has this URL can post messages to your Discord channel. Test it quickly: in any HTTP tool (your browser console, Hoppscotch, or similar), send a POST to the URL with body {"content": "Hello from FlutterFlow test!"} and check that the message appears in Discord. Discord returns a 204 No Content response on success — not a 200 with a body, and not 'ok'. This is important to know for the FlutterFlow test step.

In FlutterFlow, click API Calls in the left navigation panel (the two-arrows icon). Click + Add → Create API Group. Name the group Discord_Webhooks. For the Base URL, enter https://discord.com. Leave the group-level Headers section empty — Discord webhooks require no Authorization header. Add a call inside the group: click + Add → Create API Call. Name it PostMessage. Set Method to POST. For the Endpoint, paste the path portion of your webhook URL — everything after discord.com. It will look like /api/webhooks/1234567890/XXXXX. Go to the Variables tab and add one variable: messageContent (type: String). This holds the message text. Click the Body tab. Set body type to JSON. Enter: {"content": "{{ messageContent }}"} Now go to the Response & Test tab. In the messageContent test field, type 'Test notification from FlutterFlow'. Click Test API Call. Discord returns a 204 No Content response, which FlutterFlow may show as an empty response body — this is correct and means success. If you see a red error, check that the webhook URL path is pasted correctly into the endpoint field (no double slashes, no missing segments). Verify the message appeared in Discord. The sender name should be the webhook name you set in Step 1. Your plain-text Discord notification is ready — this is all you need for simple alerts.

1{"content": "{{ messageContent }}"}

Discord's embeds system lets you send visually structured message cards with a colored left sidebar, title, description, URL link, timestamp, inline and block fields, thumbnail image, footer text, and an author line. Embeds transform your notifications from plain text into information-dense cards that are easy to scan in a busy Discord channel. The embed payload replaces the content field (or supplements it) with an embeds array. Here's the key rule: the color field must be a decimal integer, not a hex string. For example, the hex color #58B9FF (a nice blue) converts to decimal 5814783 — you must use 5814783, not '#58B9FF'. An easy way to convert: search 'hex to decimal converter' online, paste your hex value (without the #), and copy the decimal result. Sending a hex string causes a 400 Bad Request that Discord returns without a helpful error message, making it a frustrating and common failure. Update your FlutterFlow API Call body to use the embeds format. Add new Variables for the dynamic embed fields you want — for example, embedTitle, embedDescription, embedColor (as an integer AppState variable). Configure these variables to be bound to your app's data when the action fires. For the full embed structure, the code block below shows a well-formed example. Notice the timestamp field uses ISO 8601 format (YYYY-MM-DDTHH:MM:SSZ) — in FlutterFlow, you can generate this from a DateTime variable using the formatDate action. The thumbnail url should be a publicly accessible image URL (not a local file path or Firestore storage URL that requires auth).

1{
2  "embeds": [
3    {
4      "title": "{{ embedTitle }}",
5      "description": "{{ embedDescription }}",
6      "color": 5814783,
7      "timestamp": "{{ isoTimestamp }}",
8      "thumbnail": {
9        "url": "{{ thumbnailUrl }}"
10      },
11      "fields": [
12        {
13          "name": "Customer",
14          "value": "{{ customerName }}",
15          "inline": true
16        },
17        {
18          "name": "Amount",
19          "value": "{{ orderAmount }}",
20          "inline": true
21        }
22      ],
23      "footer": {
24        "text": "FlutterFlow App • {{ appVersion }}"
25      }
26    }
27  ]
28}

With the API Call configured and tested, connect it to real app events. Open the screen or widget where the trigger should fire — for example, a 'Submit' button on a form, a Firestore collection listener, or an on-page-load action for an event-driven flow. Select the triggering widget and open the Actions panel on the right. Click + Add Action → Backend/API Calls → API Call. Select your Discord_Webhooks group and the PostMessage call (or your embed variant). In the variable binding area, bind each variable to the appropriate app data. For messageContent on a simple text notification: use FlutterFlow's string combination to build 'New order from [customerName]: $[amount]'. For embed variables in the structured payload: bind embedTitle to a fixed string like 'New Order Placed', embedDescription to a combination of order fields, customerName to the Firestore field, and so on. Handle the response: add a conditional action after the API Call — if Status Code is 204, show a Snackbar 'Notification sent to Discord'. For any other status, show an error Snackbar. Note that 204 means success even though there's no response body. For rate-limit awareness: if your app might trigger many Discord notifications in quick succession (e.g., a batch operation that processes many records), add a Wait action (500-1000ms) between successive Discord calls in a loop. Discord's webhook limit is approximately 5 requests per 2 seconds per webhook URL — exceeding this returns a 429 response with a retry_after value in the body.

The webhook-only approach is one-way: your app posts to Discord, but users can't reply or interact with the messages in a way that your app sees. If you need two-way interaction — responding to button clicks on embed messages, processing slash commands, or reading channel messages — you need a Discord Bot running on a server. FlutterFlow apps cannot host a persistent server process (there's no server in a Flutter app), so Discord's Gateway (WebSocket) connection must run in a Firebase Cloud Function or a separate Node.js host. Create a Discord application and Bot at discord.com/developers/applications, enable the MESSAGE_CONTENT and SERVER_MEMBERS intents, and copy the Bot token. Deploy a Cloud Function that uses the discord.js library (or direct REST calls) to handle Discord interactions. The Bot token is a secret — put it in Firebase Functions config, never in FlutterFlow. The Cloud Function listens for Discord interaction events (sent via HTTP POST to a registered interactions endpoint URL), processes them, writes results to Firestore, and your FlutterFlow app reads Firestore in real time. For most FlutterFlow founders, the webhook-only approach covers 90% of use cases. The Bot path is worth the additional complexity only if your app genuinely needs to respond to Discord user actions — like a community moderation tool or a game with Discord leaderboard interaction.

1// Minimal Discord interactions endpoint (Cloud Function)
2// Registers as the interactions endpoint in Discord Developer Portal
3// npm install discord-interactions axios cors
4
5const functions = require('firebase-functions');
6const { InteractionType, InteractionResponseType, verifyKeyMiddleware } = require('discord-interactions');
7const admin = require('firebase-admin');
8cors = require('cors')({ origin: true });
9
10admin.initializeApp();
11const db = admin.firestore();
12
13const DISCORD_PUBLIC_KEY = functions.config().discord.public_key;
14// Set with: firebase functions:config:set discord.public_key="YOUR_APP_PUBLIC_KEY"
15
16exports.discordInteractions = functions.https.onRequest((req, res) => {
17  // Discord sends a PING to verify the endpoint on first registration
18  if (req.body.type === InteractionType.PING) {
19    return res.status(200).json({ type: InteractionResponseType.PONG });
20  }
21  // Write interaction data to Firestore for the FlutterFlow app to read
22  if (req.body.type === InteractionType.APPLICATION_COMMAND) {
23    const interaction = req.body;
24    db.collection('discord_interactions').add({
25      commandName: interaction.data.name,
26      userId: interaction.member?.user?.id,
27      timestamp: admin.firestore.FieldValue.serverTimestamp()
28    });
29    return res.status(200).json({
30      type: InteractionResponseType.CHANNEL_MESSAGE_WITH_SOURCE,
31      data: { content: 'Command received! Check the app.' }
32    });
33  }
34  return res.status(400).send('Unknown interaction type');
35});