Flock

Open your browser and go to `https://dev.flock.com`. Sign in with your Flock account. Click 'Create App'. Give the app a name — for example, 'Bubble Notifications'. This is what will appear as the sender name when messages arrive in Flock. **For incoming webhooks (Tier 1):** In your new app's settings, click 'Incoming Webhooks' in the left menu. Click 'New Webhook'. Select the Flock channel where messages should appear (e.g., #alerts). Click 'Create'. Flock generates a webhook URL in the format: `https://api.flock.com/hooks/sendMessage/XXXXXXXXXX`. Copy this URL — it contains the authentication token in the path and must be treated as a secret. **For the Bot API (Tier 2):** In your Flock App settings, click 'Bots' in the left menu. Click 'Create Bot'. Give the bot a name and optionally an avatar. After saving, Flock shows you a permanent bot token — a long string starting with something like `flock-bot-...`. Copy this token. It does not expire unless you revoke it in the Flock developer portal. Before the bot can post to a Flock channel, a workspace admin must invite the bot by its name into that channel. In Flock, open the channel → click the Members icon → Add Member → search for your bot's name → invite it. Do this for every channel the bot needs to reach.

In your Bubble editor, open the Plugins tab. Click 'Add plugins', search for 'API Connector' (by Bubble), and install it. It is free. Once installed, click the API Connector in the Plugins panel and then click 'Add another API'. Name the group 'Flock'. **Incoming webhook configuration:** Click 'Add another call' inside the Flock group. Name it 'Send Notification'. Set method to POST. In the URL field, enter the webhook URL directly or as a dynamic private parameter (see Step 3 of the Chanty guide pattern for the Option A/B decision). Set the Content-Type header to `application/json`. For the body, add a parameter named `text`. A minimal body looks like: ```json { "text": "[text]" } ``` Flock also supports the `channel` parameter in the webhook body to override the default channel, using the format `g:channelId` (for group channels) or `u:userId` (for direct messages). **Bot API configuration:** Click 'Add another call' inside the Flock group. Name it 'Send Message'. Set method to POST. URL: `https://api.flock.com/v2/chat.sendMessage`. Add a shared header at the group level: - Key: `Authorization` - Value: `Bearer [bot_token]` - Check the 'Private' checkbox Set Content-Type to `application/json`. The body for a simple text message: ```json { "to": "[channel_id]", "text": "[message_text]" } ``` For rich attachments, the body expands to include an `attachments` array (see Step 4 for the full format). After configuring the call, click 'Initialize call'. Bubble needs a real successful HTTP response to detect the response schema and confirm the call works. For the webhook path: temporarily paste the actual webhook URL and a test message text, then click Initialize. A successful Flock webhook response returns HTTP 200. For the Bot API: ensure the bot token is in the header and the `to` field contains a valid channel ID, then Initialize. After initialization, you can switch URL or parameters back to dynamic references.

1{
2  "webhook_call": {
3    "method": "POST",
4    "url": "https://api.flock.com/hooks/sendMessage/<private-token-in-url>",
5    "headers": {
6      "Content-Type": "application/json"
7    },
8    "body": {
9      "text": "<dynamic message text>"
10    }
11  },
12  "bot_api_call": {
13    "method": "POST",
14    "url": "https://api.flock.com/v2/chat.sendMessage",
15    "headers": {
16      "Authorization": "Bearer <private-bot-token>",
17      "Content-Type": "application/json"
18    },
19    "body": {
20      "to": "<dynamic channel_id>",
21      "text": "<dynamic message text>"
22    }
23  }
24}

One of the Bot API's key advantages over incoming webhooks is the ability to send to different Flock channels dynamically — your Bubble app logic can decide at runtime which channel should receive a message. To do this, you need to know each channel's ID (Flock channels use a string ID like `g:xxxxxxxxxxxx`). Add another call inside your Flock API Connector group. Name it 'List Channels'. Set method to GET. URL: `https://api.flock.com/v2/channels.list`. The shared Authorization header applies automatically. Click Initialize call — Flock will return a list of channels the bot has joined, each with a `uid` (the channel ID) and `name`. Now create a Bubble Option Set to store these IDs. Go to Data → Option Sets → click the plus icon to add a new Option Set. Name it 'Flock Channels'. Add attributes: 'Channel Name' (text) and 'Channel ID' (text). Add one option per channel: name it (e.g., 'Sales', 'Ops', 'Errors') and paste the corresponding `uid` from the API response. In your Backend Workflow's 'Send Message' action, set the `to` body parameter to reference: `Current option's Channel ID` (using Bubble's Option Sets dropdown in the dynamic data selector). Now your Bubble app can pass a different Flock Channel option depending on what event triggered the workflow — same Bot API call, different destination channel. Note: if you later add the bot to new Flock channels, re-run the 'List Channels' call in Bubble (or check the Flock response in Logs tab) and manually add the new channel IDs to your Option Set.

1{
2  "method": "GET",
3  "url": "https://api.flock.com/v2/channels.list",
4  "headers": {
5    "Authorization": "Bearer <private-bot-token>"
6  }
7}

Flock's Bot API supports an `attachments` array in the message body that renders a visually structured card: a colored vertical sidebar, a title, description text, and optional action buttons. This is significantly more informative than plain text for operational alerts. The attachment format is similar to Slack's legacy attachment structure but simplified. Add a 'Send Rich Alert' call in your API Connector (or update the 'Send Message' call with the expanded body): ```json { "to": "[channel_id]", "text": "[header text]", "attachments": [ { "title": "[card title]", "description": "[card body text]", "color": "[hex color]" } ] } ``` The `color` field is a hex code like `#36a64f` (green for success) or `#e74c3c` (red for errors). Choose colors that match the severity or category of the notification — your team will learn to read color at a glance. For action buttons (links to external URLs from within the Flock card), add a `buttons` array inside the attachment object: ```json { "title": "New Payment Received", "description": "Customer: John Smith\nAmount: $299\nPlan: Pro", "color": "#36a64f", "buttons": [ { "name": "View in Bubble", "action_type": "open_url", "url": "https://yourapp.bubbleapps.io/admin/orders/[order_id]" } ] } ``` In Bubble, you build this body dynamically using the 'Body parameters' section of the API call — you cannot pass nested JSON objects directly as parameters in the standard API Connector UI. Instead, mark the entire body as 'Raw request body' (check the 'Send body as raw text / form data' option if available in your Bubble version) and construct the JSON string using Bubble's `:formatted as text` expression with dynamic values inserted. RapidDev's team regularly sets up Bot API integrations like this with dynamic channel routing and rich cards for Bubble clients — if you want a free scoping call, visit rapidevelopers.com/contact.

