EN
Start free

Documentation

Everything you need to know for quick Consentio implementation

Custom Website

Advanced Consentio implementation for developers

Basic Implementation

For the basic implementation, simply insert a single line of code:

HTML 
<script src="https://consentio.cz/widget/YOUR_SCRIPT_KEY/consentio.min.js" async></script>

The widget automatically initialises and displays the cookie bar on the first page load. You can find your unique SCRIPT_KEY in the dashboard under Settings → Installation.

Tip: Website identification is part of the URL (SCRIPT_KEY), so no additional data attributes are needed. The language is automatically detected from the lang attribute on the <html> element or from the browser's Accept-Language header.

JavaScript API

Once the widget has loaded, the global window.Consentio object is available for programmatic control.

Available Methods

Method Description
show() Displays the cookie banner
hide() Hides the cookie banner
showPreferences() Displays the preferences settings
getConsent() Returns the current consent state
updateConsent(updates) Updates the consent state
onConsentChange(callback) Registers a listener for consent changes
getBlockedScripts() Returns the number of blocked scripts
getBlockedIframes() Returns the number of blocked iframes

Displaying the Banner

JavaScript 
// Show the cookie banner
Consentio.show()

// Hide the cookie banner
Consentio.hide()

// Show the preferences settings
Consentio.showPreferences()

Getting Consent State

JavaScript 
// Get the current consent state
const consent = Consentio.getConsent()
// { necessary: true, analytics: false, marketing: false, functionality: false }

// Check a specific category
if (consent.analytics) {
  // Run analytics scripts
  loadGoogleAnalytics()
}

if (consent.marketing) {
  // Run marketing scripts
  loadFacebookPixel()
}

Updating Consent

JavaScript 
// Update specific categories
Consentio.updateConsent({
  analytics: true,
  marketing: false
})

Event Listeners

React to consent changes using event listeners:

JavaScript 
// Option 1: Using onConsentChange
Consentio.onConsentChange((consent) => {
  console.log('Consent changed:', consent)

  if (consent.analytics) {
    loadGoogleAnalytics()
  }

  if (consent.marketing) {
    loadFacebookPixel()
  }
})

// Option 2: Using a window event listener
window.addEventListener('consentio:consent', (event) => {
  const consent = event.detail
  console.log('Consent changed:', consent)
})

Google Consent Mode v2

Consentio automatically supports Google Consent Mode v2. To ensure correct functionality, make sure the widget is loaded before Google Analytics and other Google scripts.

HTML 
<!-- 1. Consentio first (no async — must run before Google scripts) -->
<script src="https://consentio.cz/widget/YOUR_SCRIPT_KEY/consentio.min.js"></script>

<!-- 2. Then the Google tag -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

Category to Consent Mode Mapping

Consentio Category Google Consent Mode
necessary functionality_storage, security_storage
analytics analytics_storage
marketing ad_storage, ad_user_data, ad_personalization
functionality personalization_storage

Script Blocking

To block scripts before consent is granted, use the type="text/plain" attribute with the data-category data attribute:

HTML 
<!-- Script runs only after analytics consent is granted -->
<script type="text/plain" data-category="analytics">
  // Google Analytics code
  gtag('config', 'G-XXXXXXX');
</script>

<!-- Script runs only after marketing consent is granted -->
<script type="text/plain" data-category="marketing">
  // Facebook Pixel code
  fbq('init', 'XXXXXXX');
</script>

<!-- Script runs only after functionality consent is granted -->
<script type="text/plain" data-category="functionality">
  // Personalisation code
  initPersonalization();
</script>

Available Categories

Category Description
necessary Necessary cookies (always permitted)
analytics Analytics cookies
marketing Marketing cookies
functionality Functional cookies for personalisation

Button to Open Preferences

Place a button on your website to re-open the cookie preferences (required by GDPR):

HTML 
<!-- In the website footer -->
<a href="#" onclick="Consentio.showPreferences(); return false;">
  Cookie Settings
</a>

<!-- Or as a button -->
<button onclick="Consentio.showPreferences()">
  Manage Cookie Preferences
</button>
Tip: GDPR requires that users can change their preferences at any time. Place a link in the website footer or in your privacy policy.

Single Page Applications (SPA)

For React, Vue, Angular and other SPA frameworks, the widget works automatically. The widget detects URL changes and updates itself as needed.

JavaScript 
// Example: Checking consent state on route change (Vue Router)
router.afterEach(() => {
  if (window.Consentio) {
    const consent = Consentio.getConsent()
    if (consent.analytics) {
      // Analytics scripts are permitted
    }
  }
})
ShoptetGoogle Tag Manager