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

Consent Pro
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.

4

Thanks Finn! One thing I’m still not clear about:

When you say “load the placeholder element hidden”, what’s the correct way to do that?

If I set the placeholder to display: none; from the start, it never comes back once the script runs. But if it’s visible on load, I get the flash before it hides.

What’s the intended approach here so the placeholder only becomes visible once the Finsweet script decides it should?

5

Hey @juicydisorder! Could you share a read-only link? I’ll have a look!

6

Sure, thanks! I send you a DM!

7

Hey @Support-Luis just following up here :waving_hand: I sent you the read-only link via DM a few days ago, but haven’t heard back yet. Let me know if you’d prefer I post it here in the thread instead. Thanks! :folded_hands:

8

Hey @juicydisorder! Apologies for the delay! I have taken a look, and it looks like we may have a bug. I have reported it to the team, and we will be looking into it shortly.

I’ll get back to you shortly!

9

Thanks a lot, @Support-Luis :raising_hands: Appreciate you checking it out! Good to know it’s a bug and not just me messing up the setup :sweat_smile: I’ll keep an eye out for updates — let me know if you need me to test anything on my end.

1 Like
11

Hey @Support-Luis :waving_hand: just checking in — have there been any updates on this bug yet? Thanks! :folded_hands:

12

Hey @juicydisorder! I’m afraid no, there have been no updates. :disappointed_face:

We are still working on improving the placeholder functionality. Apologies for the inconvenience :folded_hands:

1 Like
13

Thanks for the update, Luis :folded_hands: Totally understand — I’ll keep an eye on it and test again once improvements are rolled out. Appreciate you keeping me posted! :rocket:

1 Like