Script Integration

How to add the Cookiewise consent banner to any website, CMS, or platform.

Basic Installation

Add the following script tag as the very first script after your opening <head> tag, before any analytics or marketing scripts:

<script src="https://www.cookiewise.net/api/script.js?website_id=YOUR_WEBSITE_ID"></script>

The script is lightweight (~8KB gzipped), loads asynchronously, and does not block page rendering. Place it first so it can intercept vendor scripts the scanner has classified (chat, translate, embeds) before they run.

Vendor script blocking

After a scan, Cookiewise sends host rules for vendors that loaded without an immediate cookie (for example ClickDesk or Google Translate). Until the visitor allows that category, the banner:

  • Stops those hosts writing cookies via document.cookie
  • Neutralises matching <script src> and <iframe src> inserts (including tags added later by GTM or a consent callback)

Google Tag Manager and first-party scripts are not blocked just because analytics cookies exist. Only hosts from detected vendor inventory rows are held back. Scripts already in the HTML still need Cookiewise to load first; later inserts are the reliable path.

Platform-Specific Guides

WordPress

Two options for WordPress integration:

  1. Theme header: Add the script to header.php in your theme, as the first script after <head>
  2. Plugin: Use a plugin like "Insert Headers and Footers" or "WPCode" to add the script without editing theme files

Shopify

  1. Go to Online Store → Themes → Edit code
  2. Open theme.liquid
  3. Paste the script tag as the first item after the opening <head> tag
  4. Save

Webflow

  1. Open Project Settings → Custom Code
  2. Paste the script in the Head Code section
  3. Publish your site

Google Tag Manager

  1. Create a new Custom HTML tag
  2. Paste the script tag
  3. Set trigger to All Pages - Page View
  4. Set priority to fire before other tags
Built-in Google Consent Mode v2

Cookiewise includes native Google Consent Mode v2 support. It follows Google's strict sequence and automatically:

  • 1. Sets gtag('consent', 'default', ...) to denied (with wait_for_update) before GTM/GA4 tags run
  • 2. Fires gtag('consent', 'update', ...) when visitors accept, reject, or customise cookies
  • 3. Maps cookie categories to Google signals: analytics to analytics_storage, marketing to ad_storage/ad_user_data/ad_personalization

You do not need a separate Consent Mode snippet. Load the Cookiewise script first in <head>, before GTM/GA4, so defaults are set in time.

Next.js / React

Add to your _document.tsx or root layout:

<Head>
  <script src="https://www.cookiewise.net/api/script.js?website_id=YOUR_ID" />
</Head>

Script Parameters

ParameterRequiredDescription
website_idYesYour unique website identifier from the dashboard
langNoForce a specific language (e.g., en, de, fr)
debugNoSet to true to enable console logging

Google Analytics 4 Integration

With built-in Consent Mode v2, GA4 setup is straightforward. Place the Cookiewise script first, then your GA4 code:

<!-- 1. Cookiewise (in <head>) -->
<script src="https://www.cookiewise.net/api/script.js?website_id=YOUR_ID"></script>

<!-- 2. GA4 (before </body> or in <head>) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

That's it. Cookiewise first sets denied defaults, then sends consent updates when visitors interact with the banner. GA4 responds dynamically - no page reload needed for analytics to start flowing.

CSP Note

If your site uses Content Security Policy headers, use wildcard domains: https://*.google-analytics.com and https://*.googletagmanager.com in your script-src, img-src, and connect-src directives. GA4 uses regional endpoints (e.g. region1.google-analytics.com) that exact-match rules will silently block.

Verifying Installation

After adding the script, verify it's working:

  1. Open your website in an incognito/private browser window
  2. The consent banner should appear within 1-2 seconds
  3. Open browser DevTools - Console and look for Cookiewise: initialized
  4. Check the Network tab for a successful request to cookiewise.net/api/script.js
  5. In the Console, type Cookiewise.getConsentMode() - should return true
  6. Accept cookies, then check GA4 Realtime to confirm data is flowing