How to Integrate Lovable with Skillshare

The most accessible way to integrate Skillshare into a Lovable app is through the affiliate program. Skillshare's affiliate program pays a commission for new Skillshare memberships that originate from your app's referral links. To join, go to skillshare.com/affiliates and click 'Apply Now'. Fill in your website or app details. The approval process typically takes 2-5 business days. Once approved, you will receive access to the affiliate dashboard where you can find: - Your affiliate tracking ID (used to create tracked URLs) - Deep link generator tool for creating class-specific affiliate links - Reporting dashboard showing clicks, sign-ups, and commissions Skillshare affiliate links follow this pattern: https://www.skillshare.com/en/classes/{class-slug}/{class-id}?via={yourAffiliateId}. You can also use Skillshare's Impact affiliate platform (impact.com) depending on how you are set up. For the affiliate tracking ID, look in your affiliate dashboard under Account or Tracking. It may be shown as a 'via' parameter value, an 'ambassador' ID, or similar depending on Skillshare's current affiliate platform setup. Note: If you need deeper API access beyond affiliate links — such as class catalog search by keyword, class metadata fetching, or enrollment data — contact Skillshare's business development team about API access. Some class metadata (title, description, teacher name, thumbnail) is accessible through Skillshare's oEmbed-compatible endpoints for linked URLs.

Store your Skillshare affiliate tracking ID and any API credentials in Lovable's Cloud → Secrets panel. Even though an affiliate ID is semi-public (it appears in URLs), storing it as a secret keeps it out of your source code and allows you to change it without code deployments. In Lovable, click the '+' icon next to the Preview label to open the Cloud panel. Click the Secrets tab. Add: - Name: SKILLSHARE_AFFILIATE_ID — Value: your affiliate tracking ID (the value that goes in the via= or ambassador= parameter in Skillshare URLs) If you have obtained Skillshare Partner API credentials (for deeper catalog or enrollment access), also add: - Name: SKILLSHARE_API_KEY — Value: your partner API key - Name: SKILLSHARE_API_SECRET — Value: your partner API secret (if applicable) For affiliate-only integrations, just the SKILLSHARE_AFFILIATE_ID is sufficient. The Edge Function uses this to append your tracking ID to all Skillshare URLs it generates. Your affiliate ID is the core business value of this integration — it is what ensures your app receives commission credit for new Skillshare subscriptions. Storing it in Cloud → Secrets means you can update it without a code change, which is useful when switching affiliate platforms.

Build an Edge Function that fetches Skillshare class metadata and generates affiliate-tagged URLs. Since Skillshare's public API is limited, this function works in two modes: (1) looking up metadata for a specific class URL using oEmbed or link preview techniques, and (2) for partner API users, searching the class catalog by keyword. Paste this prompt into Lovable's chat to generate the Edge Function: 'Create a Supabase Edge Function at supabase/functions/skillshare-api/index.ts. The function reads SKILLSHARE_AFFILIATE_ID from Deno.env. Accept POST requests with body { action: string, data: object }. Support two actions: (1) action: create_affiliate_link — takes data.classUrl and returns the URL with ?via={affiliateId} appended, along with any available class metadata. (2) action: fetch_class_metadata — takes data.classUrl and fetches the Skillshare oEmbed endpoint at https://www.skillshare.com/api/oembed?url={encodedUrl}&format=json to get title, thumbnail, author_name. Return the metadata plus an affiliate_url. Include CORS headers.' Skillshare supports oEmbed for their class URLs, which provides: title (class name), author_name (teacher name), thumbnail_url, and html (embed code for the class player). This is the most reliable way to fetch class metadata without a private API key. For apps that maintain a curated list of Skillshare classes in Supabase, consider pre-fetching the oEmbed data for each class URL when it is added to the database and storing it — this eliminates per-request oEmbed lookups and makes your app faster.

