How to display CMS data from Webflow in my website?

Hi guys!
Recently I made a blog and a website on Webflow as CMS, both projects are individual, but belongs to the same company
In website we have an section named Practice Areas that show all the Areas that we have in the office and leads the user for individual pages to know more about them.
However, I want to link and display some blog posts inside of this individual pages based on practice areas (both projects have the same category’s/practice areas).
Here’s an example for you guys understand better I’m trying to do: I have an individual page for Labor Area and at the middle of the page, I want to display 4 blog posts that’s has the Labor Category.
Is there a way that I can do this in Webflow? And If has, can I do this with API integration? Or the API Integration is for others platforms?

Thanks!

P.S: I’m sending some photos to illustrate better what I’m trying to do.

image
image


Here is my site Read-Only: Webflow - Fcmlaw
(how to share your site Read-Only link)

Absolutely. You just add a CMS element on the page (regardless if it’s static or dynamic) and set up which filters you’d like in the settings panel on the right. See image below.

2 Likes

Hi Joseph, thanks for the feedback!

But this I already know. What I’m trying to, is pull this data from other Webflow website to display in this website.
I have a site and I want to display the content of blog posts in the website based in different category’s, but, the blog posts is a different domain/project. I’m having difficult to do that via API.
That’s is I’m trying to do, not this, unfortunately :frowning:

Okay, gotcha. Short answer is yes, but i’m not sure of the difficulty. There’s not a native way to do this in Webflow, so you’ll have to use an integration like Zapier or Make. But even with those integrations, it might not be possible without custom code. I haven’t explored this scenario enough.

1 Like

Hey @carolmascarenhas !

Here is an idea that might solve your problem, using Make (Integromat) :

First I would add 2 checkboxes to the “source” CMS collection :
-1 called “To Repost on X”, (to mark posts to be re-shared)
-1 called “Reposted on X”, (to mark posts already re-shared)
Then I would use Make to create a scenario along those lines :

STEP 1 :
List CMS Items (from the source website)

STEP 1.5 :
Add a filter between Step 1 & 2 to only return items matching both conditions :
“To Repost on X” = true AND “Reposted on X” = false
This will filter out posts that don’t need to or have already been reposted.

STEP 2 :
Create New CMS Item (in the destination Webflow collection)
This step will run for each item coming from Step 1 and matching the filter conditions.

STEP 3 :
Update CMS Item (in the source website)
We need to mark the “Reposted to X” = true, so that we don’t create any duplicates next time the automation runs (thanks to the conditions in step 1).

Then you can run the scenario periodically, or each time the source website is repubished/updated.
That way all you need to do is to check the “Repost” checkbox on the posts that you want to re-share to another website (either when publishing them for the first time, or by simply updating them), and the rest would be handled automatically !

Screen Shot 2022-03-22 at 3.06.06 PM|690x162

2 Likes

In Zapier it is not possible for what I tried. But, I think it’s possible to do this in Make, as @PierredeMontalte said. I’ll try and see how it works.

Thanks for the help and the answers anyway, it was very helpful! Thank you! :heart:

Thank you for the answer! I apologize for the delay!
This solution is absolutely fantastic!
But from what I understand, these conditions will create new items based on the blog collection on my site, right? Can I share the way I made it so you can see if it’s correct?

@carolmascarenhas that is correct, the idea is more to “push” the selected content from the initial source, rather than “pulling” it from the destination, because I think it’s going to be much easier to implement that way.

Personally I tend to always use Airtable as a CMS (linked to Webflow with Make), as I find it makes it easier to centralize everything in one “source of truth”, and then selectively sync to one (or more) websites from Airtable, based on checkboxes or other attributes. I also find this works better for batch updates. But you don’t need to do that to make it work, it’s just my own preference.

And yes feel free to share your setup and I’d be happy to check it out !

1 Like

@PierredeMontalte I thought about using Airtable too, it’s a very interesting option, but we found some limitations.
Is there a way to make current blog posts go straight to Airtable and every time there is an update of a new item it will add it to the webflow? I will speak to the backend developer to help me with this as well.

But getting back to what I did, here are some images:

STEP 1: I connected the blog to get the collection of posts and added a switch with the names you put in the post just to guide me.


image

STEP 1.5:
I created a filter for the condition of true or false between steps 1 and 2

STEP 2:
I created a new collection on the website that will display these posts, called posts and created some fields to link the fields of the collections of the Blog posts

STEP 3:
Here I had some doubts about which site will be linked, but I did it in two ways:
First way:


Second way:



