Slack

Go to api.slack.com/apps in your browser and click Create New App. Choose From scratch, give your app a name (e.g., 'FlutterFlow Notifier' — this is the name that appears as the message sender in Slack), and select your workspace from the dropdown. Click Create App. On the app configuration page, you'll land on the Basic Information page. Look at the left sidebar — click Incoming Webhooks. You'll see a toggle that says 'Activate Incoming Webhooks' with an Off state. Click the toggle to turn it On. The page will expand to show a Webhook URLs for Your Workspace section. Scroll to the bottom of that section and click Add New Webhook to Workspace. A Slack OAuth screen appears asking which channel this webhook should post to. Select the channel from the dropdown (e.g., #signups, #orders, or any channel you've created). Click Allow. Slack will redirect you back to the Incoming Webhooks settings page, and your new webhook URL will appear in the list — it looks like: https://hooks.slack.com/services/T.../B.../XXXXX. Click Copy next to the URL. This URL is your only credential for this integration. Treat it like a password — anyone who has this URL can post to your chosen Slack channel. Don't commit it to a public GitHub repository. However, it is safe to use directly in a FlutterFlow API Call in your private app, since the worst case of exposure is someone posting messages to your channel (not accessing your data). Test it quickly from your browser by pasting this into a tool like Hoppscotch: POST to the URL with body {"text": "Hello from FlutterFlow test"} and confirm the message appears in Slack.

In FlutterFlow, click API Calls in the left navigation panel (the two-arrows icon). Click + Add → Create API Group. Name the group Slack_Webhooks. For the Base URL, enter https://hooks.slack.com. Leave the group-level Headers empty — Slack Incoming Webhooks don't require an 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 hooks.slack.com. It will look like /services/T.../B.../XXXXX. Go to the Variables tab and add one variable: messageText (type: String). This will hold the dynamic message content your app generates. Click the Body tab. Set the body type to JSON. Enter: {"text": "{{ messageText }}"} This is all you need for a basic plain-text Slack message. Slack also supports Block Kit for richer formatting (buttons, sections, images), but for getting started, plain text is completely functional. Open the Response & Test tab. In the messageText test field, type a test notification like 'New order #1234 placed by Jane Smith for $89.99'. Click Test API Call. Slack returns 'ok' as the response body on success (a plain text string, not JSON). Check your Slack channel — the message should appear within a second or two. Save the API Group. Your Slack notification API Call is ready to use in action flows.

1{"text": "{{ messageText }}"}

The real value of the Slack integration comes from including dynamic data — the actual user name, order number, or metric value — in the notification. In FlutterFlow, you compose the message text by combining static template strings with dynamic values from your app's state or database. Open the screen or component where the Slack notification should be triggered. Select the triggering widget (a button, a form, or an event listener) and open the Actions panel. Add the Slack PostMessage API Call action, then click into the messageText variable binding. FlutterFlow's variable binding panel lets you construct a string by mixing static text and dynamic values. Use the String Combination option (sometimes labeled 'Combine Text') to build a message like: 'New signup: ' + [currentUser.displayName] + ' (' + [currentUser.email] + ') on ' + [getCurrentTimestamp] Or, if you're notifying about a Firestore document, query the document first (using a Firestore Get Document action), then reference its fields in the message composition step. For complex message templates, it can be cleaner to store the final message string in an App State variable first (using a Set App State action that combines the fields), then pass that variable as messageText to the API Call. This keeps the action flow readable. Make sure the message text has meaningful context — at minimum, who, what, and when. A Slack message that just says 'New event occurred' is not useful. Aim for 'New order #[orderNumber] from [customerName] for [total] — [timestamp]'.

Incoming Webhooks are locked to one channel. If your app needs to post to different channels based on event type — or if you need Slack's Web API features like uploading files, listing channel history, or setting message metadata — you need a Bot token and a Cloud Function proxy. In your Slack app settings (api.slack.com/apps → your app), go to OAuth & Permissions in the left sidebar. Under Bot Token Scopes, click Add an OAuth Scope and add chat:write (required for chat.postMessage). Scroll up and click Install to Workspace → Allow. You'll receive a Bot User OAuth Token starting with xoxb-. This token is a secret — do NOT paste it into your FlutterFlow API Call. Instead, store it in Firebase Functions config: firebase functions:config:set slack.bot_token="xoxb-your-token-here" and deploy the Cloud Function shown in the code block. The function accepts a POST with channelId and text and calls Slack's chat.postMessage endpoint with the token in the Authorization header. In FlutterFlow, update your API Call to point at the Cloud Function URL instead of hooks.slack.com, and add channelId as a second variable. Now you can post to any channel dynamically by passing the target channel's Slack channel ID (found in the channel's URL or right-clicking the channel in Slack → Copy Link). For most FlutterFlow notification use cases, Incoming Webhooks are entirely sufficient. The Bot token path is worth the extra setup if you need dynamic channel selection, file uploads, or reading Slack data.

1// Firebase Cloud Function: Slack Bot token proxy
2// npm install axios cors
3// firebase functions:config:set slack.bot_token="xoxb-your-token"
4
5const functions = require('firebase-functions');
6const cors = require('cors')({ origin: true });
7const axios = require('axios');
8
9const SLACK_TOKEN = functions.config().slack.bot_token;
10
11exports.sendSlackMessage = functions.https.onRequest((req, res) => {
12  cors(req, res, async () => {
13    if (req.method !== 'POST') return res.status(405).send('Method Not Allowed');
14    const { channelId, text } = req.body;
15    if (!channelId || !text) {
16      return res.status(400).json({ error: 'channelId and text are required' });
17    }
18    try {
19      const response = await axios.post(
20        'https://slack.com/api/chat.postMessage',
21        { channel: channelId, text: text },
22        {
23          headers: {
24            'Authorization': `Bearer ${SLACK_TOKEN}`,
25            'Content-Type': 'application/json'
26          }
27        }
28      );
29      if (!response.data.ok) {
30        return res.status(400).json({ error: response.data.error });
31      }
32      return res.status(200).json({ success: true, ts: response.data.ts });
33    } catch (error) {
34      return res.status(500).json({ error: error.message });
35    }
36  });
37});