How to build a dynamic testimonial section with the Webflow CMS

If you run a directory like I do with Unicorn Factory or you run an e-commerce store in Webflow E-Commerce, you might want to add a testimonial section for your service providers or products that filters testimonials depending on the CMS page. In this video, I show you how to build it... let's go.

‍

Design and build the testimonial section with Webflow

The first thing to do is to design the section in Webflow. I typically build the section from scratch or use the Relume library. I make sure that my section and components look exactly how I want it to look before I create the CMS collection.

^‍

A great resource to speed up your workflow is using the Relume Component Library. You can simply browse through their component library and use whatever your component your use case fits best.

Once you have copied your component into your Webflow project, you might need to make some modification, so feel free to remove fields you no longer need or add whatever is missing.

Create the testimonial section in the Webflow CMS

Once you are happy with how your component looks it is time to add dynamic data. We can do that by setting up our Testimonial collection in the Webflow CMS.

‍

Add all the fields that will be dynamic to your CMS like I did with my testimonial test, client name, client job title/company and avatar.

The next very important field that is very important to add is a link to our freelancer table, so that we can filter testimonials based on the freelancer page.

Once your CMS is setup, add some sample records to your CMS and move on to the next step where we connect our CMS records to our component in Webflow.

Map your testimonial CMS to your testimonial component

Mapping the fields from the Webflow CMS to your page is simple. Simply click on the components inside of the designer and dynamically connect the CMS fields to each component. Please note that at this point your component has to be in a CMS Collection list which you can add from the add element panel.

How to filter out CMS records by the CMS page

Once your component is connected to the CMS there is one last thing to do and that is to apply a filter where the testimonial is filtered by the page that we are on. That way not all testimonials appear on all pages, but instead only testimonials that apply to this page.

Create your Airtable Testimonial Table

Now we are pretty much good to go in Webflow. In order for us to connect the Webflow CMS to our database we have to do the three things:

1. Create a testimonial table in our Airtable account
2. Add all fields in the Webflow CMS to our Airtable table, so we can map them to each other
3. Add fields for storing the Webflow ID and Slug

‍

The field types need to match the field types that you have in Webflow. For example a single text field in Airtable is the same as a single line text in Webflow. A linked record in Airtable is the equivalent of a Webflow Single Reference.

We also want to create a field for our status with the values: Needs Review, Approved, Live, Remove and Archived. Once created create a new view and filter out only approved records. We are going to use this view in the next step.

Add some sample records to Airtable and let's move on to the final step which to connect Airtable to Webflow using make.com.

Set up the Make Workflow

In Make we want to define our trigger as "Watch records" filtered by the approved view. Be sure to add a last modified time field to your Airtable table to ensure that make.com knows when an update is made to a record.

From there we want to add our action steps which is to firstly create a Webflow CMS item and then once created an action step that allows us to the Airtable record with the Webflow ID and slug.