The Privacy Suite for WordPress

CSS Lesson #12: Apply properties based on Consent Type & Region

Get compliant today in the European Union, United States, Canada, United Kingdom, Australia & South Africa with the only Privacy Suite for WordPress that offers a fully-featured plugin for Worldwide Compliance.

When GEO IP is enabled in Complianz, the type of Cookie Banner shown to the visitor (opt-in/opt-out) will depend on the location from which a user visits your website. For instance, the opt-in banner will be shown when a user visits the website from a country within the European Union. For visitors from the United States, the opt-out banner will be displayed.

There are situations imaginable where you would like to solely display a text to users that visit from an opt-in region, or when the visitor has yet to give his consent for the “Marketing” category. Complianz provides body classes that you can use to dynamically apply properties to an element, based on the consent type or region that Complianz detects.

Using the Complianz body classes to conditionally apply properties

Complianz provides the following classes that you can apply to your HTML elements. These classes are dynamically updated based on the status of Complianz, allowing you to attach CSS properties to this HTML element based on the Region and Consent Type.

Class for HTML element Classes to apply CSS to
cmplz-consenttype cmplz-optin, cmplz-optout
cmplz-status-category cmplz-status-functional, cmplz-status-statistics, cmplz-status-marketing
cmplz-region cmplz-eu, cmplz-ca, cmplz-us, cmplz-uk, cmplz-other
cmplz-bannertype cmplz-tcf-banner

Assume that we have a <div> element with the class “cmplz-status-consenttype” attached:

We can now hide/show this element based on the consent type with the following CSS:

Only show “Manage Consent” in Opt-in regions

It is possible to only show the “Manage Consent” button to users visiting from an opt-in region, instead of both opt-in and opt-out regions.

To do so, we will hide the class responsible for the Manage Consent button by default, unless the status is “opt-in”:

Only show “Manage Consent” when TCF is Enabled

By using the cmplz-tcf-banner class, we can show the Manage Consent button when TCF is enabled, but keep it hidden in other cases.

Recent articles

The Privacy Suite for WordPress
Get compliant today with the only Privacy Suite made for WordPress


Popular articles

LGPD Brazil and WordPress

The “Marco Civil” and the Brazilian General Data Protection Law (LGPD) In Complianz 5.4 we will add full support for the Civil Rights Framework for

Read More

Join our mailing list - 8 Tips & Tricks in your inbox over the next 8 weeks!