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.