How can I import and display event registration data from Airtable into a custom dashboard on Webflow, while ensuring that only registrations specific to each company's event are shown?

To import and display event registration data from Airtable into a Webflow dashboard while showing only company-specific event data, you’ll need to use Airtable as a backend, integrate it with Webflow using a front-end framework or API middleware, and apply user-specific filtering.

​

1. Set Up Airtable with Event and Company Data

• Create an Airtable base that includes at least two tables: Events and Registrations.
• Each Registration should link to an Event, and each Event should be associated with a Company.
• Include key fields such as:
• Event Table: Event Name, Company ID
• Registration Table: Registrant Name, Email, Event (linked)

​

2. Enable Airtable API Access

• Go to Airtable Account Settings and get your API key/token (Airtable now uses Personal Access Tokens).
• Go to https://airtable.com/api and select your base to get the API schema.

​

3. Create a Company Login System in Webflow

• Use Memberstack, Outseta, or Firebase Auth to handle user authentication in Webflow.
• Ensure each logged-in user represents a company and has a unique Company ID associated with their account.

​

4. Use a Front-End Script or Middleware (e.g., Make, Wized, or Custom Front-End JS)

• Use a tool like Wized, Make (Integromat), or custom JavaScript fetch within Webflow to connect to Airtable.
• Wized is especially suited for this: it can connect to Airtable, pull data, and integrate authentication.

​

5. Filter Data for the Logged-In Company

• Use the Company ID from the logged-in user session to build a filter for the API call.
• Example Airtable API filter formula:
• FILTERBYFORMULA=({Company ID}='1234') (replace '1234' with dynamic session value)
• This ensures only that company's event registration data is pulled.

​

6. Display Data in Webflow

• Create a custom collection layout in Webflow using custom attributes that Wized or your front-end JS can bind to.
• For example, use Webflow elements with attributes like data-field="Registrant Name" which your JS or tool (e.g., Wized) can populate dynamically.

​

7. Secure the Data

• Ensure you don't expose your Airtable API key in front-end code.
• Use server-side middleware (like an AWS Lambda, Vercel function, or Make router) to make secure API calls if needed.
• Only allow authenticated requests to access filtered data.

​

Summary

To show company-specific event registrations from Airtable in a Webflow dashboard, set up related Airtable tables and authenticate users in Webflow with a unique Company ID. Then use Wized or custom JavaScript to securely fetch and filter the data from Airtable, displaying it dynamically in the Webflow dashboard layout.