Conditional Visibility and Dynamic Embeds

This content was generated with the assistance of AI and should be verified against the official Webflow documentation before being relied on in production.

This sub-section’s Webflow bibliography lists the reference material consulted while preparing these pages.

This page describes conditional visibility and dynamic Code Embeds as they were on 2026-10-28, the date on which their facts were checked against the official documentation. Both are Designer features that need no add-on. Conditional visibility on CMS fields and dynamic embeds need a site plan that includes the CMS. The Plans, Workspaces, Seats and Roles page lists tiers; no prices are quoted here. Webflow is a software-as-a-service product without version numbers; changes are tracked on Product Changes and Deprecations.

The running example is Fernbrook Gardens, a fictitious botanical garden. Its Plants Collection has fields such as name, slug, latin-name, photo, care-notes (rich text), is-rare (switch), bloom-season (option), sold-in-shop (switch) and shop-url (link). The Plant template page needs to hide empty sections, badge rare plants and publish structured data for search engines.

Conditional visibility

What it is and why it exists

Conditional visibility decides, per element, whether the element is rendered at all. A rule looks at a data source, usually a CMS field of the current item, and the element appears only when the rule is satisfied. Without it, an empty field leaves an empty heading, a blank box or a broken image on the published page, and a designer would need one template per variation. With it, a single template adapts to its content.

The rule can read three kinds of data, according to the Help Center:

  • CMS fields of the item a Collection list item or a Collection page is bound to.

  • Component props, so a component instance can show or hide parts of itself according to its settings (see Components, Props, Slots and Variants).

  • Locale data, the current locale of the page, when Localization is enabled (see Localization).

The audience is mostly designers, who define the rules, and content editors, who change the data that drives them and so change the layout without touching the Designer.

Where it works

Conditional visibility is configured in the Element settings panel (gear icon) of the selected element, in the Conditional visibility section. It applies to elements inside a Collection list, on a Collection page, inside a component, and on static pages when the rule reads something available there, such as the locale. An element outside a bound context has no item to read, so a CMS field rule is not offered for it. A rule on a Collection list item is evaluated once for every item, which is how a Rare badge appears only on some plants in the Plants grid (see Collection Lists).

Conditions by field type

The conditions offered depend on the field type, which is why picking the right type in the model matters (see Collections and Field Types).

Field type Typical conditions Fernbrook Gardens use

Plain text, rich text, link, email, phone

Is set, is not set (and, for text, equality tests)

Hide the Care notes section when care-notes is empty

Image, multi-image, video, file

Is set, is not set

Hide the photo frame when a plant has no photo

Switch

Is on, is off

Show a Rare badge when is-rare is on

Option

Equals or does not equal a chosen option

Show a spring icon when bloom-season is Spring

Number

Comparison against a value, is set, is not set

Show Low stock when a stock number is below a threshold

Date

Before or after a date, is set, is not set

Hide an expired event

Reference and multi-reference

Is set, is not set

Hide Related plants when the multi-reference is empty

A Switch field is the most predictable trigger. Rich text in particular can look empty but contain an empty paragraph, and then an "is set" rule shows an empty frame. A common remedy is a Switch such as show-care-notes that editors turn on when they have written something, and a rule that reads the Switch instead of the text. Option fields were added to conditional visibility after the feature launched, so old tutorials that tell you to model choices as Switches are describing a limitation that has since been lifted.

Several conditions

When an element has more than one condition, the element renders only when all of them are true, which is an AND combination. There is no per-element "or". The usual workarounds are:

  • put the same content in two sibling elements, each with its own rule, so that either one can show;

  • add a Switch to the CMS item that holds the combined decision (for example show-shop-box, turned on when the plant is sold-in-shop or has a shop-url), and base one rule on it;

  • nest elements, with the outer element carrying one rule and the inner another, which also gives AND.

The Switch approach is also the easiest to understand for editors, because the decision is visible in the item.

What Webflow generates

