Webflow sync, pageviews & more.
NEW

Is it possible to integrate a directory of people, built in Gatsby with Airtable, into Webflow using an embed or "rewrites" feature similar to Vercel and Cloudflare Pages?

TL;DR
  • Embed the Gatsby directory in Webflow using an iframe hosted separately (e.g., on Netlify), though it limits styling, SEO, and cross-domain compatibility.
  • Use an external proxy (e.g., Cloudflare Workers, Vercel Middleware) to serve Webflow at / and Gatsby at /directory under the same domain.
  • For full integration and better SEO/styling, sync Airtable data into Webflow CMS via tools like Whalesync or PowerImporter and rebuild the directory natively.

You want to integrate a Gatsby + Airtable-powered directory into Webflow, potentially using embed or URL rewrites like those on Vercel or Cloudflare Pages. Here's how to approach that.

1. Embedding the Gatsby Directory via Embed Element

  • You can embed your Gatsby directory using an <iframe> inside Webflow using the Embed element.
  • This works well if your Gatsby site is hosted separately (e.g., on Netlify or Vercel).
  • Example flow:
  • Deploy your Gatsby site at https://directory.example.com
  • Inside Webflow, drag an Embed element and insert:
    <iframe src="https://directory.example.com" width="100%" height="600" style="border:none;"></iframe>
  • Limitations:
  • Styling may not match Webflow automatically.
  • Cross-domain restrictions (e.g., if your Gatsby site sets X-Frame-Options: DENY) may block rendering.
  • SEO is limited since content is inside an iframe.

2. Proxy (Rewrites) Using External Hosting

  • Webflow does not currently support custom rewrite rules like Vercel/Cloudflare.
  • You cannot host both Webflow and Gatsby content under the same root domain (e.g., combining /directory from Gatsby and /about from Webflow) without an external proxy.
  • Workaround:
  • Use Cloudflare Workers, AWS CloudFront Functions, or Vercel Edge Middleware to proxy requests.
  • Host the Webflow site on a subdirectory path (e.g., /) and proxy /directory to Gatsby.
  • Example setup:
    • Web host (e.g., Cloudflare) serves Webflow at /
    • Rewrites/proxies requests to /directory to https://your-gatsby-site.com
    • This allows blended experience under one domain (yourdomain.com/directory)

3. Alternative: Fully Migrate Directory into Webflow CMS

  • If SEO, styling, or integration is critical, consider migrating your Airtable directory into Webflow CMS using tools like:
  • Whalesync or PowerImporter to sync from Airtable to Webflow CMS.
  • Then use Webflow CMS Collections and Templates to create the directory interface.
  • Benefit: Fully integrated, styled, and SEO-capable inside Webflow.

Summary

To integrate a Gatsby + Airtable directory into Webflow, the simplest native option is an iframe embed, but it has limitations. Webflow does not support native rewrites, but you can use external proxies (e.g., Cloudflare Workers) to serve both Webflow and Gatsby on one domain or path. For tighter integration, consider syncing Airtable into Webflow CMS.

Rate this answer

Other Webflow Questions