# How to Integrate Retool with Weebly

- Tool: Retool
- Difficulty: Beginner
- Time required: 20 minutes
- Last updated: April 2026

## TL;DR

Connect Retool to Weebly via Square's Sites API and Weebly's legacy OAuth API using a REST API Resource. Because Weebly is owned by Square, most Weebly e-commerce and form data is now accessible through Square's unified REST API. Build site management panels that pull blog posts, form submissions, and store orders from Weebly-powered sites alongside Square payment data in Retool.

## Build a Weebly Site Management Panel in Retool

Weebly powers a large number of small business websites and online stores, but its native admin interface provides limited reporting and operational flexibility. Teams managing multiple Weebly-powered sites — or needing to combine site data with internal records — benefit from building a centralized Retool panel that queries Weebly and Square data through their respective APIs.

Because Square acquired Weebly, the platform's e-commerce layer now runs on Square's infrastructure. This means Square's Orders, Catalog, and Customers APIs are the primary source for Weebly store data. You can pull order histories, product inventory, and customer records using a standard Square REST API Resource in Retool with a personal access token or OAuth 2.0. Weebly's own developer API remains available for site-level content operations: listing blog posts, retrieving form submissions, and managing pages across sites.

A combined Retool panel can display Weebly blog content alongside Square order data in the same interface — for example, showing which blog posts drove the most product orders by correlating publish dates with order timestamps. Because Retool proxies all requests server-side, your Square access token and Weebly OAuth token are stored securely in configuration variables and never exposed to the browser.

## Before you start

- A Weebly account with at least one site (Developer API access requires a Weebly developer account at dev.weebly.com)
- A Square Developer account (developer.squareup.com) if accessing store/order data — create a Square application to get a personal access token
- A Retool account with permission to create Resources
- Your Weebly site ID (visible in the Weebly admin URL when editing a site)
- Familiarity with REST API Resources and query configuration in Retool

## Step-by-step guide

### 1. Obtain Square and Weebly API credentials

Before creating Retool resources, you need credentials from both Square and Weebly depending on which data you need. For Square (Weebly store data): go to developer.squareup.com and sign in with your Square account. Click 'Create Your First Application' or open an existing application. In the application dashboard, navigate to 'OAuth' in the left sidebar and copy the Sandbox Access Token for testing, or switch to 'Production' mode and copy the Production Access Token for live data. Store this token securely — you will reference it in Retool's configuration variables. For Weebly legacy API (site content, blog posts, form submissions): go to dev.weebly.com and register as a developer. Create a new app and note your Client ID and Client Secret. The Weebly API uses OAuth 2.0, but for a personal integration against your own sites, you can generate an access token directly through the OAuth flow at https://api.weebly.com/v1/authorize. The resulting access token is what you will configure in Retool. In Retool, navigate to Settings → Configuration Variables and add two variables: SQUARE_ACCESS_TOKEN and WEEBLY_ACCESS_TOKEN. Mark both as secret so they are restricted to resource configurations and not exposed in the frontend. This separation means rotating credentials only requires updating a single configuration variable rather than editing the resource definition directly.

**Expected result:** You have a Square access token and Weebly access token stored as secret configuration variables in Retool's Settings.

### 2. Create the Square REST API Resource in Retool

In Retool, click the Resources tab in the left sidebar. Click the Add Resource button in the top right, then select REST API from the resource type list. Name the resource 'Square API'. In the Base URL field, enter https://connect.squareup.com — this is Square's production API base URL. For the Sandbox environment, use https://connect.squareupsandbox.com instead. Scroll to the Authentication section and select Bearer Token from the dropdown. In the token field, enter {{ retoolContext.configVars.SQUARE_ACCESS_TOKEN }} to reference the configuration variable you created. Scroll to the Headers section and add a default header: key Accept, value application/json. Add a second header: key Square-Version, value 2024-01-18 (or the latest Square API version shown at developer.squareup.com/docs). This version header is required by Square's API for all requests. Click Save Changes. Retool will save the resource — you will verify connectivity when you create your first query. Because Retool proxies all requests server-side, your Square credentials never reach the user's browser, and CORS is not a concern. All team members who have access to this Retool app will use the same resource credentials automatically.

**Expected result:** A 'Square API' resource appears in your Retool Resources list and is ready for queries.

### 3. Create the Weebly Legacy REST API Resource

