How to Integrate Lovable with Weebly

Weebly's API requires a developer account and application registration. The API is primarily designed for the Weebly App Center (third-party apps that integrate with Weebly sites), so the setup process is oriented toward app development rather than simple API access. To get API credentials: Go to dev.weebly.com and sign in or create a developer account. Click 'Create an App'. Fill in the app details (name, description) — this is just for developer registration, not a published app. After creating the app, you receive a Client ID and Client Secret (for OAuth2) and can configure an API key for basic access. For accessing your own Weebly sites or those of users who authorize your app, Weebly uses OAuth2. For development purposes, you can use your developer account's admin token to access sites owned by that account directly. In Lovable, click '+' next to Preview to open the Cloud panel, then click 'Secrets'. Add: - WEEBLY_CLIENT_ID — your Weebly app's client ID - WEEBLY_CLIENT_SECRET — your Weebly app's client secret - WEEBLY_ACCESS_TOKEN — the OAuth2 access token for the specific site you want to access - WEEBLY_SITE_ID — the numeric Weebly site ID Weebly access tokens are long-lived (they do not expire by default unless revoked). The site ID is visible in the Weebly admin URL: weebly.com/editor/main.php#action=editor&site_id={SITE_ID}

The Weebly API uses Bearer token authentication with the OAuth2 access token. The API base URL is https://api.weeblycloud.com/. The main endpoints for content are: - GET /user/{userId}/site/{siteId}/blog — list blogs on the site - GET /user/{userId}/site/{siteId}/blog/{blogId}/post — list blog posts - GET /user/{userId}/site/{siteId}/blog/{blogId}/post/{postId} — single post - GET /user/{userId}/site/{siteId}/page — list pages - GET /user/{userId}/site/{siteId}/store/product — list products Note that Weebly's API requires a user ID in addition to the site ID. The user ID is the Weebly account ID associated with the site — visible in the Weebly API response for site information as 'user_id'. Blog post responses include: title, body (HTML content), post_url (the Weebly-hosted URL), excerpt, post_date (Unix timestamp), tags, site_id. The body field contains Weebly's rendered HTML including proprietary markup for Weebly elements. For migration, sanitize this HTML and store it in Supabase. For live display, render it with dangerouslySetInnerHTML and DOMPurify sanitization.

1// supabase/functions/weebly-proxy/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') return new Response('ok', { headers: corsHeaders });
9
10  try {
11    const { resource, blogId, page = 1, limit = 25 } = await req.json() as {
12      resource: string; blogId?: string; page?: number; limit?: number;
13    };
14
15    const accessToken = Deno.env.get('WEEBLY_ACCESS_TOKEN')!;
16    const userId = Deno.env.get('WEEBLY_USER_ID')!;
17    const siteId = Deno.env.get('WEEBLY_SITE_ID')!;
18
19    let path: string;
20    if (resource === 'blog_posts' && blogId) {
21      path = `/user/${userId}/site/${siteId}/blog/${blogId}/post?page=${page}&limit=${limit}`;
22    } else if (resource === 'blogs') {
23      path = `/user/${userId}/site/${siteId}/blog`;
24    } else if (resource === 'pages') {
25      path = `/user/${userId}/site/${siteId}/page?page=${page}&limit=${limit}`;
26    } else if (resource === 'products') {
27      path = `/user/${userId}/site/${siteId}/store/product?page=${page}&limit=${limit}`;
28    } else {
29      return new Response(JSON.stringify({ error: 'resource must be: blogs, blog_posts, pages, or products' }), {
30        status: 400,
31        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
32      });
33    }
34
35    const weeblyResponse = await fetch(`https://api.weeblycloud.com${path}`, {
36      headers: {
37        'X-Weebly-Access-Token': accessToken,
38        'X-Weebly-Application-Client-Id': Deno.env.get('WEEBLY_CLIENT_ID') || '',
39        'Accept': 'application/json',
40      },
41    });
42
43    if (!weeblyResponse.ok) {
44      const errText = await weeblyResponse.text();
45      console.error(`Weebly API error ${weeblyResponse.status}:`, errText);
46      return new Response(JSON.stringify({ error: `Weebly API returned ${weeblyResponse.status}` }), {
47        status: weeblyResponse.status,
48        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
49      });
50    }
51
52    const data = await weeblyResponse.json();
53    return new Response(JSON.stringify({ data: Array.isArray(data) ? data : [data] }), {
54      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
55    });
56  } catch (error) {
57    console.error('weebly-proxy error:', error);
58    return new Response(JSON.stringify({ error: String(error) }), {
59      status: 500,
60      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
61    });
62  }
63});

The primary use case for Weebly integration is migration. Build an admin-only migration dashboard in Lovable that allows an administrator to trigger the content import, track progress, and validate migrated content. For the migration flow: fetch all blog posts from Weebly via the Edge Function (paginating through all pages), transform each post into your Supabase schema (title, body_html, published_at converted from Unix timestamp, slug generated from the title, featured_image_url extracted from the first img tag in the body), and insert them into a Supabase posts table using supabase.from('posts').upsert() with weebly_post_id as the conflict key (so re-running the import does not create duplicates). For images: Weebly hosts post images on its own CDN (uploads.weeblycloud.com). These URLs will continue working as long as your Weebly account is active but will break if the account is deleted. For permanent migration, download each image, re-upload to Supabase Storage, and update the post body HTML to use the new Supabase Storage URLs. For organizations migrating large Weebly sites with complex content, embedded forms, and e-commerce integrations, RapidDev's team can help plan and execute the full data migration strategy including image re-hosting and URL redirect configuration.