How to Integrate Lovable with Agorapulse

Navigate to developers.agorapulse.com and sign in with your Agorapulse account. Go to the Applications section and click 'Create Application'. Fill in the application name, description, and redirect URI. Use your deployed Lovable app URL followed by /auth/agorapulse/callback. Agorapulse will create the application and provide a Client ID and Client Secret. Note both values. Agorapulse's API uses OAuth2 with the authorization code flow for user-level access — you will need to go through the authorization flow to get an access token for your Agorapulse account. To generate an access token, construct the authorization URL using your client ID and redirect URI: https://app.agorapulse.com/auth/authorize?client_id={CLIENT_ID}&redirect_uri={REDIRECT_URI}&response_type=code&scope=read write Visit this URL in your browser while logged into Agorapulse. Authorize the application. Agorapulse will redirect to your callback URL with a code parameter. Exchange this code for an access token by making a POST request to https://app.agorapulse.com/auth/token with your client ID, client secret, code, and redirect URI. Agorapulse access tokens have a configurable expiry — check the expires_in field in the token response. Store the refresh token if provided so the Edge Function can renew credentials automatically. Note that API access requires a paid Agorapulse plan (Standard or above) — free or trial accounts do not have API access.

Open your Lovable project and navigate to the Cloud panel via the '+' icon next to Preview. Click the Secrets tab and add the following: - Name: AGORAPULSE_ACCESS_TOKEN — Value: your OAuth2 access token - Name: AGORAPULSE_REFRESH_TOKEN — Value: your refresh token (if provided) - Name: AGORAPULSE_CLIENT_ID — Value: your application Client ID - Name: AGORAPULSE_CLIENT_SECRET — Value: your application Client Secret The access token is the primary credential used for API calls. The client credentials and refresh token enable automatic token renewal. Agorapulse inbox data includes social media messages from your customers — this is personal communication data that deserves strong security handling. Never paste these credentials into Lovable's chat or into source code. Lovable's security system blocks approximately 1,200 hardcoded API keys daily, but the correct pattern is always to use Cloud → Secrets.

Create a Supabase Edge Function that proxies Agorapulse API requests. Agorapulse's API base URL is https://app.agorapulse.com/api/v1/ and uses Authorization: Bearer {token} on all requests. The Edge Function handles four core actions: profiles (list connected social accounts), inbox (retrieve inbox items with optional filters for status and profile), publish (create a scheduled or immediate post), and report (fetch analytics for a profile and date range). Agorapulse returns inbox items with a status field: pending (not yet handled), in_progress (being handled), or done (resolved). Your dashboard can filter by status to show only pending items, helping teams focus on unanswered messages.

1// supabase/functions/agorapulse-api/index.ts
2const AGORAPULSE_BASE = 'https://app.agorapulse.com/api/v1';
3
4Deno.serve(async (req) => {
5  if (req.method === 'OPTIONS') {
6    return new Response(null, {
7      headers: {
8        'Access-Control-Allow-Origin': '*',
9        'Access-Control-Allow-Methods': 'POST, OPTIONS',
10        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
11      },
12    });
13  }
14
15  const accessToken = Deno.env.get('AGORAPULSE_ACCESS_TOKEN');
16  if (!accessToken) {
17    return new Response(JSON.stringify({ error: 'Agorapulse token not configured' }), {
18      status: 500,
19      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
20    });
21  }
22
23  const headers = {
24    'Authorization': `Bearer ${accessToken}`,
25    'Content-Type': 'application/json',
26  };
27
28  const { action, params } = await req.json();
29  let url: string;
30  let fetchOptions: RequestInit = { method: 'GET', headers };
31
32  if (action === 'profiles') {
33    url = `${AGORAPULSE_BASE}/organizations/me/socialAccounts`;
34  } else if (action === 'inbox') {
35    const q = new URLSearchParams({
36      ...(params?.status && { status: params.status }),
37      ...(params?.profile_id && { socialAccountId: params.profile_id }),
38      perPage: '50',
39    });
40    url = `${AGORAPULSE_BASE}/organizations/me/messages?${q}`;
41  } else if (action === 'publish') {
42    url = `${AGORAPULSE_BASE}/organizations/me/publications`;
43    fetchOptions = {
44      method: 'POST',
45      headers,
46      body: JSON.stringify({
47        socialAccountIds: params.profile_ids,
48        text: params.text,
49        publishAt: params.scheduled_at || null,
50      }),
51    };
52  } else if (action === 'report') {
53    url = `${AGORAPULSE_BASE}/organizations/me/reports/profiles/${params.profile_id}?dateStart=${params.date_start}&dateEnd=${params.date_end}`;
54  } else {
55    return new Response(JSON.stringify({ error: 'Invalid action' }), {
56      status: 400,
57      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
58    });
59  }
60
61  const response = await fetch(url, fetchOptions);
62  const data = await response.json();
63
64  return new Response(JSON.stringify(data), {
65    status: response.ok ? 200 : response.status,
66    headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
67  });
68});

With the Edge Function in place, use Lovable's chat to build the inbox interface. The unified inbox is the core value of the Agorapulse integration — a feed that shows all incoming social messages across all connected profiles, prioritized by recency and filtered by status. The inbox should show each message with: the author's name and profile picture (from Agorapulse's message objects), the message text, the social network it came from, the time received, the current status (pending, in_progress, done), and any assigned team member. Add action buttons for Reply (opens a compose modal), Assign (dropdown of team members), and Resolve (marks done via the API). For response tracking, store all actions taken on inbox items in a Supabase table: item_id, action_type, action_by (user_id), action_at (timestamp), and notes. This creates an audit trail beyond what Agorapulse tracks natively, which is valuable for SLA reporting. For the publishing component, build a simplified post composer that calls the publish action on the Edge Function. Show a profile selector (populated from the profiles action), a text input with character count, an optional image upload, and a schedule picker. Posts can go to Agorapulse's queue for immediate or scheduled publishing. For complex enterprise workflows with Salesforce or Zendesk integration, custom SLA routing, and multi-brand management, RapidDev's team can help design the full architecture.