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

**URL:** <https://forum.finsweet.com/t/how-does-fs-consent-element-placeholder-work-exactly/5749>\
**Category:** Consent Pro\
**Tags:** placeholder\
**Created:** [August 5, 2025, 6:50pm UTC](https://forum.finsweet.com/t/how-does-fs-consent-element-placeholder-work-exactly/5749 "2025-08-05T18:50:47Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![juicydisorder](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/juicydisorder/32/6481_2.png) [@juicydisorder](https://forum.finsweet.com/u/juicydisorder)\
**Post date:** [August 5, 2025, 6:50pm UTC](https://forum.finsweet.com/t/how-does-fs-consent-element-placeholder-work-exactly/5749/1 "2025-08-05T18:50:47Z")

</div>

Hey everyone 👋

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 🙌

---

<div class="post-metadata">

**Author:** ![juicydisorder](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/juicydisorder/32/6481_2.png) [@juicydisorder](https://forum.finsweet.com/u/juicydisorder)\
**Post date:** [August 8, 2025, 1:30pm UTC](https://forum.finsweet.com/t/how-does-fs-consent-element-placeholder-work-exactly/5749/2 "2025-08-08T13:30:02Z")

</div>

Just following up with another question I noticed while testing 👀

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?

---

<div class="post-metadata">

**Author:** ![Support-Finn](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-finn/32/5169_2.png) [@Support-Finn](https://forum.finsweet.com/u/Support-Finn)\
**Post date:** [August 11, 2025, 12:45pm UTC](https://forum.finsweet.com/t/how-does-fs-consent-element-placeholder-work-exactly/5749/3 "2025-08-11T12:45:53Z")

</div>

Hey @juicydisorder! 👋

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:

```html
<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.

---

<div class="post-metadata">

**Author:** ![juicydisorder](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/juicydisorder/32/6481_2.png) [@juicydisorder](https://forum.finsweet.com/u/juicydisorder)\
**Post date:** [August 25, 2025, 12:23pm UTC](https://forum.finsweet.com/t/how-does-fs-consent-element-placeholder-work-exactly/5749/4 "2025-08-25T12:23:12Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [August 27, 2025, 1:45pm UTC](https://forum.finsweet.com/t/how-does-fs-consent-element-placeholder-work-exactly/5749/5 "2025-08-27T13:45:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![juicydisorder](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/juicydisorder/32/6481_2.png) [@juicydisorder](https://forum.finsweet.com/u/juicydisorder)\
**Post date:** [August 29, 2025, 12:30pm UTC](https://forum.finsweet.com/t/how-does-fs-consent-element-placeholder-work-exactly/5749/6 "2025-08-29T12:30:39Z")

</div>

Sure, thanks! I send you a DM!

---

<div class="post-metadata">

**Author:** ![juicydisorder](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/juicydisorder/32/6481_2.png) [@juicydisorder](https://forum.finsweet.com/u/juicydisorder)\
**Post date:** [September 3, 2025, 6:24am UTC](https://forum.finsweet.com/t/how-does-fs-consent-element-placeholder-work-exactly/5749/7 "2025-09-03T06:24:16Z")

</div>

Hey @Support-Luis just following up here 👋 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! 🙏

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [September 8, 2025, 5:25pm UTC](https://forum.finsweet.com/t/how-does-fs-consent-element-placeholder-work-exactly/5749/8 "2025-09-08T17:25:31Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![juicydisorder](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/juicydisorder/32/6481_2.png) [@juicydisorder](https://forum.finsweet.com/u/juicydisorder)\
**Post date:** [September 9, 2025, 5:48am UTC](https://forum.finsweet.com/t/how-does-fs-consent-element-placeholder-work-exactly/5749/9 "2025-09-09T05:48:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![juicydisorder](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/juicydisorder/32/6481_2.png) [@juicydisorder](https://forum.finsweet.com/u/juicydisorder)\
**Post date:** [September 18, 2025, 6:16am UTC](https://forum.finsweet.com/t/how-does-fs-consent-element-placeholder-work-exactly/5749/11 "2025-09-18T06:16:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [September 24, 2025, 12:43am UTC](https://forum.finsweet.com/t/how-does-fs-consent-element-placeholder-work-exactly/5749/12 "2025-09-24T00:43:34Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![juicydisorder](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/juicydisorder/32/6481_2.png) [@juicydisorder](https://forum.finsweet.com/u/juicydisorder)\
**Post date:** [September 24, 2025, 7:16am UTC](https://forum.finsweet.com/t/how-does-fs-consent-element-placeholder-work-exactly/5749/13 "2025-09-24T07:16:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dimitar.hristov](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/dimitar.hristov/32/4505_2.png) [@dimitar.hristov](https://forum.finsweet.com/u/dimitar.hristov)\
**Post date:** [June 25, 2026, 2:18pm UTC](https://forum.finsweet.com/t/how-does-fs-consent-element-placeholder-work-exactly/5749/14 "2026-06-25T14:18:51Z")

</div>

Hello @Support-Luis! We are currently having a similar issue with the placeholder element, but also trying to figure out why is Consent Pro not blocking our direct HubSpot form embed on the website. Inside Consent Pro Manager, some of the HubSpot trackers are marked as green ‘auto detected’ and some as ‘from GTM’ in orange.

 ![Screenshot 2026-06-25 at 17.17.07](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/a/a62b51ef0a25ecfb26c811d2eb2fcf0b3653edce.png)

Basically our page loads and with that HubSpot automatically starts collecting some user data, before any consent is given, even though we are using the opt-in banner. We tried to approach the placeholder element too, but it didn’t even show up. Can you give us some advice on how to set up this correctly, thank you!