1// supabase/functions/skillshare-api/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7function createAffiliateUrl(classUrl: string, affiliateId: string): string {
8  const url = new URL(classUrl);
9  url.searchParams.set('via', affiliateId);
10  return url.toString();
11}
12
13Deno.serve(async (req) => {
14  if (req.method === 'OPTIONS') {
15    return new Response('ok', { headers: corsHeaders });
16  }
17
18  try {
19    const affiliateId = Deno.env.get('SKILLSHARE_AFFILIATE_ID');
20    if (!affiliateId) {
21      return new Response(
22        JSON.stringify({ error: 'SKILLSHARE_AFFILIATE_ID not configured' }),
23        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
24      );
25    }
26
27    const { action, data } = await req.json();
28
29    if (action === 'create_affiliate_link') {
30      const affiliateUrl = createAffiliateUrl(data.classUrl, affiliateId);
31      return new Response(
32        JSON.stringify({ affiliate_url: affiliateUrl }),
33        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
34      );
35    }
36
37    if (action === 'fetch_class_metadata') {
38      const oEmbedUrl = `https://www.skillshare.com/api/oembed?url=${encodeURIComponent(data.classUrl)}&format=json`;
39
40      const response = await fetch(oEmbedUrl, {
41        headers: { 'User-Agent': 'Mozilla/5.0 (compatible; LovableApp/1.0)' },
42      });
43
44      if (!response.ok) {
45        const affiliateUrl = createAffiliateUrl(data.classUrl, affiliateId);
46        return new Response(
47          JSON.stringify({ error: 'Could not fetch class metadata', affiliate_url: affiliateUrl }),
48          { status: 200, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
49        );
50      }
51
52      const metadata = await response.json();
53      const affiliateUrl = createAffiliateUrl(data.classUrl, affiliateId);
54
55      return new Response(
56        JSON.stringify({ ...metadata, affiliate_url: affiliateUrl }),
57        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
58      );
59    }
60
61    return new Response(
62      JSON.stringify({ error: 'Unknown action' }),
63      { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
64    );
65  } catch (error) {
66    return new Response(
67      JSON.stringify({ error: error.message }),
68      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
69    );
70  }
71});

With the Edge Function ready, build the React components that display Skillshare class recommendations with affiliate tracking. Paste this prompt into Lovable's chat: 'Create a SkillshareRecommendations React component. Fetch a curated list of Skillshare classes from a Supabase table called skillshare_classes (columns: id, title, teacher_name, thumbnail_url, affiliate_url, category, description). Group classes by category and display them in horizontal scrolling rows per category (like a Netflix-style layout). Each class card shows: thumbnail, title, teacher name, and a Watch on Skillshare button that opens the affiliate URL in a new tab. When the button is clicked, log a click event to a Supabase affiliate_clicks table with class_id, user_id (if logged in), and clicked_at. Show the total click count next to each class for social proof.' For the Supabase skillshare_classes table, include a featured boolean column. Show featured classes prominently (e.g., as larger hero cards) and standard classes in the scrolling grid below. For affiliate click tracking, the clicks table lets you measure which classes drive the most engagement and refine your curation over time. Combine this with Skillshare's affiliate dashboard data to see the complete funnel: clicks from your app → Skillshare visits → subscription conversions. For complex affiliate tracking setups with UTM parameters, referral attribution, or multi-step conversion funnels across a community platform, RapidDev's team can help design the tracking architecture.

Complete the integration with a reporting dashboard that shows your affiliate program performance — how many clicks your app is generating and which classes drive the most engagement. Paste this prompt into Lovable's chat: 'Create an affiliate performance dashboard page. Query the Supabase affiliate_clicks table to show: total clicks this month, clicks by class (top 10 table with class title and click count), clicks over time (line chart for the last 30 days), and a comparison vs last month. Add a note explaining that actual conversion and commission data comes from the Skillshare affiliate dashboard (with a link). Also show the curated class inventory with an Add Class button that: takes a Skillshare URL, calls the skillshare-api Edge Function with action fetch_class_metadata, and saves the metadata to skillshare_classes.' The gap between your Lovable click data and actual Skillshare conversions is normal — Skillshare's affiliate dashboard shows what happened after the click (sign-ups, subscriptions, commissions). Your Supabase data shows what happened before the click (which pages and features drove traffic to Skillshare). For the class inventory management, the Add Class flow — paste URL → fetch metadata → save to Supabase — gives you a simple CMS for your class recommendations without building a full admin panel. Consider adding a sort_order column to skillshare_classes to control the display order of classes within each category.