How to Integrate Retool with Flock

Log into your Flock account at dev.flock.com or via the Flock application. Navigate to the Flock App Directory by clicking on your workspace name in the top-left, then selecting 'App & Integrations' or going directly to dev.flock.com. Search for 'Incoming Webhooks' in the app directory and click on it. Click 'Add to Flock' to add the Incoming Webhooks integration to your workspace. In the configuration screen, select the channel where you want to post messages using the channel dropdown — this determines which Flock channel receives messages sent to this webhook. Give the webhook a descriptive name like 'Retool Alerts' and optionally upload a custom icon. Click 'Save' to create the webhook. Flock generates a unique webhook URL in the format 'https://api.flock.com/hooks/sendMessage/TOKEN_HERE'. Copy this complete URL — it includes the authentication token and is everything needed to post messages. If you need to post to multiple channels, create separate webhooks for each channel and store each URL separately.

In Retool, navigate to the Resources tab and click 'Create New'. Select 'REST API' from the resource type list. For the Incoming Webhook approach, set the Base URL to 'https://api.flock.com'. Under Authentication, select 'None' — the webhook URL itself contains the authentication token as a path segment. Under Headers, add 'Content-Type: application/json'. Click 'Save Resource' and name it 'Flock'. Next, store your webhook configuration in Retool Settings → Configuration Variables: add 'FLOCK_WEBHOOK_TOKEN' with the token portion of your webhook URL (the part after /hooks/sendMessage/), and mark it as secret. If you are using the Flock Bot API instead of Incoming Webhooks, store your OAuth access token as 'FLOCK_BOT_TOKEN'. For the Bot API, add an 'Authorization: Bearer {{ retoolContext.configVars.FLOCK_BOT_TOKEN }}' header to the resource configuration. The complete webhook path for queries will be '/hooks/sendMessage/{{ retoolContext.configVars.FLOCK_WEBHOOK_TOKEN }}'.

1{
2  "Base URL": "https://api.flock.com",
3  "Headers": {
4    "Content-Type": "application/json"
5  },
6  "Note": "Webhook token included in path: /hooks/sendMessage/{token}. Bot API adds Authorization: Bearer {token} header."
7}

Create a new query using the Flock resource to post a message via the Incoming Webhook. Set the method to POST and the path to '/hooks/sendMessage/{{ retoolContext.configVars.FLOCK_WEBHOOK_TOKEN }}'. Set the body type to JSON. The Flock Incoming Webhook accepts a JSON body with a 'text' field for the message content. Flock supports basic markdown-like formatting: use *text* for bold, _text_ for italic, and <flock://user/USER_ID|@Username> for user mentions. The 'text' field supports newlines using for multi-line messages. Test this query first with a simple message — POST a body of '{ "text": "Test message from Retool" }' to verify the webhook is working and messages appear in the correct Flock channel. Once the basic connection works, add dynamic content by binding the message text to form inputs or query results using Retool's {{ }} expression syntax in the query body.

1// POST /hooks/sendMessage/{webhook_token}
2// Body (JSON):
3{
4  "text": "{{ messageInput.value || 'Test message from Retool' }}"
5}

Flock's Incoming Webhook supports richer message formatting via the 'attachments' array in the JSON body. Attachments allow adding a colored sidebar, title with link, description text, and structured views with multiple fields. This is ideal for structured alerts where you want to show multiple data points clearly. The attachment object accepts 'color' (hex color code for the left border — use #FF0000 for red/critical, #FF8C00 for orange/warning, #00AA00 for green/success), 'title' (link text), 'description' (body text), and 'views' for structured field display. Build a JavaScript query that constructs the full message payload by combining static template structure with dynamic values from form inputs or other query results. The dynamic content — incident severity, affected system, timestamp — comes from Retool component values bound via {{ }} expressions in the query body JSON.

1// POST /hooks/sendMessage/{webhook_token}
2// Body (JSON) for a rich incident alert:
3{
4  "text": "🚨 Incident Alert: {{ incidentTitle.value }}",
5  "attachments": [
6    {
7      "color": "{{ severitySelect.value === 'P1' ? '#FF0000' : severitySelect.value === 'P2' ? '#FF8C00' : '#FFCC00' }}",
8      "title": "{{ incidentTitle.value }}",
9      "description": "{{ incidentDescription.value }}",
10      "views": {
11        "widget": [
12          {
13            "type": "text",
14            "text": "*Severity:* {{ severitySelect.value }}\n*System:* {{ systemSelect.value }}\n*Reported by:* {{ current_user.fullName }}\n*Time:* {{ new Date().toLocaleString() }}"
15          }
16        ]
17      }
18    }
19  ]
20}

Create a Retool Workflow to automate daily or weekly Flock digest messages without manual intervention. Navigate to Retool Workflows and click 'Create Workflow'. Add a Schedule trigger and set the cron expression — for a daily 9 AM message, use '0 9 * * 1-5' (weekdays at 9 AM UTC, or adjust for your timezone). Add Resource Query blocks to fetch the metrics you want to include: yesterday's order count and revenue from your database, active support ticket counts from your ticketing tool, or any other KPIs from connected Resources. Add a JavaScript Code block to format these metrics into a Flock message payload, calculating percentage changes versus the previous period and constructing the attachment JSON. Add a final Resource Query block targeting the Flock resource with POST to the webhook path, using the formatted payload from the JavaScript block as the body. Click 'Publish' to activate the Workflow. The digest will post automatically on schedule without any manual trigger.

1// JavaScript block: format daily digest message
2const ordersData = getOrders.data;
3const ticketsData = getTickets.data;
4
5const todayOrders = ordersData.today_count || 0;
6const yesterdayOrders = ordersData.yesterday_count || 0;
7const orderChange = yesterdayOrders > 0
8  ? Math.round(((todayOrders - yesterdayOrders) / yesterdayOrders) * 100)
9  : 0;
10const changeEmoji = orderChange >= 0 ? '📈' : '📉';
11
12return {
13  text: `📊 Daily Ops Digest — ${new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}`,
14  attachments: [
15    {
16      color: '#0066CC',
17      description: [
18        `*Orders:* ${todayOrders} ${changeEmoji} (${orderChange > 0 ? '+' : ''}${orderChange}% vs yesterday)`,
19        `*Open Tickets:* ${ticketsData.open_count || 0}`,
20        `*Resolved Today:* ${ticketsData.resolved_today || 0}`
21      ].join('\n')
22    }
23  ]
24};