If you need to access site-level data (blog posts, form submissions, pages) from Weebly's own API, create a second resource. In the Resources tab, click Add Resource, select REST API, and name it 'Weebly API'. In the Base URL field, enter https://api.weebly.com. In the Authentication section, select Bearer Token and enter {{ retoolContext.configVars.WEEBLY_ACCESS_TOKEN }}. In the Headers section, add Content-Type with value application/vnd.weebly.v1+json — this content type header is required by Weebly's API for all requests. The Weebly API organizes resources by user and site: most endpoints follow the pattern /v1/user/sites/{site_id}/[resource]. To find your site ID, log in to Weebly, open a site for editing, and look at the URL in your browser — the site ID is the numeric string visible in the admin path. You can also retrieve all site IDs programmatically by querying /v1/user/sites.json, which returns a list of all sites associated with the authenticated user's account. Click Save Changes. With both resources configured, you have full access to the Weebly ecosystem: Square for transactional and e-commerce data, Weebly API for content and site management operations.

**Expected result:** A 'Weebly API' resource appears in your Resources list alongside the Square API resource.

### 4. Build queries to retrieve site data and orders

Open or create a Retool app. In the Code panel at the bottom, create a new query. For retrieving form submissions from Weebly, select the Weebly API resource, set Method to GET, and Path to /v1/user/sites/{{ siteIdInput.value }}/forms.json. Add a second query for listing form submissions on a specific form: Path = /v1/user/sites/{{ siteIdInput.value }}/forms/{{ formSelect.value }}/entries.json. For retrieving Square orders from the Weebly store, select the Square API resource, set Method to POST, and Path to /v2/orders/search. Square's order search uses a POST request with a JSON body filter. In the Body section, set Body Type to JSON and enter a filter object: { "location_ids": ["{{ locationIdInput.value }}"], "query": { "filter": { "state_filter": { "states": ["OPEN", "COMPLETED"] }, "date_time_filter": { "created_at": { "start_at": "{{ dateRange.startDate }}", "end_at": "{{ dateRange.endDate }}" } } } }, "limit": 50 }. Create a JavaScript transformer for the Square orders response to flatten the nested structure. Name the orders query 'getOrders' and the forms query 'getForms'. Enable 'Run query when app loads' for both queries so the dashboard populates immediately when opened.

```
// Transformer for Square Orders response
const orders = data.orders || [];
return orders.map(order => ({
  id: order.id,
  status: order.state,
  customer_id: order.customer_id || 'Guest',
  total: order.total_money ? `$${(order.total_money.amount / 100).toFixed(2)}` : '$0.00',
  item_count: order.line_items ? order.line_items.length : 0,
  created_at: new Date(order.created_at).toLocaleDateString(),
  fulfillment_status: order.fulfillments && order.fulfillments.length > 0
    ? order.fulfillments[0].state
    : 'PENDING'
}));
```

**Expected result:** Both queries return data visible in the Retool query Results panel — orders from Square and form entries from Weebly.

### 5. Build the site management dashboard UI

With your queries returning data, build the dashboard layout. From the component panel on the right side of the Retool editor, drag a Text Input component onto the canvas and name it 'siteIdInput'. Set its default value to your Weebly site ID (the numeric ID you found in the Weebly admin URL). Add a label 'Site ID' above it. Below the input, drag a Tab Container component and create two tabs: 'Orders' and 'Form Submissions'. In the Orders tab, drag a Table component and set its Data property to {{ getOrders.data }}. Configure columns to display: id, status, total, item_count, created_at, and fulfillment_status. Add a Date Range Picker component above the table bound to the dateRange variable used in the orders query — when dates change, trigger the getOrders query via an event handler on the Date Range Picker's 'change' event. In the Form Submissions tab, drag a Select component named 'formSelect' and populate its options from {{ getForms.data?.map(f => ({ label: f.name, value: f.id })) }}. Below it, add a Table showing form entries with columns for submission date and the entry's field values. For the orders tab, add an Update Status button below the table that opens a Modal with a Select for new fulfillment state and triggers a Square Orders update query. Style the status column with conditional formatting: COMPLETED in green, OPEN in blue, and CANCELED in red using the Table's column color settings.

```
{
  "method": "POST",
  "path": "/v2/orders/{{ ordersTable.selectedRow.id }/fulfill",
  "body": {
    "order": {
      "version": "{{ orderDetailQuery.data.version }}",
      "fulfillments": [{
        "uid": "fulfillment-{{ Date.now() }}",
        "type": "SHIPMENT",
        "state": "COMPLETED"
      }]
    },
    "idempotency_key": "{{ Date.now().toString() }}"
  }
}
```

**Expected result:** A tabbed dashboard shows Weebly store orders and form submissions, with date filtering on orders and form selection for submissions.

### 6. Handle Weebly's limited API coverage and data gaps

