Awesome Table

Awesome Table turns Google Sheets data into filterable tables, card layouts, maps, charts, and org charts you can embed on any Webflow page through a standard iframe. Update the sheet directly, and changes appear on the live site without republishing or touching the Webflow CMS.

This works well for freelancers building client storefronts, marketing teams managing catalogs, HR teams publishing staff directories, and any organization already running on Google Workspace — anyone who wants spreadsheet-driven pages without migrating content into a CMS or writing application code.

How to integrate Awesome Table with Webflow

What is Awesome Table? Awesome Table is a cloud-based tool that turns Google Sheets data into web views, including filterable tables, card layouts, Google Maps overlays, charts, Gantt timelines, and org charts. It is a Google Workspace Marketplace add-on with over 10 million users and is built by Talarian Sàrl. It officially supports embedding on Webflow alongside WordPress, Wix, Squarespace, and other platforms.

Reach for Awesome Table when your source data already lives in Google Sheets and you need visitors to search, filter, or browse that data on the site. A retail business might display a filterable product catalog. A franchise might embed a store locator map. The spreadsheet stays the single source of truth, and the embedded view stays current without CMS updates or site republishes.

You'll typically use one of 3 implementation paths:

• Code Embed elements handle single-page and multi-page iframe embeds without writing backend code.
• Site-wide custom code loads supporting scripts or repeated snippets through Site Settings, but you'll usually handle visible Awesome Table placement with page-level embeds.
• The Webflow Data API and Google Sheets APIs give you full control over data sync between CMS collections and the Google Sheets that Awesome Table reads from, but require server-side development.

Most implementations rely on the Code Embed approach. If you also need to push form data into Google Sheets or sync CMS content, add the API path.

Add Awesome Table views with Code Embed elements

The Code Embed element is the officially documented way to place Awesome Table views on your pages. Copy an iframe snippet from Awesome Table's embed dialog and paste it into a Code Embed element on the target page. This approach works for single-page placements, and you can add multiple Code Embed elements to embed several views on the same page. Awesome Table's official Webflow guide covers this method exclusively.

To embed an Awesome Table view on a single page:

1. Open your Awesome Table app and click Embed.
2. Open the Iframe tab and copy the iframe code.
3. In the Designer, open the page and click Add Elements (the + icon in the left sidebar).
4. Under Components, find Embed and drag it onto the page canvas.
5. Paste the iframe code into the code editor that opens automatically.
6. Click Save & Close, then publish the site.

The iframe code follows this format:

<iframe height="600px" width="100%" style="border:none;" src="[your-app-url]"></iframe>

Adjust the height value to fit your layout. Setting width="100%" makes the embed fill its parent container.

You'll need a paid site plan to use Code Embed elements. The free Starter plan blocks all custom code with no workaround. The embed won't render on the canvas during editing — that's expected behavior for all custom code elements. Publish the site and view the live page to confirm the embed displays correctly.

Embed a pre-filtered view

You can embed different filtered subsets of the same Awesome Table app on different pages. A single product catalog app could show one category on a landing page and the full catalog on another, all from the same underlying Google Sheet.

To embed a pre-filtered view:

1. Open your Awesome Table app, add filters, and filter to the default state you want visitors to see.
2. Click Embed, then click OK in the pop-up.
3. Open the Iframe tab — the URL is now pre-filtered.
4. Copy the pre-filtered URL and wrap it in an iframe tag: <iframe src="YOUR_FILTERED_URL" width="100%" height="600px" style="border:none;"></iframe>
5. Add a Code Embed element, paste the iframe code, and publish.

Repeat this process for each page that needs a different data subset. The pre-filter documentation covers filter configuration in detail.

Add Awesome Table site-wide with custom code

When you need global custom code for a shared script or repeated snippet, use Custom code in head and body tags in Site Settings instead of individual Code Embed elements. For visible Awesome Table placement inside page content, stick with page-level Embed elements.

To add Awesome Table–related code through Site Settings:

1. Open Site Settings from the dashboard.
2. Click the Custom Code tab.
3. Paste your supporting Awesome Table code into the Footer code section.
4. Click Save Changes, then publish the site.

Footer placement is recommended because the code loads after the page content renders. This method has a separate character budget from Code Embed elements, which matters when your code is large.

Use Code Embed elements when you need precise placement on specific pages. Use site-wide custom code when you need global code to load across the site.

Build with the Webflow and Google Sheets APIs

Awesome Table has no public API. Programmatic control runs through the data layer it reads from: Google Sheets. If you need to sync site data with the spreadsheets powering Awesome Table views, or write external data into CMS collections, use the Data API and Google Sheets API. This path requires server-side development.

• The Google Sheets API reads and writes the spreadsheets Awesome Table renders
• The Data API v2 handles CMS collections and form submissions
• Webhooks trigger real-time events when CMS items change or forms are submitted

Every Data API request needs Bearer token authentication. The base URL is https://api.webflow.com/v2/, with a CDN-cached read variant at https://api-cdn.webflow.com/v2/ for high-traffic read operations.

Sync Webflow form data to Google Sheets

A common pattern sends form submissions into a Google Sheet that Awesome Table already displays. User-submitted entries, such as community resource listings, appear in the embedded view without manual data entry.

To set up form-to-sheet sync:

1. Register a webhook on your site for the form_submission event using POST /v2/sites/{site_id}/webhooks. Point the webhook URL at a serverless function (AWS Lambda, Google Cloud Functions, or similar).
2. In the serverless function, parse the incoming form payload and extract the field data.
3. Use the Google Sheets API to append a new row to the target spreadsheet with the form data.

This creates a simple automation path that feeds new form entries into the sheet Awesome Table displays. Webhook payloads include an x-webflow-signature header you can use for HMAC validation.

Write Google Sheets data to the Webflow CMS

When your site needs spreadsheet data in both an Awesome Table embed and CMS collections — for example, generating dynamic CMS pages alongside a filterable catalog view — a sync script can write Google Sheets rows into CMS items.

To set up sheet-to-CMS sync:

1. Read rows from the Google Sheet using the Sheets API GET /v4/spreadsheets/{spreadsheetId}/values/{range} endpoint.
2. Map each row to a CMS item schema matching your collection fields.
3. Create or update CMS items using POST /v2/collections/{collection_id}/items/live for new items or PATCH /v2/collections/{collection_id}/items/{item_id}/live for updates.

This pattern keeps spreadsheet-managed data available in both Awesome Table embeds and CMS pages. Bulk operations handle up to 100 items per request. The CMS plan supports 2,000 CMS items, and the Business plan supports 10,000 — factor these limits into your sync logic for large spreadsheets.

What can you build with the Awesome Table Webflow integration?

Pairing Awesome Table with Webflow lets you publish filterable data views on any page without building a database or writing frontend application code.

• Filterable product catalog: Display a full product inventory with search and category filters on your storefront. Product managers update prices, descriptions, and images directly in Google Sheets, and the embedded Cards or Table view reflects changes immediately.
• Interactive store locator map: Embed a Google Maps view showing all physical locations with hours, contact details, and directions. Visitors can filter by region or store type. Adding a new location just means adding a row to the spreadsheet.
• Staff or member directory: Publish a searchable employee or member directory on an intranet or association site. HR staff maintain the directory in Google Sheets, and the embedded view supports filtering by department, office, or role.
• Community-contributed resource board: Pair a Google Form with Awesome Table to let visitors submit entries that appear automatically in a filterable view on the page.

If you need more control over CMS-driven pages or bidirectional data sync, the API integration path covers those cases with full flexibility.