Slack

Go to api.slack.com/apps and click 'Create New App.' Choose 'From scratch,' give your app a name (like 'Bubble Alerts'), and select your Slack workspace. After the app is created, you land on the app dashboard. In the left sidebar, click 'Incoming Webhooks.' Toggle 'Activate Incoming Webhooks' to On. Scroll down and click 'Add New Webhook to Workspace.' Slack shows a channel picker — select the channel where you want messages delivered (e.g., #general or #notifications) and click 'Allow.' Slack generates a Webhook URL that looks like: `https://hooks.slack.com/services/T0XXXXXXX/B0XXXXXXX/XXXXXXXXXXXXXXXXXXXX` Copy this URL. This is the only credential you need for the Incoming Webhook path — treat it like a password. If it is compromised, anyone can post to your Slack channel. You can regenerate it from the Incoming Webhooks page if needed.

1// Slack Incoming Webhook URL format:
2https://hooks.slack.com/services/T[WorkspaceID]/B[AppID]/[Secret]
3
4// Test in browser DevTools console or curl:
5// curl -X POST -H 'Content-Type: application/json' \
6//   --data '{"text":"Test from Bubble setup"}' \
7//   https://hooks.slack.com/services/T.../B.../XXXX

In your Bubble editor, go to Plugins → API Connector. Click 'Add another API' and name it 'Slack.' Under this API group, click 'Add another call' and name it 'Send Slack Message.' Set the method to POST. For the URL, you have two options: - Option A (simpler, one channel): paste the full webhook URL directly into the URL field. This hardcodes the channel. - Option B (more flexible): put just `https://hooks.slack.com/services/` in the URL field and use a shared header named `X-Webhook-Path` with the rest of the URL — but Bubble doesn't support URL concatenation this way cleanly. Simpler: put the full URL in the header's value and mark it Private. Best practice for Bubble: put the full webhook URL in the Base URL field of the entire Slack API group (not the individual call URL field). Mark the Base URL as Private. The individual call URL can then be empty or just `/`. This way the webhook URL never appears in the browser. Set the Content-Type header to `application/json`. In the body section, select 'JSON body' and add a single parameter `text` with type 'text' (dynamic). You can also add a `username` parameter (optional display name override) and `icon_emoji` for a custom bot avatar. Click 'Initialize call.' Enter a test message like 'Hello from Bubble setup' in the text field and run it. Check your Slack channel — the message should appear within seconds.

1// API Connector: Slack → Send Slack Message
2// Method: POST
3// URL: [Webhook URL — stored in Base URL field, marked Private]
4//
5// Headers:
6// Content-Type: application/json
7//
8// Body (JSON):
9{
10  "text": "<dynamic_message_text>",
11  "username": "Bubble App",
12  "icon_emoji": ":bubble:"
13}
14
15// Example with Block Kit (for richer messages):
16{
17  "text": "New signup: <dynamic_user_name>",
18  "blocks": [
19    {
20      "type": "section",
21      "text": {
22        "type": "mrkdwn",
23        "text": "*New user signed up*\nName: <dynamic_user_name>\nEmail: <dynamic_user_email>"
24      }
25    }
26  ]
27}

If you need to post to multiple channels dynamically, read message history, or send interactive Block Kit components, use the Slack Web API with a Bot token instead of (or in addition to) Incoming Webhooks. In your Slack app at api.slack.com/apps, go to 'OAuth & Permissions' in the left sidebar. Scroll to 'Scopes' → 'Bot Token Scopes.' Click 'Add an OAuth Scope' and add: - `chat:write` — required to post messages - `channels:read` — to list public channels (optional) - `chat:write.public` — to post to channels the bot hasn't joined (optional) After adding scopes, scroll up and click 'Install to Workspace.' Slack shows an authorization screen — click 'Allow.' After installation, copy the 'Bot User OAuth Token' that starts with `xoxb-`. Back in Bubble's API Connector, add a second call under the Slack API group (or create a new API group). Name it 'Post to Channel.' Set method to POST, URL to `https://slack.com/api/chat.postMessage`. Add a header `Authorization: Bearer xoxb-...your-token...` and mark it Private. Add Content-Type: application/json. In the JSON body, add `channel` (dynamic — the channel name or ID like '#general' or 'C0XXXXXX') and `text` (dynamic message). Optionally add `blocks` for Block Kit. Click Initialize call — Bubble will need you to fill in a real channel value (like '#general') to get a valid response for schema detection.

1// API Connector: Slack → Post to Channel
2// Method: POST
3// URL: https://slack.com/api/chat.postMessage
4//
5// Headers:
6// Authorization: Bearer xoxb-your-token-here  // mark Private
7// Content-Type: application/json
8//
9// Body (JSON):
10{
11  "channel": "<dynamic_channel_name_or_id>",
12  "text": "<dynamic_message_text>",
13  "blocks": [
14    {
15      "type": "section",
16      "text": {
17        "type": "mrkdwn",
18        "text": "<dynamic_formatted_message>"
19      }
20    }
21  ]
22}

Now connect your Slack API Connector call to a real Bubble workflow event. The most common pattern is notifying your team when something important happens in your app: a new user signs up, a payment is received, an order is placed, or a support request comes in. In the Bubble workflow editor, create or open a workflow with a triggering event. Common triggers: 'A new Thing is created' (choose your data type), 'Button is clicked' (for manual notification buttons), or 'A condition is true' (for event-based monitoring). Add an action: 'Plugins → API Connector - Slack - Send Slack Message' (or 'Post to Channel' for the Bot token path). In the text field, compose your message using dynamic expressions from the triggered data. For example: 'New signup: [User's name] ([User's email]) joined at [Current date/time formatted]'. For richer messages, use Slack's mrkdwn format (not HTML) in the text field — asterisks for bold (*bold*), underscores for italic (_italic_), backticks for code, and line breaks with \n. To run this securely server-side, wrap the Slack action in a Backend Workflow and trigger it with 'Schedule API Workflow' from the frontend. This ensures the webhook URL never appears in browser DevTools, even if you accidentally leave it non-private.

1// Workflow: Notify Slack on New User Signup
2// Trigger: When User is created
3// Action: Plugins → Slack → Send Slack Message
4//   text: "*New signup* \nName: " + User's name + "\nEmail: " + User's email
5//          + "\nSigned up at: " + Current date/time formatted as "MMM D, YYYY h:mm A"
6
7// For Block Kit (richer formatting):
8// text field: "New user: " + User's name
9// blocks field (JSON):
10[
11  {
12    "type": "section",
13    "text": {
14      "type": "mrkdwn",
15      "text": "*New signup detected*\n*Name:* " + User's name + "\n*Email:* " + User's email
16    }
17  },
18  {
19    "type": "context",
20    "elements": [{
21      "type": "plain_text",
22      "text": "Signed up " + Current date/time formatted
23    }]
24  }
25]

To receive events FROM Slack (slash commands, button interactions, event subscriptions), you need to expose a public endpoint from Bubble and configure it in your Slack app. This requires a Bubble paid plan since Backend Workflows (API Workflows) are needed. In Bubble, go to Settings → API → check 'This app exposes a Workflow API.' Copy your app's API endpoint base URL (format: `https://appname.bubbleapps.io/api/1.1/wf/`). In the Backend Workflows section of your Bubble editor, click 'Add workflow' and name it `slack_event`. In the workflow, click 'Detect data' and Bubble will listen for the next incoming request to auto-detect the schema. At the same time, in your Slack app dashboard at api.slack.com/apps → Event Subscriptions (or Slash Commands), paste your Bubble Backend Workflow URL as the endpoint: `https://appname.bubbleapps.io/api/1.1/wf/slack_event`. Slack sends a one-time URL verification challenge: a POST with `{"type": "url_verification", "challenge": "somestring"}`. Your Backend Workflow must respond with the same challenge value. In Bubble, add a 'Return data from API' action in the workflow and map the `challenge` field from the detected request data to the response body. For slash command payloads: Slack sends `application/x-www-form-urlencoded` data (not JSON). The `payload` field for interactive components is also form-encoded. In your Backend Workflow, detect these as text fields and use Bubble's 'Detect data' to parse `command`, `text`, `user_id`, and `channel_id`. For interactive button payloads, the data arrives as a URL-encoded `payload` parameter containing a JSON string — use Bubble's JSON operator to parse it.

1// Bubble Backend Workflow URL format:
2https://appname.bubbleapps.io/api/1.1/wf/slack_event
3
4// Slack sends URL verification challenge (one-time, when you register the endpoint):
5// POST body: {"type": "url_verification", "challenge": "3eZbrw1aBm2rZgRNFdxV2595E9CY3gmdALWMmHkvFXO7tYXToZi"}
6// Your Backend Workflow must return: {"challenge": "3eZbrw1aBm2rZgRNFdxV2595E9CY3gmdALWMmHkvFXO7tYXToZi"}
7
8// Slash command POST body (form-encoded, not JSON):
9// token=xxx&command=/create-task&text=Buy+groceries&user_id=U0XXXXXX&channel_id=C0XXXXXX
10
11// Detect fields in Backend Workflow:
12// command: text
13// text: text
14// user_id: text
15// channel_id: text

Before shipping your Slack integration to production, run through this checklist: 1. Privacy verification: In Bubble's Logs tab → Network logs, check that the Slack webhook URL or xoxb- token does not appear in any browser-originated request. If you see it in the network tab, you have a client-side action that needs to be moved to a Backend Workflow or have the Private checkbox enabled. 2. Error handling: Add error handling to your Slack notification workflow. If the Slack API returns an error (non-200 response or `{"ok": false}`), Bubble can log the error to a Logs data type or send an internal alert. Common errors: `invalid_payload` (malformed JSON in the body), `channel_not_found` (wrong channel name), `not_in_channel` (Bot token not added to channel). 3. Channel membership for Bot tokens: If using the xoxb- Bot token path, invite your Slack bot to the channels it needs to post in by typing `/invite @your-bot-name` in each channel. Without this, chat.postMessage returns `not_in_channel` unless you have the `chat:write.public` scope. 4. Webhook URL rotation: If your Slack Incoming Webhook URL is ever exposed, regenerate it from api.slack.com/apps → Incoming Webhooks → Revoke and regenerate. Update the URL in Bubble's API Connector. The old URL stops working immediately. RapidDev's engineers have shipped Slack integrations across dozens of Bubble apps — for complex multi-workspace or Block Kit setups, reach out at rapidevelopers.com/contact.

1// Testing the Slack webhook from Bubble Logs:
2// 1. Go to Bubble editor → Logs tab
3// 2. Run a workflow that triggers your Slack action
4// 3. In Logs → Workflow logs, find the API call entry
5// 4. Verify the Status shows 200 and the response body shows 'ok'
6
7// Bubble privacy check: open your deployed app in a browser
8// → Open DevTools → Network tab
9// → Trigger the Slack workflow from the frontend
10// → Filter by 'hooks.slack.com' or 'slack.com/api'
11// → If you see a request hitting Slack directly from the browser,
12//    your action is client-side — move it to a Backend Workflow