Custom Code Components

Consent Pro
1

Hi everyone,

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

I use 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!

2

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:

<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) :thinking:
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:

<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! :flexed_biceps:

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

1 Like