I am still trying to learn Webflow as fast as I can.
I am having a little confusion with some custom code which works in preview (e.g. code to add commas in between collection items in a collection list) and custom code which will only work on published sites (e.g I added some code to always display the current year in the copyright notice).
In the latter case (copyright year), I first put the code in the site settings and literally nothing happened. Then I put it in a page embed and nothing happened — but since it was in the footer (which is a component) it seems to work when I edit the component but not in normal preview. In preview, I get a visual warning on the page that the embed will only work when the site is published.
First, why? Wouldn’t it make it easier for it all to work in preview? It would certainly make testing easier.
Secondly, since it is clear some embedded code does only work on published sites: what is the dividing line? Some code clearly works in preview while some does not. How do I know what will work in preview and what will not?
If webflow rendered custom code in the designer it could potentially break the interface and that is probably the reason they don’t.
The best way to determine issues with custom code is to view the published url with your browser and launch that browser’s development tools where you can isolate and debug the issue. If that is something beyond your current skills you could either invest time into learning or hire a developer.
Adding to @webdev 's notes, custom scripts won’t run in the designer - however custom CSS can work in the designer, and sometimes, I’ve seen HTML work as well. That’s likely where you’re getting confused.
That means publishing the site (an upgrading it to a site plan) while it’s still in development, right?
I was just hoping to start to debug those issues prior to doing that. We are just starting work on this site at this point. So maybe I would have to defer testing and debugging of any custom scripts until the last stage of development.
Ahh, that’s very helpful even if it’s not a perfect line — I can defer testing scripts until the last part of design when we upgrade the site to a site plan.
Of note, it appears that even scripts seem to work inside a component when you are editing the component. I saw this when I had added a script to update the year to the current year automatically.
You can publish a Webflow site to a project.webflow.io address then test and unpublish at anytime. Since you can control the project slug and potentially password protect if needed, you can keep it hidden as needed.