STEP 4: No items have been created in my site collection that will display this content. That was the purpose, right?
image

What did I do wrong?

@carolmascarenhas are you getting any error message when running the scenario ?
Here a few things that could be the source of your problem :

-Have you tried refreshing the Webflow Designer page ?
Any changes done to the CMS through API calls will not appear in the Webflow Designer until you
reload the page.

-Did you republish your “destination” website after creating the new posts collection, but before running the sync scenario ?
When you create a new collection in Webflow without re-publishing the site afterwards, you can already see the new collection and map the fields in the Make editor, but it won’t work properly when you run the scenario (which can be quite confusing sometimes). So maybe republish, check your mapping and run it again ?

-Is your filter working properly ?
It seems that no items are going through the filter on the screenshot you shared (It says “0”).
Make sure that you actually have bundles going through to the next steps !

If you press “Run Once”, it should show you a little bubble with a number (or a warning) on top of each module (and the filter), which will show you the Input Data received by the module and the Output Data that was sent to the next module (or the error type if the scenario failed).
That might help you identify which module might be causing those issues.

Also, the 2 checkboxes (“To Repost” and “Reposted”) are only needed at the “source” collection, to avoid posting duplicates. But you don’t need to have those checkboxes in the “destination” collection, since you only need to filter results from the “source” collection.

As for your doubts about Step 3, it should be connected to the “source” collection, same as in Step 1.
You basically just need mark the post that you just republished as “Reposted” = true, so that it is filtered out next time you run the scenario, and won’t be published again in Step 1.
But you don’t need to fill out any other fields in Step 3 (except the name, which is a mandatory field).

Hope this helps you troubleshooting the issue !

1 Like

And to answer your first question @carolmascarenhas, yes you can totally import all your previous posts to Airtable, either by downloading them as a CSV and re-importing them in Airtable (but it might not work super well for all field types), or you could also import them with another Make scenario like this :

Step 1: Webflow - List CMS Items
Step 2: Airtable - Create A Record

This will create an Airtable record for each CMS entry listed from Step 1, effectively copying your CMS database. You might also want to add a “break” error handler to the Airtable module, so that the scenario just pauses (instead of breaking/stopping) if you hit Airtable API limit.
And if you have a Rich Text field, you will need to convert it from HTML (coming to Webflow) to Markdown (for Airtable) between step 1 and 2. But Make has a dedicated module for that.

Then inside Airtable you can add buttons to fire webhooks with the current Record ID attached, to trigger a Make Scenario which will either create/update or delete the item in Webflow.
(I’m actually working on a video tutorial for that, will send it to you when it’s live !)
Or you can also create scripts or automations to fire those webhooks when specific conditions are met, but I personally find that in most cases, a plain old button just does the job perfectly to push your edits from Airtable to Webflow !

1 Like

Hello @PierredeMontalte!
I have re-done all the steps now correctly, but the filter is not getting any results as you can see in the image below.


All other steps are now correct, but the filter is not getting the data. And these fields I have to put, because it’s mandatory in webflow.
I really can’t see why it doesn’t get the data. I can’t see what the error is either because it doesn’t throw any errors for the scenarios.``

Wow @PierredeMontalte! It looks so much easier that way, LOL!
I’ll talk to the backend developer who is responsible for this type of automation to see if we can do it this way in case the other type doesn’t work.
Thanks for all the help! I’m really happy and grateful for that :heart:

1 Like

Hey @carolmascarenhas, looks like you’re almost done getting it to work with Make. Good for you, it’s not easy to get all those scenarios to work.

But, next time you want to sync Airtable to Webflow, give PowerImporter a try. It’s a done-for-you automation tool that takes care of everything for you, so you can get back to design instead of debugging automations. :grin:

1 Like

Congrats @carolmascarenhas, you’re almost there ! :grinning:

In your filter, are the true and false spelled all in lower case ?
On your latest screenshots it looks like they are spelled True and False, but some logical operators are case sensitive (meaning that “a” does not equal to “A”), so that could explain why the filters are blocking everything, since the true and false values coming from Webflow are in lower caps.

So I would try spelling everything in lower case first, and see if that works !
Hoping that solves your issue :slightly_smiling_face:

1 Like

Hi @PierredeMontalte thanks for the tip!
After a few errors that he pointed out and a lot of thinking, I managed to make it work! Thank you so much for the help, I don’t even know how to thank you, from the heart!
You really saved me! And I’m sorry for the many, many answers and questions, it’s my first time working with Webflow and Make, so I got a little lost with some things.
Thank you so much for all the help, you’re amazing! :heart: