Block content before consent

You can use the data-cc-consent attribute to control when HTML elements or scripts are shown based on the visitor’s cookie preferences. This ensures that marketing or analytical content only appears after the user has given the right consent.

• Marketing

• Analytical

In the examples below, we use marketing as the consent category to block marketing cookies. Feel free to change this to the category that matches your configuration.

Add the attribute data-cc-consent to any HTML element that should only appear after the visitor accepts specific cookies.

<div data-cc-consent="marketing"> 
<!-- This is where your content goes -->
</div>

If you want to prevent a script from running before consent is received,
set the type to text/plain and include the data-cc-consent attribute.

<script type="text/plain" data-cc-consent="marketing">
<!-- This is where your content goes -->
</script>

⚠️ Important
Always use type="text/plain". If you use text/javascript, the script will execute immediately, even without consent.

Use the attributes data-cc-consent and data-cc-src to delay the loading of iframes such as YouTube, Vimeo or Google Maps until the visitor has given the correct consent.

<iframe 
data-cc-consent="marketing"
data-cc-src="URL" # Replace URL with the URL of your content #
></iframe>

💡 When the page loads, the iframe does not yet have a src value. The original URL is stored in data-cc-src. As soon as the visitor accepts the marketing cookies, Cookie Confirm automatically replaces data-cc-src with src, and the iframe loads.

It’s best practice to show a message first and then load the content once the correct consent has been received.

<div data-cc-message="marketing">
This content requires marketing cookies to be displayed. You can manage your preferences <span class="cc-open-preferences">here</span>.
</div>