Installation guide

Consentaur is installed with a single line of code. This guide explains how to add the script correctly, so cookies stay blocked until your visitors consent, and how to add it on WordPress, Shopify, Wix and Squarespace.

Quick start

Copy your personal script tag from your dashboard and paste it into the <head> section of your website:

<head>
<script src="https://cdn.consentaur.com/v1/YOUR_SITE_ID.js"></script><!-- MUST come first -->
<!-- Your other scripts below -->
<script src="https://www.googletagmanager.com/gtag/js?id=..."></script>
...
</head>

Where do I find my site ID?

YOUR_SITE_IDin the examples is a placeholder. Replace it with your website's own site ID.

You can copy your personal script tag, with the correct site ID already filled in, from your Consentaur dashboard: open your site and go to the Script page. The code is ready to paste, you do not need to change anything.

Example: if your site ID is site_3f9a1c2b7d4e, your script tag looks like this:
<script src="https://cdn.consentaur.com/v1/site_3f9a1c2b7d4e.js"></script>

Important: placement

The script must be the very first <script> tag in your <head>. Only then can Consentaur block cookies from Google Analytics, Meta Pixel and other services before they load.

Why must the script come first?

The browser runs scripts from top to bottom. If the Google Analytics script sits above Consentaur, Google Analytics sets its cookies before Consentaur can block them. As the first script, Consentaur can:

  • Set Google Consent Mode v2 to "denied" by default before any Google script loads
  • Watch and block every later script that tries to set cookies without consent
  • Show the cookie banner as early as possible

Platform guides

Add the cookie banner to WordPress

With a plugin (recommended): Install a plugin such as WPCode (Insert Headers and Footers). Go to Code Snippets → Header & Footerand paste the Consentaur script into the "Header" box, at the very top, before any other scripts.

In the theme: Edit your theme's header.php file and paste the script straight after the opening <head> tag:

<head>
  <script src="https://cdn.consentaur.com/v1/YOUR_SITE_ID.js"></script>
  <?php wp_head(); ?>
</head>

Replace YOUR_SITE_ID with your site ID from your dashboard. Changes to header.php can be overwritten by a theme update, so use a child theme or the plugin route.

Caching and optimisation plugins: plugins that delay, combine or defer JavaScript must leave the Consentaur script alone. Exclude cdn.consentaur.comfrom those optimisations in the plugin's settings.

For a step-by-step walkthrough, read our guide to cookie consent on WordPress.

Shopify

Go to Online Store → Themes and choose Edit code for your live theme. Open theme.liquid and paste the Consentaur script straight after the <head> tag, before all other scripts:

<head>
  <script src="https://cdn.consentaur.com/v1/YOUR_SITE_ID.js"></script>
  {{ content_for_header }}
  ...
</head>

Replace YOUR_SITE_ID with your site ID from your dashboard.

Wix

In your site's settings, open Custom Code. Add the Consentaur script, choose "Head" as the placement and load it on all pages.

Squarespace

Open your site's Code Injectionsettings and paste the Consentaur script into the "Header" field.

Custom site / HTML

Paste the script straight into your HTML template as the first script in <head>. The script must not have an async or defer attribute: it has to load synchronously to be able to block other scripts.

Blocking scripts manually

Consentaur automatically blocks scripts from third-party domains that set cookies during the scan. Services such as Google Analytics and the Meta Pixel set their cookies on your own domain, so they are not recognised automatically. Mark them and any other scripts with data-cookiebar-category so they only run after consent:

<!-- Blocked until the visitor consents to marketing -->
<script
  src="https://example.com/tracking.js"
  data-cookiebar-category="marketing"
></script>

<!-- Blocked until the visitor consents to analytics -->
<script data-cookiebar-category="analytics">
  // Inline analytics code
</script>

Valid categories:

  • necessary: necessary cookies (never blocked)
  • analytics: statistics and analytics
  • marketing: marketing and advertising
  • preferences: preferences and functionality

Google Consent Mode v2