By default a hidden element is not in the published HTML at all. This differs from hiding with CSS display: none, where the element remains in the document and can be read in the page source. For the plant template, a plant without photo simply has no figure element:

<!-- Plant with a photo and the is-rare switch on -->
<article class="plant-card">
  <figure class="plant-photo">
    <img src="https://cdn.prod.website-files.com/EXAMPLE/monarda.jpg" alt="Monarda in flower">
  </figure>
  <span class="badge-rare">Rare</span>
  <h2 class="plant-name">Monarda</h2>
</article>

<!-- Plant with no photo and the switch off: both elements are absent -->
<article class="plant-card">
  <h2 class="plant-name">Sedum</h2>
</article>

Source: Webflow Help Center: Conditional visibility

Because the element is absent, a script cannot find it and a search engine does not see its content. That is usually what you want. It is not appropriate when a script needs the hidden element, for example a tab panel that JavaScript reveals. For that case the Element settings > Advanced section has Keep in HTML when hidden, which renders the element but hides it. Test the generated output on the published site, not only in the Designer, where the canvas can show hidden elements for editing.

Hiding is not security

Conditional visibility is a presentation feature. A visitor sees only what the page contains, so with the default setting the hidden content never leaves the server. That is better than CSS hiding, but it remains content shown or not, not access control: the same fields are available to anyone through the Collection page’s other bindings, a published sitemap or the Content Delivery API. Do not use conditional visibility to protect private content. For member-only areas see Password Protection and Site Search. With Keep in HTML when hidden the content is in the page source, so never use that setting for anything confidential.

Pitfalls

  • A rule on an element inside a Collection list that reads a field of a different Collection works only when that field is reachable, normally through a reference; otherwise the field is not offered.

  • An empty-looking rich text field passes "is set". Use a Switch or a plain text summary field.

  • A condition on a parent hides all its children, which is a quick way to hide a whole section but an easy way to forget why something vanished. Name the element in the Navigator so the reason is visible.

  • The Designer shows hidden elements so you can style them. Always check the published page or the preview.

  • Layout shifts: when an element is removed, grid or flex siblings reflow. In a grid with fixed placement, set positions so that removing a card does not leave holes (see Flexbox and Grid Layouts).

Dynamic Code Embeds

What a Code Embed is

A Code Embed is an element that holds a block of HTML, CSS or JavaScript that you write yourself and that Webflow publishes at that place in the page. It is the tool for markup that the Designer has no element for: a third-party widget, a <script type="application/ld+json"> block, an inline SVG or a small style rule. The embed editor accepts up to 50,000 characters; Webflow raised this limit from 10,000 in May 2024, so older tutorials that quote 10,000 are out of date. Embeds and other custom code locations are covered on Custom Code in the Head, Footer and Embeds.

When a Code Embed sits inside a Collection list or on a Collection page, it can contain CMS field values. In the embed editor you insert a field at the cursor, and Webflow replaces the placeholder with the value of the current item when the page is published. This is what makes the embed "dynamic": one embed on the Plant template produces different code for every plant. Putting CMS values into the site-wide or page-level custom code settings is not possible in the same way; page settings custom code is for fixed content, so per-item output belongs in an embed on the template page.

Example: JSON-LD for each plant

Search engines read structured data to understand a page. The Plant template can publish a schema.org description for each plant. The embed below shows the output with the CMS fields written as placeholders in braces; in the real embed you insert each field with the field picker, and Webflow substitutes the item’s value:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "{{ name }}",
  "description": "{{ short-description }}",
  "image": "{{ photo-url }}",
  "url": "https://www.fernbrook.example/plants/{{ slug }}"
}
</script>

Source: Webflow Help Center: Use dynamic data in custom code embeds

The braces here are only a reading aid; Webflow’s editor inserts its own field token. The published page for one plant contains plain values:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Monarda",
  "description": "A bee-friendly perennial with scarlet blooms.",
  "image": "https://cdn.prod.website-files.com/EXAMPLE/monarda.jpg",
  "url": "https://www.fernbrook.example/plants/monarda"
}
</script>

