How to Integrate Lovable with LearnWorlds

LearnWorlds API credentials are managed in your school admin panel. To find your API key: Log in to your LearnWorlds admin panel at your-school.learnworlds.com/admin. Navigate to Settings → Schools Settings → API. You will see options to generate or view your API key. If this section is not visible, your current LearnWorlds plan may not include API access — API access is available on the Pro plan and above. The API key is a long string that serves as your primary authentication credential for server-to-server API calls. Click 'Generate API Key' if one does not exist, or copy the existing key. This key is used in an Lw-Client API key header on every request. Also note your school subdomain. If your school URL is https://mycompany.learnworlds.com, your subdomain is mycompany. The API base URL for your school will be https://mycompany.learnworlds.com/api/v2 (for the REST API). For user-specific operations (like fetching individual user progress or certificates), you may also need to use LearnWorlds' user authentication tokens. However, for admin-level operations like course catalog, enrollments, and certificates, the API key is sufficient — it represents your school admin identity. LearnWorlds' API documentation is available at dev.learnworlds.com and includes Swagger/OpenAPI specifications you can explore to see all available endpoints and their request/response formats.

Store your LearnWorlds API key and school subdomain in Lovable's encrypted Cloud → Secrets panel. In Lovable, click the '+' icon at the top of the editor to open the Cloud panel. Click the Secrets tab. Add: - Name: LEARNWORLDS_API_KEY — Value: your LearnWorlds API key - Name: LEARNWORLDS_SCHOOL_SUBDOMAIN — Value: your school subdomain (e.g., mycompany — just the subdomain, not the full URL) The Edge Function will construct the full API URL as: https://{LEARNWORLDS_SCHOOL_SUBDOMAIN}.learnworlds.com/api/v2/{endpoint}. LearnWorlds uses a custom header for API key authentication: Lw-Client (not the standard Authorization header). Your Edge Function will send Lw-Client: {apiKey} on every API request. This is different from most APIs that use Authorization: Bearer — make sure the Edge Function uses the correct header name. Some LearnWorlds API endpoints also require the Content-Type header to be set to application/json even for GET requests. Add this header to all API calls in the Edge Function to avoid unexpected 415 errors.

Build the Edge Function that proxies requests from your Lovable frontend to the LearnWorlds API. LearnWorlds uses the Lw-Client header for API key authentication. Paste this prompt into Lovable's chat: 'Create a Supabase Edge Function at supabase/functions/learnworlds-api/index.ts. Read LEARNWORLDS_API_KEY and LEARNWORLDS_SCHOOL_SUBDOMAIN from Deno.env. Accept POST requests with body { endpoint: string, method: string, params?: object, body?: object }. Construct the URL as https://{subdomain}.learnworlds.com/api/v2/{endpoint}. Add the headers: Lw-Client: {apiKey}, Content-Type: application/json, Accept: application/json. Add params as query string for GET requests. Return the LearnWorlds API response as JSON with CORS headers.' LearnWorlds v2 API endpoints (verify current paths in dev.learnworlds.com): - GET /courses — list all courses - GET /courses/{courseId} — single course with sections and lectures - GET /users — list all users (paginated) - GET /users/{userId} — user profile - GET /users/{userId}/enrollments — user enrollments - GET /users/{userId}/certificates — user certificates - POST /enrollments — create an enrollment - GET /certificates/{certificateId} — certificate details LearnWorlds API responses use a data wrapper pattern for some endpoints: the actual data is in response.data while metadata (total count, pagination) is at the top level. Handle both flat responses and data-wrapped responses in your frontend components.