Consentaur supports Google Consent Mode v2out of the box. When the script loads, every consent signal is set to "denied" by default. When a visitor consents, Consent Mode is updated automatically:

  • analytics_storage: follows the "Analytics" category
  • ad_storage, ad_user_data, ad_personalization: follow the "Marketing" category
  • personalization_storage: follows the "Preferences" category
  • functionality_storage, security_storage: always "granted"

You do not need to set up Google Consent Mode separately: Consentaur handles it for you.

Cookie declaration

Consentaur can show an automatically updated list of your website's cookies, grouped by category. You find the code under Cookie declarationon your site's page in the dashboard. Paste it into your cookie policy or privacy policy page:

<script src="https://cdn.consentaur.com/v1/YOUR_SITE_ID-declaration.js" defer></script>
<div data-cookiebar-declaration></div>

The list shows the cookies recorded for your site and stays current after every new scan. When the Consentaur script is on the same page, it includes a link visitors can use to change their consent.

JavaScript API

Consentaur exposes a global window.cookieBarobject that you can use to control consent from your own code, for example for a "Cookie settings" link in your footer.

Open the consent settings

Show the settings panel so visitors can change their choices:

// Example: attach to a button in your footer
document.getElementById('cookie-settings-btn')
  .addEventListener('click', () => {
    window.cookieBar.showSettings()
  })

Or without any JavaScript of your own: any element with the data-cookiebar-settings attribute opens the settings when clicked.

<button data-cookiebar-settings>
  Cookie settings
</button>

Read the current consent

Read the current consent state, for example to load a script conditionally:

const consent = window.cookieBar.getConsent()
// { necessary: true, analytics: true, marketing: false, preferences: false }

if (consent?.analytics) {
  // Load an analytics script manually
}

Wait for the visitor's choice

Third-party widgets such as chat, video and maps should only load once the visitor has answered the cookie banner. That way they do not sit on top of the banner and do not set cookies early. onConsent() calls your function once a choice has been made. If a valid consent from an earlier visit exists, it is called straight away:

let chatLoaded = false

window.cookieBar.onConsent((consent) => {
  // consent.action:     'accept_all' | 'reject_all' | 'customize' | 'stored'
  // consent.categories: { necessary, analytics, marketing, preferences }
  if (chatLoaded) return
  chatLoaded = true
  loadChatWidget()   // your own code, e.g. insert the chat script
})

The same signal is dispatched as an event on window every time consent is decided or changed:

window.addEventListener('cookiebar:consent', (event) => {
  const { action, categories } = event.detail
})

// Has the visitor already decided?
window.cookieBar.hasDecided()   // true / false
If your widget sets cookies in a category (for example marketing), only load it when that category has been accepted: check consent.categories.marketing, or let Consentaur block the script automatically with data-cookiebar-category. Waiting for a choice does not replace consent for the category.

Mobile

In your dashboard, under Banner → Layout → "Mobile layout", you can choose Compact. On screens up to 640 px wide the banner then shows one line of text with "Read more", "Reject all" and "Accept all" side by side and "Customize" as a link. The choices, the categories and the way consent is stored stay the same; only the layout changes. Compact takes up about 20% of the screen on a typical phone, against about 30% for the standard layout, which shows the banner as on desktop.

If your website has a chat button or similar that would otherwise sit on top of the banner, load it only after the visitor has answered. See Wait for the visitor's choice above.

Troubleshooting

The cookie banner does not appear

  • Check that the script tag is in <head>
  • Open the browser console (F12) and look for error messages from Consentaur
  • If you have already consented, delete the cookiebar_consent cookie (and the localStorage key of the same name) and reload the page

Cookies are set before consent

  • Make sure the Consentaur script is the first script in <head>
  • Remove async and defer from the Consentaur script if you added them
  • Check whether a caching or optimisation plugin moves or delays the script
  • Scan your site again to update the list of cookies to block

Content Security Policy (CSP)

If your website uses a Content Security Policy, allow scripts from cdn.consentaur.com:

Content-Security-Policy: script-src 'self' https://cdn.consentaur.com;