I’m creating project pages with layouts controlled by code embed. There will be 4 (for now) embeds which are set to conditional visibility per project’s sector. I noticed that even though they’re hidden, they are still affecting the wrong sectors. Is there a way to set display none or visibility hidden to those code embeds per sector?
In Designer, in ‘Settings’ there’s a Visibility section with a ‘+’ sign to add conditions. For the love of me, I cannot find ANYTHING online about adding conditions in there… I feel like this could be the solution but I’m not sure how to approach it.
Conditional visibility can be applied to Code Embed elements just like any other Webflow element through the Element settings panel > Conditional visibility section. The Code Embed element will show or hide based on your conditional rules, and any HTML, CSS (in tags), or JavaScript (in tags) within it will follow the same visibility rules.
When the Code Embed element is hidden, its contents won’t execute or affect your page. When visible, the embedded code will function normally. This applies to all content within the embed, including any sector-specific code you might be implementing.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Visually hidden code blocks still run. Conditional visibility uses a display: none CSS approach to suppress that content from view, but it does not remove it from the page and any CSS/JS within will still execute.
Visibility: hidden under settings is different, it actually suppresses the code server-side.
This is the setting you want to use however the Visibility setting can’t be bound directly to CMS. Currently it can be only bound to a component property.
So one approach is;
Wrap each code chunk in a component
Create a Visibility property on your embed inside of it, which will appear on the component as a property
In your collection, add a switch field for each of the different embeds- at present Visibility property can only be bound to switch fields.
Then for each CMS item, flip the switches to include only the code blocks you want.
Another approach…
If the code you’re running is generally different per-CMS-item, you might be able to just store the JS/CSS inside of a rich text field in an Embed, and bind that field to a visually hidden ( display: none ) Rich Text element on the page. That way the right code for each item is emitted into the page only when it’s relevant.
Another approach, for JS specifically…
There is a programming technique in JS where your can locate its won <script> element and then its parent ( the .w-embed embed element ).
In essence you could design your code blocks so they check their own Embed for a .w-condition-invisible class, which IIRC is the class used when an element is conditionally hidden. Then they’d only run once they know they’re visible.
Michael, once again you’ve proven to be just FANTASTIC! I followed your advice using the component strategy and creating visiility properties for each embed. It worked wonders - thanks to that, only the sector-specific embed is loaded and executed on the website. Cannot thank you enough!