Hide and show content based on the visitor's consent

Please note that this is no longer being updated. Kindly visit the new Cookiebot support area (https://support.cookiebot.com/hc/en-us) for updated guides, articles and FAQs. If you do not find the answer to your question there, you are welcome to post it in the Cookiebot community (https://support.cookiebot.com/hc/en-us/community/topics).

Cookiebot can automatically show and hide content on your website in conformity with the single visitor's current consent state. The visibility of specific elements is defined by a series of CSS-class names that you can apply to any element:
.cookieconsent-optinVisible when user has opted in for one or more types of cookies, otherwise hidden
.cookieconsent-optoutVisible when user has not yet submitted a consent or has opted out of all but strictly necessary cookies, otherwise hidden
  
.cookieconsent-optout-preferencesVisible when user has opted out of preferences cookies, otherwise hidden
.cookieconsent-optout-statisticsVisible when user has opted out of statistics cookies, otherwise hidden
.cookieconsent-optout-marketingVisible when user has opted out of marketing cookies, otherwise hidden
  
.cookieconsent-optin-preferencesVisible when user has opted in for preferences cookies, otherwise hidden
.cookieconsent-optin-statisticsVisible when user has opted in for statistics cookies, otherwise hidden
.cookieconsent-optin-marketingVisible when user has opted in for marketing cookies, otherwise hidden

EXAMPLE:

<div class="cookieconsent-optin-marketing">This content is only visible when the visitor has consented to marketing cookies.</div>
<div class="cookieconsent-optout-marketing">Please <a href="javascript: Cookiebot.renew()">accept marketing cookies</a> to view this content.</div>

Feedback and Knowledge Base