How to Integrate Lovable with Flock

Flock provides two ways to integrate with external apps: incoming webhooks (simplest, one-way message posting to a specific channel) and bot tokens (more flexible, full API access). For most Lovable notification use cases, start with an incoming webhook — it requires no OAuth flow and works with a simple HTTP POST request. Navigate to dev.flock.com in your browser and sign in with your Flock account. In the developer portal, you can create either a Webhook or a full App. For a webhook, click 'Add Webhook' or 'Incoming Webhooks', select the channel where you want messages to appear, and Flock generates a unique webhook URL in the format https://api.flock.com/hooks/sendMessage/YOUR-UNIQUE-TOKEN. Copy this URL. For a bot token (which allows sending to multiple channels and using the full REST API), click 'Create an App' in the dev.flock.com portal. Give it a name, description, and icon. After creation, navigate to the App's bot settings to generate a bot token. The bot token is a longer string that starts with something like 'fe8e...' and is passed as the 'token' parameter in Flock API requests. The Flock API base URL is https://api.flock.com/v2/ for REST API calls, and the message sending endpoint is https://api.flock.com/v2/chat.sendMessage. Store the bot token or webhook URL immediately — you will add it to Cloud Secrets next.

Open the Cloud tab in your Lovable project by clicking the '+' icon next to the Preview panel. Navigate to the Secrets section. Add your Flock credentials based on which integration approach you chose. For the incoming webhook approach: click 'Add new secret', name it FLOCK_WEBHOOK_URL, and paste your webhook URL as the value. Click Save. This is all you need for simple single-channel message sending. For the bot token approach: add FLOCK_BOT_TOKEN with your bot token value, and FLOCK_DEFAULT_CHANNEL with the channel ID you want to send to by default. Flock channel IDs are in the format 'g:xxxxxxxx' for group channels and 'd:xxxxxxxx' for direct messages — find them in the Flock URL when viewing a channel, or via the API. Your Flock credentials provide write access to your team's messaging channels. Lovable's security layer blocks approximately 1,200 hardcoded API keys from being committed daily — always use Cloud Secrets rather than pasting credentials into React code or chat prompts.

Build the Edge Function that handles all Flock API communication. This function supports both the simple webhook approach (for posting to a single predetermined channel) and the full bot API approach (for sending to any channel, fetching channel lists, or managing contacts). The frontend calls this function whenever it needs to send a Flock notification — the function handles authentication and API formatting. Flock messages support a rich attachment format similar to Slack's message attachments: you can include a title, description, color-coded side bar, and action buttons. The Edge Function should accept a structured payload from the frontend and format it correctly for Flock's API.

1// supabase/functions/flock-proxy/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9serve(async (req) => {
10  if (req.method === 'OPTIONS') {
11    return new Response('ok', { headers: corsHeaders });
12  }
13
14  try {
15    const webhookUrl = Deno.env.get('FLOCK_WEBHOOK_URL');
16    const botToken = Deno.env.get('FLOCK_BOT_TOKEN');
17    const defaultChannel = Deno.env.get('FLOCK_DEFAULT_CHANNEL');
18
19    const { action, payload = {} } = await req.json();
20
21    switch (action) {
22      case 'send_webhook': {
23        if (!webhookUrl) throw new Error('FLOCK_WEBHOOK_URL not configured');
24        const body = typeof payload.message === 'string'
25          ? { text: payload.message }
26          : payload.message;
27        const res = await fetch(webhookUrl, {
28          method: 'POST',
29          headers: { 'Content-Type': 'application/json' },
30          body: JSON.stringify(body),
31        });
32        const data = await res.text();
33        return new Response(JSON.stringify({ result: data }), {
34          headers: { ...corsHeaders, 'Content-Type': 'application/json' },
35        });
36      }
37      case 'send_message': {
38        if (!botToken) throw new Error('FLOCK_BOT_TOKEN not configured');
39        const params = new URLSearchParams({
40          token: botToken,
41          channel: payload.channel || defaultChannel || '',
42          text: payload.text || '',
43        });
44        if (payload.attachments) {
45          params.set('attachments', JSON.stringify(payload.attachments));
46        }
47        const res = await fetch(`https://api.flock.com/v2/chat.sendMessage?${params}`);
48        const data = await res.json();
49        return new Response(JSON.stringify(data), {
50          headers: { ...corsHeaders, 'Content-Type': 'application/json' },
51        });
52      }
53      case 'send_attachment': {
54        if (!botToken) throw new Error('FLOCK_BOT_TOKEN not configured');
55        const attachment = {
56          title: payload.title || '',
57          description: payload.description || '',
58          color: payload.color || '#0084FF',
59          actions: payload.actions || [],
60        };
61        const params = new URLSearchParams({
62          token: botToken,
63          channel: payload.channel || defaultChannel || '',
64          text: payload.text || '',
65          attachments: JSON.stringify([attachment]),
66        });
67        const res = await fetch(`https://api.flock.com/v2/chat.sendMessage?${params}`);
68        const data = await res.json();
69        return new Response(JSON.stringify(data), {
70          headers: { ...corsHeaders, 'Content-Type': 'application/json' },
71        });
72      }
73      case 'list_channels': {
74        if (!botToken) throw new Error('FLOCK_BOT_TOKEN not configured');
75        const res = await fetch(`https://api.flock.com/v2/channels.list?token=${botToken}`);
76        const data = await res.json();
77        return new Response(JSON.stringify(data), {
78          headers: { ...corsHeaders, 'Content-Type': 'application/json' },
79        });
80      }
81      default:
82        return new Response(
83          JSON.stringify({ error: `Unknown action: ${action}` }),
84          { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
85        );
86    }
87  } catch (err) {
88    return new Response(
89      JSON.stringify({ error: err.message }),
90      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
91    );
92  }
93});

With the Edge Function deployed, add Flock notification calls to the meaningful events in your application. The pattern is consistent: when a significant event occurs (form submission, user signup, payment, error), call the flock-proxy Edge Function with the appropriate channel and a formatted message. The frontend component does not need to know anything about Flock's API — it just calls the Edge Function. Ask Lovable to add notifications to your existing forms and event handlers. You can also build an admin notification settings panel where you configure which events send Flock notifications and to which channels, storing this configuration in Supabase so it can be changed without code deployments.