# Custom Code Components

**URL:** <https://forum.finsweet.com/t/custom-code-components/6837>\
**Category:** Consent Pro\
**Tags:** custom-code-componen\
**Created:** [February 6, 2026, 5:51pm UTC](https://forum.finsweet.com/t/custom-code-components/6837 "2026-02-06T17:51:34Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/max2/32/3651_2.png) [@Max2](https://forum.finsweet.com/u/Max2)\
**Post date:** [February 6, 2026, 5:51pm UTC](https://forum.finsweet.com/t/custom-code-components/6837/1 "2026-02-06T17:51:34Z")

</div>

Hi everyone,

I’m using **Consent Pro** , but I’m running into an issue.

I use **[Bunny.net](http://Bunny.net)** for hosting videos and have built **custom code components** for this, which I reuse across multiple projects. Unfortunately, these custom components are not recognized by Consent Pro, and I can’t find a way to properly connect or integrate them with Consent Pro.

Ideally, there would be a way to solve this via **attributes**. That way, I could block the surrounding div of the custom code component until consent is given.

Thanks a lot for your help!

- URL: [https://details-dev.webflow.io/](https://details-dev.webflow.io/)
- Webflow Read-only link: [Webflow - details-dev](https://preview.webflow.com/preview/details-dev?utm_medium=preview_link&utm_source=designer&utm_content=details-dev&preview=acb7ef7a99db7490ee8b2c878a2603c0&workflow=preview)

##

---

<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:** [February 9, 2026, 5:40pm UTC](https://forum.finsweet.com/t/custom-code-components/6837/2 "2026-02-09T17:40:18Z")

</div>

Hey @Max2!

We see you’re using custom BunnyVideoPlayer components with `code-island` elements for video hosting. Consent Pro can definitely work with these custom components with the right approach.

Here are two methods to block your custom video components until consent is given:

Method 1: Direct Attributes on Custom Component  
Try adding the consent attributes directly to your `code-island` elements:

```html
<code-island 
  fs-consent-src="[original_data_props_content]"
  fs-consent-categories="marketing"
  data-loader="..."
  data-props=""
  data-slots="[]"
  data-hydrate="true">
</code-island>

```

Method 2: Wrapper Div Approach (Recommended) 🤔  
If the direct method doesn’t work (some custom components don’t support fs-consent attributes), you could try wrapping your video component in a div:

```html
<div fs-consent-element="placeholder" fs-consent-categories="marketing">
  <p>This video requires marketing cookies. Please accept cookies to view.</p>
  
  <code-island 
    fs-consent-src="[bunny_video_data]"
    data-loader="..."
    data-props=""
    data-slots="[]"
    data-hydrate="true">
  </code-island>
</div>

```

For setup, configure the video category in your Consent Pro app (likely “marketing”), test with cookies disabled to ensure videos are blocked, then accept marketing cookies to verify videos load properly.

The `fs-consent-categories` attribute tells Consent Pro which consent category controls this content, while `fs-consent-src` replaces the normal data-props until consent is given.

A simple approach might be creating a Webflow Component with the wrapper div structure so you can reuse the consent-compliant setup across all your projects! 💪

If you need more specific help with implementation, @Support-Luis, @Support-Pedro or @jesse.muiruri can assist further.