How to Integrate Lovable with Planoly

Log in to your Planoly account at planoly.com and navigate to your account settings. Click on your profile icon in the top right corner, then select 'Account Settings' from the dropdown menu. In the Account Settings page, look for the 'API Access' or 'Developer' section — if you do not see it, you may need to be on a Solo plan or above, as Planoly restricts API access to paid plan users. In the API Access section, click 'Generate API Token' or 'Create New Token'. Give your token a descriptive name like 'Lovable Integration' so you can identify it later if you need to revoke it. Copy the generated token immediately and store it somewhere safe — Planoly may only show it once in full. This token does not expire automatically but can be revoked from the same settings page at any time. The token authenticates all API calls as your account, so treat it with the same care as a password. Do not paste it into Lovable's chat, commit it to GitHub, or include it in any frontend code — it belongs exclusively in Cloud Secrets. If you manage multiple brands, each brand profile uses the same API token but different profile IDs in API calls.

In your Lovable project, open the Cloud tab by clicking '+' next to the Preview panel, then navigate to the Secrets section. Click 'Add Secret' and create a new secret named PLANOLY_API_TOKEN with your API token as the value. This is the only credential required for Planoly's API — unlike OAuth2-based tools, Planoly uses a single static token that serves as both authentication and authorization. The token is encrypted at rest in Lovable's Cloud Secrets store, which is protected by SOC 2 Type II and ISO 27001:2022 certifications and never accessible from client-side browser code. Lovable's automated security layer blocks approximately 1,200 hardcoded API keys per day from being accidentally included in application code — storing your token here rather than anywhere in the codebase ensures this protection applies to your integration. You may also want to add PLANOLY_PROFILE_ID as a second secret containing your default Instagram profile's numeric ID, which you can find by calling the Planoly API's profile listing endpoint after your Edge Function is deployed. Storing the profile ID as a secret rather than hardcoding it makes your application easier to update if you connect additional profiles.

Ask Lovable to create a Supabase Edge Function called planoly-api that proxies requests to the Planoly API. The Edge Function should read the API token from Deno.env.get('PLANOLY_API_TOKEN'), accept a path and optional query parameters in the request body, construct the full URL using the Planoly API base URL (https://api.planoly.com/), forward the request with an Authorization: Bearer header, and return the API response to the calling React component. The function should handle both GET and POST requests to support both read operations (fetching posts and analytics) and write operations (scheduling new posts). Include standard CORS headers so the function works from your Lovable frontend. Key Planoly API paths to support include /users/me for account info, /profiles for listing connected profiles, /posts for fetching and creating scheduled posts, and /analytics for performance data. The function should also accept an HTTP method parameter so the same proxy can handle GET, POST, PUT, and DELETE operations without creating multiple Edge Functions. Make the path validation strict — only allow paths that start with expected Planoly API resources to prevent the proxy from being used to make requests to unintended external services.

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const corsHeaders = {
4  "Access-Control-Allow-Origin": "*",
5  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
6};
7
8const ALLOWED_PATHS = ["users", "profiles", "posts", "analytics", "stories"];
9
10serve(async (req) => {
11  if (req.method === "OPTIONS") return new Response("ok", { headers: corsHeaders });
12
13  try {
14    const apiToken = Deno.env.get("PLANOLY_API_TOKEN");
15    if (!apiToken) throw new Error("PLANOLY_API_TOKEN not configured");
16
17    const { path, method = "GET", body: requestBody, params } = await req.json();
18    if (!path) throw new Error("path is required");
19
20    const topLevel = path.split("/")[0];
21    if (!ALLOWED_PATHS.includes(topLevel)) {
22      throw new Error(`Path not allowed: ${topLevel}`);
23    }
24
25    const url = new URL(`https://api.planoly.com/${path}`);
26    if (params) {
27      Object.entries(params as Record<string, string>).forEach(([k, v]) => {
28        url.searchParams.set(k, v);
29      });
30    }
31
32    const fetchOptions: RequestInit = {
33      method,
34      headers: {
35        "Authorization": `Bearer ${apiToken}`,
36        "Content-Type": "application/json",
37      },
38    };
39
40    if (requestBody && method !== "GET") {
41      fetchOptions.body = JSON.stringify(requestBody);
42    }
43
44    const response = await fetch(url.toString(), fetchOptions);
45    const data = await response.json();
46
47    if (!response.ok) {
48      throw new Error(data.message || `Planoly API error: ${response.status}`);
49    }
50
51    return new Response(JSON.stringify(data), {
52      headers: { ...corsHeaders, "Content-Type": "application/json" },
53    });
54  } catch (error) {
55    return new Response(
56      JSON.stringify({ error: error.message }),
57      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
58    );
59  }
60});

With the Edge Function working, ask Lovable to build a React component that fetches your connected Instagram profile data and scheduled posts to display a visual grid preview. First call the Edge Function with path 'profiles' to get a list of all connected profiles and their IDs, then call 'posts' with your profile ID and a status parameter to fetch both published and scheduled posts. Planoly returns post objects with image URLs, captions, scheduled times, and engagement metrics for published posts. The grid component should display posts in a 3-column layout that matches Instagram's profile grid appearance. Scheduled posts should show a clock icon overlay and their scheduled time. Published posts should show engagement numbers on hover. For the visual grid layout, use CSS grid with equal square cells — request square aspect ratio cards with object-fit: cover for the post images to maintain the Instagram aesthetic. The component should be responsive, collapsing to a 2-column layout on mobile. When a user clicks any post in the grid, open a slide-out panel or modal showing the full caption, all engagement metrics, scheduled or published date and time, and any comments for published posts. This detail panel gives the content team quick access to post performance without leaving your application.

Extend your Planoly dashboard with post performance analytics and basic scheduling capability. For analytics, call the Edge Function with path 'analytics/posts' and pass your profile ID and a date range to get per-post engagement metrics for published content. Display these metrics in a sortable table or card grid format alongside the post thumbnails, showing likes, comments, saves, reach, and engagement rate for each post. For scheduling new posts, create a simple form in Lovable that accepts an image URL (from Supabase Storage or another source), a caption, and a scheduled date and time. The Edge Function POST to 'posts' with the profile ID, media URL, caption, and scheduled_at timestamp in ISO 8601 format. Include proper error handling for scheduling failures — Planoly may reject posts missing required fields or scheduled too close to the current time. For best results with the analytics data, add a comparison view that shows this period versus the previous period, calculating the percentage change for each metric. This gives content managers immediate visibility into whether their performance is trending up or down. For teams managing complex multi-brand Instagram strategies, RapidDev can help design a more sophisticated scheduling and analytics architecture.