1{
2  "to": "g:CHANNEL_ID_HERE",
3  "text": "*New Payment Received*",
4  "attachments": [
5    {
6      "title": "Payment Confirmed",
7      "description": "Customer: [customer_name]\nAmount: $[amount]\nPlan: [plan_name]",
8      "color": "#36a64f",
9      "buttons": [
10        {
11          "name": "View Order",
12          "action_type": "open_url",
13          "url": "https://yourapp.bubbleapps.io/order/[order_id]"
14        }
15      ]
16    }
17  ]
18}

With the API call configured, build the server-side workflow that wraps it. In Bubble's Workflow tab, click 'Backend Workflows'. If this section is missing, your app is on the Free plan and you need to upgrade to Starter ($32/month). Click 'New API Workflow'. Name it `notify_flock`. Inside the workflow, add an action: Plugins → Flock → Send Notification (webhook) or Send Message (Bot API). Fill in the dynamic parameters — for example, the `text` field might be composed from Bubble's dynamic data: `'New signup: ' + Triggering User's name + ' | ' + Triggering User's email + ' | Plan: ' + Triggering User's plan` For Bot API with dynamic channel selection, add a parameter to the Backend Workflow definition (e.g., 'target_channel' of type Flock Channels option). The calling workflow passes in the appropriate option, and the Backend Workflow forwards the Channel ID to the API call's `to` field. Now connect the Backend Workflow to your app events. In the client-side Workflow editor, at the end of the relevant workflow (button click, form submission, database change), add action 'Schedule API Workflow' → select `notify_flock` → set When to 'Current date/time' → fill in any parameters. For scheduled alerts (daily digest, hourly health check), go back to Backend Workflows and click 'Add a recurring event'. Set the frequency (e.g., every day at 8:00 AM) and select the `notify_flock` workflow as the action. Each 'Schedule API Workflow' action consumes Workload Units (WU). For high-frequency Bubble apps, avoid triggering `notify_flock` inside loops over large data sets. Instead, aggregate the information into a single message first, then call `notify_flock` once.

If you want Flock user actions to trigger Bubble workflows — a message containing a keyword, a slash command, a bot mention — you need to configure Flock's outgoing webhooks to point to a Bubble Backend Workflow endpoint. In Bubble, go to the Workflow tab → Backend Workflows. Click 'New API Workflow'. Name it `receive_flock_event`. Check 'Expose as a public API endpoint' (this is the Backend Workflow / API Workflow option). In the 'Detect request data' section, send a test event from Flock (configure the outgoing webhook first, trigger it, then click 'Detect' to let Bubble parse the incoming JSON body). Flock sends fields like `token`, `teamDomain`, `channelId`, `userId`, `text`, `triggerWord`, and `timestamp`. After detecting the schema, build workflow actions inside `receive_flock_event`: create a Bubble record, send an email, update a user's status, or call another API — anything your app needs to do in response to a Flock message. To register the endpoint, copy the Backend Workflow's public URL from Bubble (it looks like `https://yourapp.bubbleapps.io/api/1.1/wf/receive_flock_event`). In your Flock App at dev.flock.com, go to 'Outgoing Webhooks' or 'Slash Commands' (depending on the trigger type) and paste the Bubble URL as the target endpoint. Save and test by typing the trigger word or slash command in a Flock channel. Note: Backend Workflow public endpoints require Bubble Starter plan ($32/month). Also note the endpoint URL Bubble generates for testing includes `/initialize` at the end — use the URL without `/initialize` for the Flock webhook registration.

1{
2  "flock_outgoing_webhook_payload_example": {
3    "token": "<webhook-verification-token>",
4    "teamDomain": "yourteam",
5    "channelId": "g:XXXXXXXXXX",
6    "userId": "u:XXXXXXXXXX",
7    "userName": "john.doe",
8    "text": "/status customer@example.com",
9    "triggerWord": "/status",
10    "timestamp": 1720000000
11  }
12}