How does fs-consent-element="placeholder" work exactly?

Finsweet Components Cookie Consent
1

Hey everyone :waving_hand:

I’m currently implementing the Finsweet Cookie Consent solution and I’m trying to understand how the fs-consent-element="placeholder" works in detail.

From what I’ve seen, it shows a placeholder instead of a third-party embed (like a YouTube video) until consent is given. But I couldn’t figure out how to define which cookie category controls the visibility of that placeholder (e.g. “Marketing” or “Analytics”).

  • Is there a way to manually assign a category to the placeholder?

  • Or does it automatically follow the category of the element it’s replacing?

If it does automatically follow the category:
How exactly does that work?
– Does the placeholder need to be in a specific HTML structure?
– Is it based on the fs-consent attributes of the original element?
– Or does it inherit something based on position in the DOM?

Would love to get some clarification on this – big thanks in advance :raising_hands:

2

Just following up with another question I noticed while testing :eyes:

I’m seeing a slight flash of content with placeholders on page load, even when the relevant cookie category has already been accepted. It looks like the placeholder briefly shows before the consent logic hides it.

Also, in the Webflow Designer, the placeholder obviously covers the actual elements I’m using it for. It would be much nicer to see the real embedded elements while designing. I thought I could maybe just set the placeholder to display: none; and let Cookie Consent show it when needed – but that doesn’t work, as the placeholder then never appears at all.

  • Is there a recommended workaround for this?

  • Should I just solve the Designer issue via custom CSS, e.g. using the html.wf-design-mode selector?

  • And for the load-time content flash – is there a best practice to prevent it?

3

Hey @juicydisorder! :waving_hand:

Great question about the fs-consent-element=“placeholder” functionality!

The placeholder system in Finsweet Cookie Consent inherits its category from the blocked element it’s associated with — it’s not assigned manually to the placeholder itself.

For third-party scripts or embeds, you assign categories with fs-consent-categories on the blocked element, for example:

<script type="fs-consent" fs-consent-categories="marketing" src="youtube-embed.js"></script>

Available categories: “essential”, “marketing”, “personalization”, “analytics”. You can assign multiple categories by separating them with commas.

How placeholders work:

Add fs-consent-element="placeholder" to any element you want to show while the content is blocked.

The placeholder automatically shows when consent for the associated category is denied, and hides when consent is granted.

Example: For a YouTube iframe with consent blocking enabled, place a placeholder element in its place or next to it. The iframe stays blocked until consent is given, and the placeholder covers or reveals it accordingly.

Notes:

  • Standard embeds (like iframes) are handled automatically.

  • JavaScript-loaded or dynamically injected content may require custom code.

  • For multiple embeds with different categories, add a separate placeholder for each blocked element.

Regarding your follow up question, there is no recommeneded work around for this issue. Even though our script loads as soon as the page loads, the placeholder element will not be manipulated instantly, rather it will be manipulated one the script is fully loaded and excecuted.

This means that there is a compromise to be made:

  • If you load the placeholder element hidden, there will be a blank space in the page’s layout until the script displays the placeholder in place of the iframe.

  • If you load the placeholder visible, this will be shown even if the user has acceoted the corresponding categories, until the script is fully loaded and the logic to hide the placeholder is excecuted.

Both are valid setups, its up to you to decide which works best for you!

If you can share a staging URL or a Loom video of your setup, we can give you more targeted guidance.
For custom code help, @Support-Luis or @Support-Pedro can assist further.