Setting up Airtable for your Webflow Project

In this lesson, we will be setting up Airtable to store data for our Webflow project. Airtable will act as a third-party database that is essential for implementing the mark as complete functionality in the next lesson. This functionality requires tracking every time a mark as complete button is clicked, including which user clicked it and on which video they clicked it. Airtable is the perfect solution for this requirement.

Step 1: Signing Up and Creating a Base

Start by going to airtable.com and sign up if you haven't already. Once signed in, we'll begin by adding a new base and starting from scratch. Let's name this base "No Code Membership Demo."

Creating the Members Table

Our first table will store member data. Rename the default table to "Members." We'll add fields for member name, email address, and their Webflow item ID.

1. Member Name
2. Email Address
3. Webflow ID

Adding Member Data to Airtable via Zapier

We'll use Zapier to add a row to the Members table in Airtable. This will allow us to automatically populate member data from Webflow into Airtable.

Setting Up the Zap

1. In Zapier, add a step to create a record in Airtable.
2. Select the base "No Code Membership Demo" and the table "Members."
3. Map the member name, email address, and Webflow ID from Webflow into Airtable.

After testing and reviewing the Zap, ensure that it successfully adds the member data to the Members table in Airtable.

Renaming and Enabling the Zap

Rename the Zap to "New Member Signup" and turn it on to ensure that it is ready to process new member signups.

Creating a Completed Videos Table

The next table we'll set up is the "Completed Videos" table. This table will track every time a member clicks the "mark as complete" button on a video, associating each completion with the member and the video.

1. Video Name
2. Member Name
3. Video Webflow ID
4. Member Reference (linked to the Members table)

Connecting the Completed Videos Table to the Members Table

By adding a reference field to the Completed Videos table that links to the Members table, we can ensure that each completion is associated with the correct member.

Next Steps

In the next lesson, we'll set up the "mark as complete" button on our lessons page. When a user clicks this button, it will trigger a Zapier action to add a row to the Completed Videos table in Airtable. This action will also update the member's data in Webflow to reflect the completed video.

By integrating Webflow with Airtable and Zapier, we can create a seamless process for tracking member interactions and managing data for our project.

In conclusion, utilizing Airtable as a third-party database in your Webflow project can enhance the functionality and efficiency of your web application. By following these steps, you can seamlessly integrate Airtable with Webflow using Zapier to automate data management and improve user experience.