How to Set Up Complete Functionality in Webflow

Welcome to Lesson Number 5! In this lesson, we will walk through setting up the complete functionality for Marquez. This involves adding a button to the lessons page. When a member clicks the button, it will initiate a sequence and add a row in the completed videos table in Airtable. The data will then be sent back to Webflow to update the member's profile with the video they have watched. Let's dive in and get started!

Adding a Field in Webflow

1. In Webflow: Start by adding a field on the video collection in Webflow to store the item ID. This is critical for identifying which video the member marks as complete. Go to collections, then series episodes, click settings. Add a plain text field named "episode item ID" and save the collection.

2. Manually or Automated Process: If you have few episodes, you can add the IDs manually. Alternatively, you can use services like Integromat or Parabola to automate this process. The IDs will be used to uniquely identify each video.

Creating the Button in Webflow

1. Add a Form: In the series episodes template, add a button to mark the video as complete by using an entire form. This form submission will act as a trigger to initiate the Zapier process.

2. Add Hidden Inputs: To pass additional information to Zapier, add hidden inputs within the form. These inputs will store the video name, video ID, and member's Webflow ID. The video name and ID will be pulled from the CMS, while the member's Webflow ID comes from the member's profile.

3. Form Submission: When the submit button is clicked, the hidden inputs will be sent to Zapier. This will allow the subsequent processes to add the video to Airtable and update Webflow with the completed video information.

Setting Up Zapier

1. Trigger in Zapier: Create a new Zap process with the trigger being a web flow form submission. Select the respective account and form name.

2. Submission Data: Once the form is submitted, Zapier will pull the necessary information, including the video name, item ID, and member's Webflow ID.

3. Lookup in Airtable: Zapier will then look up the member in Airtable to find the corresponding record based on the member's Webflow ID. This ensures that the completed video is associated with the correct member.

Adding Records in Airtable

1. Identifying the Member: In Airtable, locate the member's record based on their Webflow ID.

2. Creating a Record: After finding the member, create a new record in the completed videos table. Populate the video name, video ID, and member reference fields. This information is passed through the hidden inputs from Webflow.

Updating Webflow Using Webhooks

1. Roll-up Field in Airtable: To send the completed video information back to Webflow, a roll-up field needs to be created in the members table. This roll-up field will consolidate all the completed video IDs associated with a specific member.

2. Custom Request in Zapier: Use the Webflow API via a web hook to update the member's record in Webflow with the completed video IDs.

3. Data Formatting: The data passed through the web hook needs to be formatted in a specific way specified in the Webflow API documentation. This formatting includes the fields to be updated and the associated video IDs.

4. Authorization and Headers: For the web hook to work, set the authorization, accept version, and content type headers as required by the Webflow API.

5. Testing and Review: After setting up the web hook, test it to ensure that the updated data is correctly sent back to Webflow.

Conclusion

By following these steps, you can set up the complete functionality in Webflow to track and update member profiles based on the videos they have completed. This tutorial demonstrates how to seamlessly integrate Webflow with Airtable and Zapier to create a robust and automated system for managing member interactions and video completion tracking.