How to Integrate Lovable with Hootsuite

Navigate to developer.hootsuite.com and sign in with your Hootsuite account. Note that Hootsuite API access requires a Business or Enterprise plan — developer applications on free or lower-tier plans will receive permission errors on most API endpoints. Click 'Create App'. Fill in the application name, description, and redirect URI. Use your deployed Lovable app URL followed by /auth/hootsuite/callback. Submit the application. Hootsuite will provide a Client ID and Client Secret. Copy both values. To generate an access token, use Hootsuite's OAuth2 authorization code flow. Navigate to: https://platform.hootsuite.com/oauth2/auth?client_id={CLIENT_ID}&response_type=code&scope=offline+read:social_profiles+write:social_profiles+write:owned_messages+read:messages After authorizing, Hootsuite redirects to your callback with a code parameter. Exchange this code for an access token at https://platform.hootsuite.com/oauth2/token. Hootsuite uses the 'offline' scope to include a refresh token in the response, which allows your Edge Function to renew credentials without user re-authorization. Hootsuite access tokens expire after 7 days. The refresh token is valid for 14 days. Build your Edge Function to handle token refresh before expiry.

Open your Lovable project and navigate to Cloud → Secrets via the '+' icon next to Preview. Add the following secrets: - Name: HOOTSUITE_ACCESS_TOKEN — Value: your 7-day access token - Name: HOOTSUITE_REFRESH_TOKEN — Value: your 14-day refresh token - Name: HOOTSUITE_CLIENT_ID — Value: your application Client ID - Name: HOOTSUITE_CLIENT_SECRET — Value: your application Client Secret Because Hootsuite tokens expire after 7 days, the Edge Function needs all four values to handle token refresh automatically. When the access token expires, the function uses the client credentials and refresh token to obtain a new access token before proceeding with the API call. Store the new access token in a Supabase table (not in Cloud → Secrets, which cannot be updated at runtime) for subsequent calls. Hootsuite credentials authorize access to connected enterprise social accounts — treat them with the same care as any credential that controls public brand communications.

Create a Supabase Edge Function that proxies Hootsuite API calls with automatic token refresh. Hootsuite's API base URL is https://platform.hootsuite.com/v1/ and uses Authorization: Bearer {token}. The function handles five core actions: profiles (list connected social profiles), schedule_message (create a scheduled post), messages (list scheduled messages), streams (list monitoring streams and their items), and analytics (fetch analytics for a social profile). Token refresh logic detects 401 responses, uses the stored refresh token to obtain a new access token, stores the new token in Supabase, and retries the request.

1// supabase/functions/hootsuite-api/index.ts
2import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
3
4const HOOTSUITE_BASE = 'https://platform.hootsuite.com/v1';
5const TOKEN_URL = 'https://platform.hootsuite.com/oauth2/token';
6
7async function refreshHootsuiteToken(): Promise<string> {
8  const response = await fetch(TOKEN_URL, {
9    method: 'POST',
10    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
11    body: new URLSearchParams({
12      grant_type: 'refresh_token',
13      refresh_token: Deno.env.get('HOOTSUITE_REFRESH_TOKEN')!,
14      client_id: Deno.env.get('HOOTSUITE_CLIENT_ID')!,
15      client_secret: Deno.env.get('HOOTSUITE_CLIENT_SECRET')!,
16    }),
17  });
18  const data = await response.json();
19  if (!data.access_token) throw new Error('Hootsuite token refresh failed');
20  return data.access_token;
21}
22
23Deno.serve(async (req) => {
24  if (req.method === 'OPTIONS') {
25    return new Response(null, {
26      headers: {
27        'Access-Control-Allow-Origin': '*',
28        'Access-Control-Allow-Methods': 'POST, OPTIONS',
29        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
30      },
31    });
32  }
33
34  let accessToken = Deno.env.get('HOOTSUITE_ACCESS_TOKEN')!;
35  const { action, params } = await req.json();
36
37  const makeRequest = async (token: string) => {
38    const authHeaders = { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' };
39    let url: string;
40    let fetchOptions: RequestInit;
41
42    if (action === 'profiles') {
43      url = `${HOOTSUITE_BASE}/socialProfiles`;
44      fetchOptions = { method: 'GET', headers: authHeaders };
45    } else if (action === 'schedule_message') {
46      url = `${HOOTSUITE_BASE}/messages`;
47      fetchOptions = {
48        method: 'POST',
49        headers: authHeaders,
50        body: JSON.stringify({
51          text: params.text,
52          socialProfiles: params.profile_ids.map((id: string) => ({ id })),
53          scheduledSendTime: params.scheduled_at,
54        }),
55      };
56    } else if (action === 'messages') {
57      url = `${HOOTSUITE_BASE}/messages?state=${params.state || 'SCHEDULED'}&limit=50`;
58      fetchOptions = { method: 'GET', headers: authHeaders };
59    } else {
60      return new Response(JSON.stringify({ error: 'Invalid action' }), { status: 400, headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } });
61    }
62
63    return fetch(url, fetchOptions);
64  };
65
66  let response = await makeRequest(accessToken);
67
68  if (response.status === 401) {
69    accessToken = await refreshHootsuiteToken();
70    response = await makeRequest(accessToken);
71  }
72
73  const data = await response.json();
74  return new Response(JSON.stringify(data), {
75    status: response.ok ? 200 : response.status,
76    headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
77  });
78});

Use Lovable's chat to build the publishing and monitoring dashboard. Start with the profiles view — a list of connected social accounts that serves as the source of truth for the profile IDs needed in scheduling and analytics requests. For the publishing workflow, build a message composer that lets users select which social profiles to target, write post text with per-network character counts, attach images from Supabase Storage, and pick a schedule time. Before calling Hootsuite's API, save the post to a Supabase table with a 'pending' status — this creates a draft layer that enables the approval workflow described in the use cases. For the monitoring dashboard, Hootsuite streams represent saved searches or keyword monitors. Fetch stream items at regular intervals and display them in a chronological feed. Add quick-action buttons for responding, assigning to a team member, or flagging for follow-up — store these actions in Supabase alongside the Hootsuite item ID. For analytics, build charts showing follower trends, post engagement rates, and publishing frequency over time. Store fetched analytics in Supabase with a 30-day retention so you can show trends beyond what Hootsuite's default reporting window covers. For large enterprise implementations with Salesforce CRM integration, multi-brand management, and custom SLA dashboards, RapidDev's team can help design the full workflow architecture.