How to export head code from webflow's widget

I wanna ask, if this is possible. So, I have a news section in my website created using webflow (iiga.news). I put it in the CMS section. I want to export it so it become a head code in other websites. The reason is I want to create a section in other websites that preview my website news section’s and when I updated the news from webflow it will automatically update the news from the other websites as well. Is it possible to export webflow’s widget code so I can use as a head code in the other websites? If it is possible, how?

Webflow doesn’t have any form of “widget code.”

If you wanted to create content in your Webflow site that’s shared to other sites, your best bet is to simply create a hidden page that contains the piece you want, and then IFRAME it in your target sites.

It’s also possible to program a widget in the form of a CDN-delivered JS lib that fetches your content and integrates it but the CSS styling becomes much more difficult to isolate, and this requires some fairly advanced techniques.

So i want to display CMS data to other websites, is there a way? Like use embed code maybe and then put it as a head code in the other websites?

Yes, I gave you two approaches you can use above. IFRAMES, or custom coding a fetch solution.

So using iFrame is basically displaying one page from webflow to another page right? Is there away to just display the CMS data on to other websites or maybe the ferch solution work? If it does can you tell me more about it?

I’m not sure what you’re trying to ask- at this point your best option is to follow the paths I’ve suggested so you can try out the options.

Again, the IFRAME is easiest to implement, by far. Anything else requires a decent level of programming skill.

By definition, anything you’re displaying has HTML. Here you’re building the display you want, and then embedding it via IFRAME.

If you want raw data, look into the CMS API.
But then, what’s the point of using Webflow if you’re not generating HTML?

Maybe to give you some idea here’s a screenshot on what i want to export.

As you can see, that is a widget or maybe an element that only display data from the cms collection. It display news and when we click one of them it refers to another page displaying the news content. The problem of using iFrame is that it did work but when embeded to another website it has a problem which is this.

As you can see, the image above is already embeded on other website, when I click the news it redirect me to a news page but the problem is that the navbar still follows.

The question now is are there a way to remove the navbar without changing the layout of the original website (meaning the page that display news content with navbar must still running in the real website that is created by webflow and on the other hand the other websites show the news content without showing the navbar)? I was thinking maybe is it possible to take the elements that display the cms news data and the content only but not the whole page?

That’s correct, an IFRAME will embed the entire page you give to it, so if you want just the content in your top screenshot, you need to put that on its own page, and then use that for your IFRAME url.

So the logic that I have in mind is that to display a news content page with no navbar page in the other website and the page with the navbar in the real website is I create a new CMS that has the same data as the original one and costumize that new cms collection page with no navbar and display the new one to the other websites. The problem is that means every time there is a new data, I need to create twice both in the original cms and on the duplicated one. Is there an easier way like when I upload one data to one cms the others automatically duplicated or maybe other easier way to deal with this thing?

If you’re trying to achieve this with CMS data, so that e.g. 1,000 CMS records = 1,000 possible IFRAME embed variations, I’d personally approach it using javascript or a reverse proxy, depending on the performance and security I need.

I’d design the collection page to contain the “widget” part as a hidden element, and then if a special querystring is specified, the custom code / RP would hide or delete everything else and make just that one element visible.

Custom attributes are great for this because they provide a clean way to identify specific elements in code, and they can be managed in the designer.

You’ll need some programming knowledge if that’s what you’re trying to build.

So based on your explanation, it is still possible to have both the page that display content with and without navbar running without duplicating the cms? are there any easier way like maybe when I update to the original cms, the other cms that use to display the page without the navbar auto update? Because the problem i’m now if using iFrame is that when i click the news link, it shows the news content page with the navbar and I want that navbar gone in the other websites. That is why I was thinking to have 2 CMS with the same data is easier because the duplicated one I can just redesign it without the navbar. But the problem is, I have to upload twice whenever there is a new data I want to upload to the cms. So I was thinking, maybe there is a way so that when I upload a data in one cms the other cms automatically update the same data so I dont have to upload it twice?

Yes that’s why I gave you the alternative programmatic solution above. If you can code, you can use one collection page for both purposes.


So that is the code that chatgpt gave me. If i want to put the code or maybe use your solution, where can I put that code?

i have this error while inspect and then go to console

image

So what i was doing is that I embed this code so that I can do an update on one cms and then it automatically update on another cms.

And maybe do you know where is the CORS configuration in webflow?

There is no CORS configuration in Webflow.

IFRAMES generally don’t require CORS, but they do require that your headers permit iframe embedding. Webflow’s staged webflow.io sites do not. You must host your site first to be able to IFRAME it in other domains.

Getting a CORS error generally suggests you are trying to access an inaccessible resource from client side code? You can’t do that. Perhaps you’re trying to access the API from client-side JS? Webflow doesn’t support this, for security reasons.

You’re going in several directions here.
I suggest you pick one and research it, learn how to use it, or hire a developer to see you through it.

Best of luck with your project.

1 Like

Does webflow support duplicating cms database to another cms database? Meaning the data inside one CMS be copied to another cms database.

You can probably answer these questions faster by just trying.
You can export the CSV, and import the CSV.

Do you know make.com?

1 Like