Weebly's API has notable coverage gaps compared to a full CMS API like WordPress's. Understanding these limitations helps you build a Retool panel that works reliably. First, blog post content via Weebly's API is accessible through the endpoint /v1/user/sites/{site_id}/blog/posts.json — each post object includes title, body_html, published status, and metadata. However, the body_html field returns raw HTML, which you should display in a Retool Custom HTML component rather than a plain text field. Second, Weebly ecommerce products that were created before the Square migration may not appear in the Square Catalog API — you may need to also query the Weebly Store API endpoint /v1/user/sites/{site_id}/store/products.json for legacy product data. Third, for form submissions, Weebly returns entries with field values stored as a JSON object keyed by field label. Write a JavaScript transformer that flattens this into a consistent column structure for your Retool Table. Fourth, Weebly's API rate limits are not publicly documented — apply defensive caching by enabling 60-second query caching on all read queries in the Advanced query settings. Finally, if you need data that is inaccessible via either API — such as site visitor analytics or A/B test results — configure a supplementary Google Analytics resource in Retool and join the data in a JavaScript transformer. For complex integrations combining Weebly, Square, and additional data sources with custom transformer logic, RapidDev's team can help architect the full Retool solution.

```
// Transformer: flatten Weebly form entries
const entries = data.data || data || [];
return entries.map(entry => {
  const fields = entry.fields || {};
  return {
    id: entry.id,
    submitted_at: new Date(entry.created_date * 1000).toLocaleDateString(),
    form_id: entry.form_id,
    // Flatten all form field values into columns
    ...Object.fromEntries(
      Object.entries(fields).map(([key, val]) => [
        key.toLowerCase().replace(/\s+/g, '_'),
        val
      ])
    )
  };
});
```

**Expected result:** Form entry data is cleanly normalized into tabular columns, and the dashboard handles Weebly's API limitations gracefully with cached queries.

## Best practices

- Store Square and Weebly access tokens in Retool Configuration Variables marked as secret (Settings → Configuration Variables) — never paste tokens directly into resource configuration fields where they would be visible in the resource editor
- Create separate Retool resources for Square Sandbox and Square Production environments, and test all query logic against Sandbox before pointing dashboards at Production data
- Enable 60-second query caching on Weebly API read queries — the Weebly API has undocumented rate limits and caching prevents hitting them when multiple team members view the dashboard simultaneously
- Use Square's location_ids filtering in all order queries rather than fetching all orders globally — scoping to the Weebly store location returns only relevant data and improves query performance significantly
- Handle Weebly Unix timestamp format explicitly in all transformers (multiply by 1000 for JavaScript Date compatibility) and add a null check before conversion to avoid transformer crashes on incomplete records
- For form submission data with variable fields, use a flattening transformer rather than hardcoding column names — Weebly forms can have different fields per form, and dynamic key extraction keeps the Table adaptable across form types
- Combine the Weebly form data resource with a PostgreSQL or Google Sheets resource in Retool to archive form submissions to a persistent store — Weebly's API returns submissions on demand but does not provide export guarantees

## Use cases

### Build a multi-site Weebly form submission tracker

Create a Retool panel that queries all form submissions across multiple Weebly sites. Display submissions in a filterable Table with columns for site name, form name, submission date, and field values. Add export functionality and a status column so operations teams can mark submissions as handled directly in Retool.

Prompt example:

```
Build a Retool dashboard that lists all Weebly form submissions across sites, filterable by site and date range, with a Table showing form fields and a button to mark submissions as reviewed.
```

### Build a Weebly e-commerce order management panel

Create a Retool dashboard using Square's Orders API to view and manage orders from Weebly online stores. Display order status, customer details, and line items in a Table with filtering by status and date. Include order fulfillment update buttons that call Square's Order API to update fulfillment state.

Prompt example:

```
Build a Retool panel showing all Weebly/Square store orders with filters by status (OPEN, COMPLETED, CANCELED) and date range. Include a detail panel showing line items and a button to mark orders as fulfilled.
```

### Build a blog content audit dashboard across Weebly sites

Create a Retool content management panel using Weebly's legacy API that lists all blog posts across multiple Weebly sites. Show publish status, title, created date, and URL. Add bulk publish/unpublish actions and a search filter for content audits and SEO management workflows.

Prompt example:

```
Build a Retool panel that queries all blog posts from multiple Weebly sites via the Weebly API, shows their publish status, and includes bulk update controls for publishing and unpublishing posts.
```

## Troubleshooting

### 401 Unauthorized error when querying the Weebly API resource

Cause: Weebly's OAuth access tokens expire and must be refreshed. Unlike Square personal access tokens (which are long-lived), Weebly OAuth tokens have a configurable expiry. A token generated weeks ago may have expired, causing 401 responses.

Solution: Regenerate your Weebly access token through the OAuth authorization flow at https://api.weebly.com/v1/authorize. Update the WEEBLY_ACCESS_TOKEN configuration variable in Retool's Settings → Configuration Variables with the new token. For production integrations, implement a Retool Workflow that automatically refreshes the Weebly OAuth token using the refresh token before expiry.

### Square API returns empty orders array despite orders existing in the Weebly store

Cause: Square's Orders Search API requires the correct location_id for the Weebly store. Each Weebly store is associated with a specific Square location. If the location_id in the request does not match the Weebly store's location, the response returns an empty orders array rather than an error.

Solution: Create a GET query to the Square API at /v2/locations to list all locations. Find the location whose name matches your Weebly store. Copy its id and use it in the location_ids array of your orders search query. Alternatively, add a location selector to your Retool dashboard that populates from the /v2/locations endpoint.

### Weebly form entries transformer throws 'Cannot read property of undefined' error

Cause: Weebly's form entries API returns data in different shapes depending on the API version and how forms were created. Some entries nest field values under an 'entry_data' key while others use 'fields', causing transformers that hardcode one key name to fail.

Solution: Use a safe fallback in the transformer that checks both possible key names: const fields = entry.fields || entry.entry_data || entry.data || {}. Log the raw data object in the Results panel using console.log(JSON.stringify(data[0])) in the transformer to confirm the exact response shape for your account.

```
const entries = data.data || data || [];
return entries.map(entry => {
  const fields = entry.fields || entry.entry_data || {};
  return {
    id: entry.id || entry.entry_id,
    submitted_at: entry.created_date
      ? new Date(entry.created_date * 1000).toLocaleDateString()
      : 'Unknown',
    ...typeof fields === 'object' ? fields : {}
  };
});
```

### Square API returns 400 Bad Request on the Orders Search endpoint

Cause: Square's Orders Search endpoint requires a JSON body with specific structure. Missing required fields like location_ids, or passing date strings in incorrect ISO 8601 format, causes a 400 error with validation details in the response body.

Solution: Open the failing query's Results panel to read Square's error response body, which specifies exactly which field is invalid. Ensure date strings are in full ISO 8601 format with timezone: '2024-01-01T00:00:00Z'. Verify the location_ids array contains at least one valid location ID string, not a number.

## Frequently asked questions

### Does Weebly have an official API I can use with Retool?

Yes, Weebly has a legacy developer API at api.weebly.com that covers site content, blog posts, form submissions, and basic store operations. However, since Square acquired Weebly, the more actively maintained APIs for e-commerce data (orders, customers, catalog) are Square's APIs. For a complete Weebly integration in Retool, you typically configure both a Weebly REST API Resource and a Square REST API Resource.

### Can I access Weebly form submissions through Retool?

Yes. Weebly's API exposes form submissions through the endpoint /v1/user/sites/{site_id}/forms/{form_id}/entries.json, authenticated with a Weebly OAuth access token. In Retool, configure a Weebly REST API Resource and create a GET query to this endpoint. Use a JavaScript transformer to flatten the nested field values into tabular columns for display in a Retool Table component.

### Why does my Square orders query return no results for my Weebly store?

Square's Orders Search API filters by location_id. Every Weebly online store is linked to a specific Square location. If you do not provide the correct location_id in your search request, the API returns an empty array. Create a GET query to /v2/locations to list all your Square locations, identify the one associated with your Weebly store, and use its id in the location_ids parameter of your orders search query.

### Is Weebly's API suitable for building a production internal tool?

Weebly's legacy API is functional but not actively developed since the Square acquisition. Rate limits are undocumented, and some endpoints may behave inconsistently across different account tiers. For production Retool integrations, prefer Square's API for all commercial data (orders, payments, catalog) and use Weebly's API only for content-level operations (blog posts, pages) where no Square equivalent exists. Apply query caching in Retool to buffer against rate limit uncertainty.

### Can I update Weebly blog posts or pages from Retool?

Yes. Weebly's API supports PUT requests to update blog posts at /v1/user/sites/{site_id}/blog/posts/{post_id}.json. In Retool, create a PUT query on your Weebly API Resource with the post ID from the selected table row and a JSON body containing updated fields like title, body_html, and publish_date. Add an On Success event handler to refresh the posts list query and show a success notification.

---

Source: https://www.rapidevelopers.com/retool-integrations/weebly
© RapidDev — https://www.rapidevelopers.com/retool-integrations/weebly