1// supabase/functions/learnworlds-api/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7Deno.serve(async (req) => {
8  if (req.method === 'OPTIONS') {
9    return new Response('ok', { headers: corsHeaders });
10  }
11
12  try {
13    const apiKey = Deno.env.get('LEARNWORLDS_API_KEY');
14    const subdomain = Deno.env.get('LEARNWORLDS_SCHOOL_SUBDOMAIN');
15
16    if (!apiKey || !subdomain) {
17      return new Response(
18        JSON.stringify({ error: 'LearnWorlds credentials not configured' }),
19        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
20      );
21    }
22
23    const { endpoint, method = 'GET', params, body: requestBody } = await req.json();
24
25    if (!endpoint) {
26      return new Response(
27        JSON.stringify({ error: 'endpoint is required' }),
28        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
29      );
30    }
31
32    let url = `https://${subdomain}.learnworlds.com/api/v2/${endpoint}`;
33
34    if (params && method === 'GET') {
35      const queryString = new URLSearchParams(
36        Object.entries(params).map(([k, v]) => [k, String(v)])
37      ).toString();
38      if (queryString) url += `?${queryString}`;
39    }
40
41    const response = await fetch(url, {
42      method,
43      headers: {
44        'Lw-Client': apiKey,
45        'Content-Type': 'application/json',
46        'Accept': 'application/json',
47      },
48      body: requestBody && method !== 'GET' ? JSON.stringify(requestBody) : undefined,
49    });
50
51    const data = await response.json();
52    return new Response(JSON.stringify(data), {
53      status: response.status,
54      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
55    });
56  } catch (error) {
57    return new Response(
58      JSON.stringify({ error: error.message }),
59      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
60    );
61  }
62});

Build the React components for your white-label learning portal. The key to a good white-label experience is ensuring all visible branding is your own — no LearnWorlds logos, colors, or terminology should appear in the UI. Paste this prompt into Lovable's chat: 'Create a LearnWorldsCoursePortal React component. Fetch all published courses from the learnworlds-api Edge Function (endpoint courses, params { status: published }). Display courses in a branded card grid using our company color scheme. Each card shows: course thumbnail (cover_image field), title, description (first 160 chars), duration (if available), price or Free if price is 0, and student count. Clicking a card shows a course detail page with: full description, curriculum (sections and lessons from courses/{id}), instructor bio, and an Enroll button. The Enroll button redirects to {schoolSubdomain}.learnworlds.com/course/{courseId} with SSO pre-authentication if configured.' LearnWorlds course objects include: id, title, description, excerpt, cover_image, duration, price, currency, status, labels (tags/categories), and created_at. The curriculum detail is in the sections array, each containing lessons (lectures, videos, quizzes). For the enrollment redirect, LearnWorlds supports Single Sign-On (SSO) via JWT — you can pre-authenticate users so they go directly to the course player without a separate LearnWorlds login. The SSO endpoint accepts a signed JWT token containing the user's information. This requires the SSO feature to be enabled in your LearnWorlds school settings and a shared JWT secret stored as a Lovable secret.

LearnWorlds generates professional certificates automatically when students complete courses. Build a certificate dashboard where students can view, download, and share their certificates, plus a public verification page. Paste this prompt into Lovable's chat: 'Create a Certificates section in the student dashboard. Call the learnworlds-api Edge Function with endpoint users/{userId}/certificates to fetch all certificates for the current user. Display each certificate as a card with: course name, completion date, a certificate thumbnail preview (preview_url field), a Download PDF button linking to certificate_url, and a Share on LinkedIn button that generates a LinkedIn certification URL. Also create a public verification page at /certificate/{certificateId} that any visitor can access without login. This page calls learnworlds-api with endpoint certificates/{id} and displays: student name, course name, school name, completion date, and a VERIFIED badge.' LearnWorlds certificate objects include: id, title (usually the course name), issued_at, certificate_url (PDF download URL), preview_url (thumbnail image), and user information. For the LinkedIn share button, LinkedIn's Add to Profile URL format is: https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name={encodedTitle}&organizationId={linkedinOrgId}&issueYear={year}&issueMonth={month}&certUrl={encodedCertUrl}&certId={certId}. Build this URL client-side from the certificate data and open it in a new tab. For the public verification page, use Lovable's route setup: create a page component that reads the certificateId from the URL params, fetches the certificate data without requiring user authentication (the Edge Function uses the API key, not user-level auth), and displays the verification result.