How to Integrate Lovable with CoSchedule

Log in to your CoSchedule account and navigate to Settings in the top right menu. In the Settings sidebar, look for 'API' or 'Integrations'. CoSchedule may list API access under a developer or advanced settings section depending on your plan. If you do not see an API option, confirm your plan includes API access — it is included in Marketing Calendar and Marketing Suite plans but not in the free Headline Analyzer or basic plans. In the API settings page, click 'Generate API Key' or 'Create API Key'. Give the key a name like 'Lovable Dashboard' to identify it. Copy the generated API key immediately and save it somewhere secure. The key is typically a long alphanumeric string. Unlike OAuth2 tokens, this key does not expire automatically, but you should rotate it if you suspect it has been compromised. Keep in mind that anyone with this API key has access to your CoSchedule calendar data including all projects, tasks, social messages, and team member information — treat it with the same care as a password. The key should go immediately into Cloud Secrets, not into any code file or chat message.

In your Lovable project, open the Cloud tab by clicking '+' next to the Preview, then navigate to the Secrets section. Click 'Add Secret' and create a new secret named COSCHEDULE_API_KEY with your API key value. This single credential is all CoSchedule needs for authentication — the key is passed as an Authorization header or as a query parameter on each API request, depending on the CoSchedule API version you are using. Storing it in Cloud Secrets ensures it never appears in your frontend JavaScript bundle, never gets committed to your GitHub repository, and is protected by Lovable's encryption at rest. Lovable's SOC 2 Type II certified infrastructure and automated key-blocking layer mean your API credentials stay in the secure server-side zone where they belong. If you work across multiple CoSchedule workspaces or manage accounts for multiple clients, you can add additional secrets like COSCHEDULE_ORG_ID to identify which organization's data to query. Some CoSchedule API endpoints include the organization ID in the path — check your account settings or the initial API response to find your organization ID, and consider storing it as a secret for easy reference in Edge Function code.

Ask Lovable to create a Supabase Edge Function called coschedule-api that accepts request path, HTTP method, and optional query parameters, then forwards the request to the CoSchedule API with your API key as an Authorization header. The CoSchedule API base URL is https://api.coschedule.com/ and authentication is typically done via the Authorization header with your API key. The Edge Function should accept a path string (such as 'projects' or 'tasks'), optional query parameters as an object, and an optional request body for POST/PUT operations. It constructs the full URL, adds the Authorization header, forwards the request, and returns the CoSchedule response to your React component. Include robust error handling that returns the CoSchedule error message rather than generic failures — CoSchedule returns descriptive error objects that help you understand validation failures. Add an allowlist of valid CoSchedule API path prefixes (projects, tasks, social-messages, users, tags) to prevent the proxy from being misused. Deploy the function through Lovable's chat interface and verify it works by calling it with path 'projects' and checking that you receive your calendar's project list.

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 = ["projects", "tasks", "social-messages", "users", "tags", "calendars"];
9
10serve(async (req) => {
11  if (req.method === "OPTIONS") return new Response("ok", { headers: corsHeaders });
12
13  try {
14    const apiKey = Deno.env.get("COSCHEDULE_API_KEY");
15    if (!apiKey) throw new Error("COSCHEDULE_API_KEY not configured");
16
17    const { path, method = "GET", body: reqBody, 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.coschedule.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": apiKey,
36        "Content-Type": "application/json",
37      },
38    };
39
40    if (reqBody && method !== "GET") {
41      fetchOptions.body = JSON.stringify(reqBody);
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(JSON.stringify(data));
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 marketing calendar dashboard. The core CoSchedule data model you will work with is the project object, which represents any piece of content or campaign in your calendar. Each project has a title, project_type (blog_post, social_campaign, email_campaign, or custom types you have defined), status, due_date, assigned team members, and associated tasks. Fetch projects for a date range by passing start_date and end_date parameters to the 'projects' endpoint in YYYY-MM-DD format. The response will include an array of project objects you can map to calendar cells. For the calendar layout, request a monthly grid component with cells for each day. Map each project's due_date to the corresponding calendar cell and render project title chips inside. Use different background colors per project type so the calendar is visually scannable at a glance — CoSchedule's own color coding convention (blue for blog, green for social, orange for email) is familiar to users. Include a month navigation control to move forward and backward through months, fetching new data as the user navigates. Add a sidebar list of this week's projects sorted by due date for users who prefer a list view. The calendar should show project count badges on days with more projects than can fit in the cell, with a popover showing the full list on click.

Enhance your calendar with a project detail view that shows all tasks and subtasks associated with each project. When a user clicks a project in the calendar, fetch the project's tasks from the 'tasks' endpoint with the project ID as a path parameter (tasks/{projectId}) and display them in a checklist or kanban format. Each task object includes a title, assigned_user, due_date, status (open or complete), and subtasks array. Display tasks grouped by assignee or by due date, and show completion progress as a percentage or progress bar at the top of the detail panel. For the creation workflow, add a 'New Project' button that opens a form allowing users to create calendar items directly from your Lovable app by POSTing to your Edge Function with the project data. Required fields for project creation include title, project_type, and due_date. This round-trips data back into CoSchedule so your team can use both your custom Lovable dashboard and CoSchedule's native app interchangeably — any project created in either place appears in both. For complex enterprise marketing team setups with custom project types and approval workflows, RapidDev can help extend this integration to support your specific CoSchedule configuration.