← All blog posts

How to build a dynamic testimonial section with the Webflow CMS

Learn how to create a dynamic section in the Webflow CMS for product reviews, testimonials, and more. Watch the step-by-step process of designing, building, and automating a brand-new section on my profile page.

October 27, 2022

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.

Use the code

Copy

Dive Deeper with the Webflow CMS Series using Make.com

Learn how to use make.com to send data between Airtable and the Webflow CMS. These are the workflows to create Webflow directories and marketplaces.

Learn more →
Subscribe to the newsletter!

Get notified when I publish my next video or blog

😘 Got it!
Oops! Something went wrong while submitting the form.
🚀 Webflow Apps - Reviewing Webflow's Biggest Update This Year!

🚀 Webflow Apps - Reviewing Webflow's Biggest Update This Year!

Explore Webflow's revolutionary app updates and API changes that enhance design capabilities and user experience, featuring standout apps like Unsplash, Jasper AI, Finsweet Table, and Memberstack.

🤯 Relume's AI Site Builder is UNBELIEVABLE!

🤯 Relume's AI Site Builder is UNBELIEVABLE!

Relume has once again taken things to the next level AGAIN. This time with their AI Site Builder tool that will allow you to turn a simple prompt into a sitemap and wireframes with AI generated copy in seconds.

Setting Up Client Portals in Glide for Your Two-Sided Marketplace | Course Preview

Setting Up Client Portals in Glide for Your Two-Sided Marketplace | Course Preview

Welcome to my brand new course on how to build customer portals for two-sided marketplaces in Glide! Glide is an incredible tool that can revolutionize your business, as I've experienced firsthand while working on the Unicorn Factory.

🚀 6 Tips for Building Webflow Sites More Efficiently

🚀 6 Tips for Building Webflow Sites More Efficiently

Discover the secrets to enhancing your Webflow design process with these 6 essential tips! In this video, we'll walk you through time-saving techniques, productivity-boosting hacks, and valuable strategies to help you build Webflow sites more efficiently. From style guides to on-page optimization, these expertly-crafted tips will empower you to work smarter, create beautiful and responsive websites faster, and take your Webflow skills to new heights. Don't miss out on unlocking your full Webflow potential – tune in now to elevate your website-building experience!

Supercharge Your Webflow Landing Pages: Creating Custom Open Graph Images with Placid (Part 3)

Supercharge Your Webflow Landing Pages: Creating Custom Open Graph Images with Placid (Part 3)

Join us for the final installment of our series as we explore the creation of custom open graph images for each landing page. In Part 3, we'll use Placid to automatically generate visually appealing open graph images with custom screenshots and text. Enhance your website's social media presence and elevate your landing pages with these custom images. Complete your automation journey and unlock your website's full potential with this innovative workflow.

Supercharge Your Webflow Landing Pages: Automatically Updating Webflow CMS Items (Part 2)

Supercharge Your Webflow Landing Pages: Automatically Updating Webflow CMS Items (Part 2)

Continue your automation journey with Part 2 of our series! In this video, we'll guide you through setting up a workflow that automatically updates Webflow CMS items whenever any of your titles have been created or updated. We'll use Airtable Automations to trigger a make.com workflow that seamlessly updates your Webflow items. Streamline your website-building process and keep your landing pages up-to-date with this powerful workflow.