Source: Webflow Help Center: Use dynamic data in custom code embeds

Notes on this pattern:

  • Image and link fields output the stored URL. Structured-data validators want absolute URLs, so for relative link values build the absolute address in the embed from the site’s domain, as the url line above does.

  • Reference, multi-reference and multi-image fields cannot be used as a single value in a JSON-LD string; use the plain fields of the item, or output the referenced item’s name through a nested Collection list.

  • Validate the published page with Google’s Rich Results Test. For more on schema markup see SEO and AEO.

Example: data attributes and script configuration

A second use is to pass item data to a script. A hidden element carries the values as data-* attributes and the script reads them, which avoids putting values into JavaScript source:

<div class="plant-map-config"
     data-plant="Monarda"
     data-bed="North Meadow"
     data-lat="40.4168"
     data-lng="-3.7038"
     hidden></div>
const cfg = document.querySelector('.plant-map-config');
if (cfg) {
  const { plant, bed, lat, lng } = cfg.dataset;
  showOnMap({ plant, bed, position: [Number(lat), Number(lng)] });
}

Source: MDN: Using data attributes

The embed supplies the data-* values from the item’s fields; the script lives once, in the site’s footer code, and works on every plant page. This is the safer way to combine CMS data with code, compared with interpolating values straight into a script body. The details of reading and handling such attributes are on Custom Attributes and JavaScript.

Escaping and security

A CMS field value is inserted as it is stored. Webflow does not know in which context you placed it, so escaping is your job:

  • Inside a JSON string a value containing a double quote or a backslash breaks the JSON and so the whole structured-data block. Plant names and descriptions entered by editors can contain quotes (the "Queen of the Meadow" type of name is typical). Keep such fields simple, give editors guidance, or use a short plain field written for the purpose.

  • Inside a JavaScript string the same applies, and a value containing a closing script tag would end the script early. Prefer data-* attributes read with dataset to string interpolation.

  • Inside an HTML attribute a double quote ends the attribute. Rich text is HTML by design, and inserting it into an attribute or a JSON string is wrong.

  • Content editors and any collaborator who can edit items can put text into these fields, so treat the values as untrusted input in a security sense. Never place a field value into a position that is executed (an event-handler attribute, a script body, an href with a script scheme). Sanitize on read in your script, for example by building DOM with textContent instead of innerHTML.

  • No real keys or secrets belong in an embed or in CMS fields: embeds are published in the page source for everyone.

Limits and pitfalls

  • The embed is bound to the current item. On a Collection page it is the page’s item, in a Collection list it is each list item. A single Code Embed on a Collection page appears on every item’s page, so item-specific logic needs a rule, for example a Switch plus conditional visibility on the embed itself.

  • Each embed counts against the 50,000-character limit, and so does the site’s other custom code at its own location.

  • A published embed runs only on the published site (or the staging preview), not as a live script on the canvas. Preview with the site’s preview mode or the published webflow.io address.

  • Embeds in Collection lists are repeated per item, so a script that registers a global handler runs several times; put scripts in the footer once and mark each item with a class or data-* attribute instead.

  • Page-level custom code does not read CMS fields. Use an embed on the template instead.

Combining the two

Conditional visibility also works on a Code Embed element, which makes it possible to output a block only for some items. For Fernbrook Gardens, the JSON-LD embed can be wrapped so that an offers block appears only for plants with sold-in-shop on. The rule reads the Switch, the embed is rendered or not, and, because a hidden element is absent by default, no empty script is left in the source. Do not use Keep in HTML when hidden on such an embed: it would put the code on the page for every plant.

Where older sources are outdated

The book Webflow by Example (Packt, 2021) covers conditional visibility only for the basic "is set" and switch cases and predates the option-field support and the Advanced setting that keeps hidden elements in the HTML. It also predates the 50,000-character limit for custom code. Where the book and the current Help Center differ, this page follows the Help Center. See Where Older Books and Tutorials Are Outdated.

Where to go next

References