How to Integrate Bolt.new with Weebly

Before building, decide which integration path matches your goal. This determines everything about the implementation. Path 1 — Square Catalog and Orders API (for e-commerce): If your Weebly site has a store (products, orders, customers), access that data through Square's API. After Square acquired Weebly in 2018, all Weebly store data is stored in Square's backend. This means Square's Catalog API and Orders API are the authoritative source for product and order data on Weebly stores. Square's API is well-documented, actively maintained, and significantly more capable than Weebly's own e-commerce endpoints. You authenticate with a static access token from the Square Developer Dashboard — no OAuth flow required for accessing your own store data. Path 2 — Weebly App API (for marketplace integrations): Weebly's native REST API was designed for developers building apps that run inside Weebly's editor — plugins, themes, and integrations in the Weebly App Center. This API uses OAuth 2.0 and provides access to Weebly site configuration, page structure, members, forms, and products. If you are building a Weebly app marketplace extension, this is your path. For most Bolt.new developers, this is not the right approach. Path 3 — Content Migration (Weebly to Bolt): If you have a Weebly site and want to migrate to a modern stack, export your content, bring it into Supabase, and rebuild in Bolt. This is not technically an 'integration' but is the most common reason developers search for 'Weebly API integration' — they want to move away from Weebly, not build deeper into it. This tutorial focuses on Paths 1 and 3 as they serve the most developers.

To access your Weebly store's product and order data via Square's API, create a Square Developer account at developer.squareup.com. Click 'Create an application' and give it a name. In the application settings, go to the 'Credentials' section. You will see a Sandbox access token (for testing) and a Production access token (for live store data). Copy the Production access token — this is what you will use in your .env file as SQUARE_ACCESS_TOKEN. You also need your Location ID, which identifies which Square business location your Weebly store belongs to. Find it in the Square Seller Dashboard under Account → Business Locations, or call the /v2/locations API endpoint with your access token. Store both values in your .env file as SQUARE_ACCESS_TOKEN and SQUARE_LOCATION_ID. Because the access token provides full access to your store's data (products, orders, customers, payments), treat it like a password and never expose it in client-side code. All Square API calls must happen in a Next.js API route. The Square API base URL is https://connect.squareup.com and all endpoints require the Authorization: Bearer {access_token} header. Square's responses use a consistent format: successful responses have a top-level object with the resource name as the key (e.g., { catalog_objects: [...] }), and errors have an { errors: [...] } array. Square's catalog uses 'objects' that can be of type ITEM (product), CATEGORY, ITEM_VARIATION (variant/size/color), IMAGE, or MODIFIER. Filtering to type=ITEM in your list call returns the base products.

1// lib/square.ts
2export async function squareRequest<T>(
3  endpoint: string,
4  options: RequestInit = {}
5): Promise<T> {
6  const response = await fetch(`https://connect.squareup.com${endpoint}`, {
7    ...options,
8    headers: {
9      'Authorization': `Bearer ${process.env.SQUARE_ACCESS_TOKEN}`,
10      'Content-Type': 'application/json',
11      'Square-Version': '2024-01-18',
12      ...(options.headers || {}),
13    },
14  });
15
16  const data = await response.json();
17
18  if (data.errors?.length > 0) {
19    const errorMsg = data.errors.map((e: { detail: string }) => e.detail).join('; ');
20    throw new Error(`Square API error: ${errorMsg}`);
21  }
22
23  return data as T;
24}
25
26// app/api/products/route.ts
27import { NextResponse } from 'next/server';
28import { squareRequest } from '@/lib/square';
29
30export async function GET() {
31  const data = await squareRequest<{ objects: Array<Record<string, unknown>> }>(
32    '/v2/catalog/list?types=ITEM'
33  );
34
35  const products = (data.objects || []).map((item) => {
36    const obj = item as Record<string, unknown>;
37    const itemData = obj.item_data as Record<string, unknown>;
38    const variations = (itemData?.variations as Array<Record<string, unknown>>) || [];
39    const firstVariation = variations[0]?.item_variation_data as Record<string, unknown>;
40    const priceMoney = firstVariation?.price_money as Record<string, unknown>;
41
42    return {
43      id: obj.id,
44      name: itemData?.name,
45      description: itemData?.description,
46      priceUSD: priceMoney?.amount ? Number(priceMoney.amount) / 100 : null,
47      currency: priceMoney?.currency,
48    };
49  });
50
51  return NextResponse.json({ products });
52}

If your goal is to migrate away from Weebly entirely — rebuilding the site in Bolt with modern React/Tailwind — the process involves extracting your content, structuring it in Supabase, and generating the new site with Bolt's AI. Weebly does not offer a comprehensive content export, but you have a few options. For store products: in your Weebly/Square dashboard, you can export product data as CSV from the Square Item Library. This CSV includes product names, descriptions, prices, SKUs, and images. For blog posts: Weebly does not have a bulk blog export. You must copy blog post content manually or use a scraping approach — use a browser extension or simple script to extract page HTML. For static pages: copy the page content from Weebly's editor and paste it into structured data in Supabase. Once you have your content extracted, design a Supabase schema that mirrors your site structure: a pages table for static pages, a posts table for blog content, and a products table if you are moving away from Square as well. Use Bolt's AI to generate the Next.js routes, layouts, and UI components for each content type. The resulting site will be significantly faster than Weebly (no drag-and-drop builder overhead), have better Core Web Vitals, support ISR for content pages, and be fully customizable. During development in Bolt's WebContainer, the Supabase integration works fine for data fetching and display — outbound calls to Supabase's API are fully supported.

1// app/blog/[slug]/page.tsx (ISR blog post page)
2import { createClient } from '@supabase/supabase-js';
3import { notFound } from 'next/navigation';
4
5const supabase = createClient(
6  process.env.NEXT_PUBLIC_SUPABASE_URL!,
7  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
8);
9
10export const revalidate = 3600; // ISR: regenerate every hour
11
12export async function generateStaticParams() {
13  const { data: posts } = await supabase
14    .from('posts')
15    .select('slug')
16    .eq('is_published', true);
17  return (posts || []).map((post) => ({ slug: post.slug }));
18}
19
20type Props = { params: { slug: string } };
21
22export async function generateMetadata({ params }: Props) {
23  const { data: post } = await supabase
24    .from('posts')
25    .select('title, excerpt, featured_image_url')
26    .eq('slug', params.slug)
27    .single();
28  if (!post) return {};
29  return {
30    title: post.title,
31    description: post.excerpt,
32    openGraph: { title: post.title, description: post.excerpt, images: [post.featured_image_url] },
33  };
34}
35
36export default async function BlogPost({ params }: Props) {
37  const { data: post } = await supabase
38    .from('posts')
39    .select('*')
40    .eq('slug', params.slug)
41    .eq('is_published', true)
42    .single();
43
44  if (!post) notFound();
45
46  return (
47    <article className="max-w-3xl mx-auto px-4 py-12">
48      <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
49      <time className="text-gray-500">{new Date(post.published_at).toLocaleDateString()}</time>
50      <div
51        className="prose mt-8"
52        dangerouslySetInnerHTML={{ __html: post.content_html }}
53      />
54    </article>
55  );
56}