Integrations — CMPStack

WordPress

CDN script

Paste the CDN script first in your theme <head>.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1
Open your theme header
In wp-admin go to Appearance → Theme File Editor → header.php (prefer a child theme). Or use a headers/footers plugin that injects into <head>.

2

Paste as first script in <head>

Insert your CMPStack CDN script as the first script tag inside <head>, before analytics or other plugins.

embed.html

<head>
  <!-- CMPStack CDN: MUST be the first tag in <head> (before GA/GTM/pixels) -->
<script src="https://cdn.cmpstack.com/consent.js?v=16" data-domain-id="YOUR_DOMAIN_ID" data-api-origin="https://app.cmpstack.com"></script>
  <!-- other scripts after CMPStack -->
</head>

Tip: Required: the CDN script MUST be the first tag in <head>. Dashboard changes apply without editing the snippet again.

3
Verify your site
Confirm DNS verification in CMPStack Settings, then visit your site in a private browser window.

Ghost

CDN script

Site Header code injection in Ghost admin (<head>).

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1
Open code injection
In Ghost admin go to Settings → Code injection.

2

Paste in Site Header

Add your embed snippet to the Site Header field (runs in <head> on every page). Place it before other scripts.

embed.html

<script
  src="https://cdn.cmpstack.com/consent.js?v=16"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://app.cmpstack.com"
></script>

3
Save and test
Save changes and open your Ghost publication in a private window to confirm the banner appears.
Tip: Use your Ghost custom domain in CMPStack and verify DNS before production.

Joomla

CDN script

Add the script to your active site template.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1
Open template editor
In Joomla admin go to System → Site Templates → select your default template → index.php (or use a child template).

2

Paste at top of <head>

In your active template, find the opening <head> tag and paste your embed snippet as the first script inside <head>.

embed.html

<head>
  <!-- CMPStack CDN: MUST be the first tag in <head> (before GA/GTM/pixels) -->
<script src="https://cdn.cmpstack.com/consent.js?v=16" data-domain-id="YOUR_DOMAIN_ID" data-api-origin="https://app.cmpstack.com"></script>
  <!-- other scripts after CMPStack -->
</head>

3
Clear cache and test
Save the template, clear Joomla cache (System → Clear Cache), and preview the front-end in a private window.
Tip: Prefer a template override or custom HTML module if you do not want to edit core template files directly.

Drupal

CDN script

Load the banner from your theme or a custom block.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1

Add to html.html.twig <head>

In your active theme, open templates/layout/html.html.twig and paste the snippet as the first script inside <head>.

embed.html

<head>
  <!-- CMPStack CDN: MUST be the first tag in <head> (before GA/GTM/pixels) -->
<script src="https://cdn.cmpstack.com/consent.js?v=16" data-domain-id="YOUR_DOMAIN_ID" data-api-origin="https://app.cmpstack.com"></script>
  <!-- other scripts after CMPStack -->
</head>

2
Alternative: block module
You can also create a Custom block (Full HTML) with the snippet and place it in a footer region on all pages.
Tip: Drupal multisite or subdomain setups need the matching hostname added as a domain in CMPStack.

WooCommerce

CDN script

Same CDN script in your WordPress theme <head>.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1

Add the script to WordPress <head>

WooCommerce runs on WordPress — paste the CMPStack CDN script as the first tag in your theme <head> (header.php or a headers plugin).

embed.html

<head>
  <!-- CMPStack CDN: MUST be the first tag in <head> (before GA/GTM/pixels) -->
<script src="https://cdn.cmpstack.com/consent.js?v=16" data-domain-id="YOUR_DOMAIN_ID" data-api-origin="https://app.cmpstack.com"></script>
  <!-- other scripts after CMPStack -->
</head>

2
Cover shop pages
Confirm the banner loads on shop, product, cart, and checkout pages in a private window.
3
Match storefront domain
Add your store hostname in CMPStack and verify DNS. Enable subdomain consent sharing in Compliance if checkout uses another host.

Shopify

CDN script

First script in theme.liquid <head> for early blocking.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1
Open theme code editor
Shopify admin → Online Store → Themes → Actions → Edit code.
2
Edit theme.liquid <head>
In Layout, open theme.liquid. Find the <head> section near the top of the file.

3

Paste as first script in <head>

Insert your CMPStack script as the first script tag inside <head>, before Shopify apps or analytics.

embed.html

<head>
  <!-- CMPStack CDN: MUST be the first tag in <head> (before GA/GTM/pixels) -->
<script src="https://cdn.cmpstack.com/consent.js?v=16" data-domain-id="YOUR_DOMAIN_ID" data-api-origin="https://app.cmpstack.com"></script>
  <!-- other scripts after CMPStack -->
</head>

4
Preview storefront
Open your store in a private window and confirm the banner loads before checkout scripts fire.

Magento

CDN script

HTML Head script via admin or theme layout.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1
Use Script Manager or theme
Magento 2: Content → Design → Configuration → edit your store view → HTML Head. Or add to default_head_blocks in your theme layout XML.
2
Paste in HTML Head
Add the script as the first entry in HTML Head so it loads before other storefront tags.
embed.html
```
<script
  src="https://cdn.cmpstack.com/consent.js?v=16"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://app.cmpstack.com"
></script>
```
Tip: Prefer HTML Head over Footer so auto-blocking runs before storefront scripts.
3
Test checkout flow
Verify payment and analytics scripts respect consent on product, cart, and checkout pages.

PrestaShop

CDN script

First script in theme <head> via template partial.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1

Add to theme <head>

In your active theme, add the snippet as the first script in the <head> block (e.g. templates/_partials/head.tpl or equivalent).

embed.html

<head>
  <!-- CMPStack CDN: MUST be the first tag in <head> (before GA/GTM/pixels) -->
<script src="https://cdn.cmpstack.com/consent.js?v=16" data-domain-id="YOUR_DOMAIN_ID" data-api-origin="https://app.cmpstack.com"></script>
  <!-- other scripts after CMPStack -->
</head>

2
Clear Smarty cache
Advanced Parameters → Performance → Clear cache, then test the storefront.

BigCommerce

CDN script

Script Manager header script for all storefront pages.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1
Open Script Manager
BigCommerce admin → Storefront → Script Manager → Create a Script.

2

Add header script

Choose Header (not Footer), All pages, Script type: Script. Paste your embed snippet as the first script.

embed.html

<script
  src="https://cdn.cmpstack.com/consent.js?v=16"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://app.cmpstack.com"
></script>

3
Save and publish
Save the script and preview your storefront. Stencil themes pick up Script Manager entries automatically.

Webflow

CDN script

Head custom code — loads before other tags after publish.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1
Open project settings
Webflow Designer → gear icon (Project Settings).

2

Add head custom code

Custom Code tab → Head Code. Paste your embed snippet as the first script in head.

embed.html

<script
  src="https://cdn.cmpstack.com/consent.js?v=16"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://app.cmpstack.com"
></script>

3
Publish site
Publish from the Webflow dashboard and test in a private window.

Framer

CDN script

Start-of-head custom code on your Framer site.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1
Open site settings
Framer → Site Settings → General → Custom Code.

2

Paste at start of head

Add your embed snippet in Start of <head> tag — first script, before Framer Analytics or other tags.

embed.html

<script
  src="https://cdn.cmpstack.com/consent.js?v=16"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://app.cmpstack.com"
></script>

3
Publish
Publish and confirm your custom domain matches the domain in CMPStack.

Wix

CDN script

Custom code on all pages via Wix dashboard.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1
Open custom code
Wix dashboard → Settings → Custom Code (or Marketing & SEO → Custom Code on some plans).

2

Add head code

Click Add Custom Code, paste your snippet, set placement to Head, apply to All pages. Keep it first in the list.

embed.html

<script
  src="https://cdn.cmpstack.com/consent.js?v=16"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://app.cmpstack.com"
></script>

3
Publish site
Publish and test. Wix Velo users can alternatively inject via $w onPageReady in masterPage.js — script tag in dashboard is simpler.

Squarespace

CDN script

Header code injection in Squarespace settings.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1
Open code injection
Squarespace → Settings → Advanced → Code Injection.

2

Paste in Header

Add your embed snippet to the Header field (injected in <head>). Place before other scripts.

embed.html

<script
  src="https://cdn.cmpstack.com/consent.js?v=16"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://app.cmpstack.com"
></script>

3
Save and preview
Save, then open your site in a private window. Pro may be required for code injection.
Tip: If Code Injection is unavailable on your plan, embed via a Code Block on each page (less ideal).

Bubble

CDN script

Script in Bubble SEO / meta tag settings.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1
Open Bubble settings
Bubble editor → Settings → SEO / metatags (tab varies by Bubble version).

2

Add script to head

Paste your embed snippet in the script/meta field that runs in <head> on all pages.

embed.html

<script
  src="https://cdn.cmpstack.com/consent.js?v=16"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://app.cmpstack.com"
></script>

3
Deploy and test
Deploy to live and test on your Bubble custom domain.

Next.js

CDN script

Load consent.js in root layout with beforeInteractive (injected in head).

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1

Add to app/layout.tsx

Use next/script with strategy="beforeInteractive" so consent.js is injected in <head> before other scripts.

app/layout.tsx

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Script
          src="https://cdn.cmpstack.com/consent.js?v=16"
          data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://app.cmpstack.com"
          strategy="beforeInteractive"
        />
        {children}
      </body>
    </html>
  );
}

2

Pages Router alternative

For pages/_document.tsx, add the script as the first tag inside <Head> from next/head.

embed.html

<script
  src="https://cdn.cmpstack.com/consent.js?v=16"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://app.cmpstack.com"
></script>

3
Deploy
Deploy to Vercel, Railway, or your host. Add your production domain in CMPStack and verify DNS.
Tip: beforeInteractive ensures the CMP runs before analytics and tag manager scripts. /_next/ chunks and same-origin app scripts are never auto-blocked — only third-party trackers and tagged scripts wait for consent.

React / Vite

CDN script

Paste into index.html or load via useEffect.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1

Edit index.html (recommended)

In Vite or Create React App, open index.html and paste the snippet as the first script inside <head>.

embed.html

<head>
  <!-- CMPStack CDN: MUST be the first tag in <head> (before GA/GTM/pixels) -->
<script src="https://cdn.cmpstack.com/consent.js?v=16" data-domain-id="YOUR_DOMAIN_ID" data-api-origin="https://app.cmpstack.com"></script>
  <!-- other scripts after CMPStack -->
</head>

2
SPA client-side alternative
For client-only injection, append the script in root App useEffect — index.html is preferred so blocking runs sooner.
3
Build and deploy
Run your production build and deploy. Add the live hostname as a domain in CMPStack.

Nuxt

CDN script

Global script via nuxt.config head or app.vue.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1

Configure nuxt.config

Add the consent script to app.head.script as the first entry so it loads in <head> on every page.

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://cdn.cmpstack.com/consent.js?v=16",
          "data-domain-id": "YOUR_DOMAIN_ID",
          "data-api-origin": "https://app.cmpstack.com",
        },
      ],
    },
  },
});

2
Or use app.vue
Alternatively use useHead() in app.vue with the same script src and data-domain-id attributes.
3
Deploy
Deploy your Nuxt app and verify the banner on SSR and client navigations.

HTML / any website

CDN script

One script tag works on any site that allows custom HTML.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1

Copy embed snippet

From Dashboard → Integrations, copy the full embed snippet with your Domain ID.

embed.html

<script
  src="https://cdn.cmpstack.com/consent.js?v=16"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://app.cmpstack.com"
></script>

2

Paste in <head>

Add the script as the first tag inside <head> on every page — before analytics, chat widgets, or other third-party scripts.

embed.html

<head>
  <!-- CMPStack CDN: MUST be the first tag in <head> (before GA/GTM/pixels) -->
<script src="https://cdn.cmpstack.com/consent.js?v=16" data-domain-id="YOUR_DOMAIN_ID" data-api-origin="https://app.cmpstack.com"></script>
  <!-- other scripts after CMPStack -->
</head>

3
Verify domain
Add your hostname in CMPStack, verify DNS, and test in a private browser window.
Tip: Loading in <head> first ensures auto-blocking catches trackers before they run.

Cloudflare

CDN script

Inject consent.js at the edge so auto-block runs before origin scripts.

Required: the CDN consent.js script MUST be the first tag inside your HTML <head> — before Google Analytics, GTM, Meta Pixel, or any other third-party scripts. Auto-blocking and Consent Mode only work reliably when CMPStack loads first.

1

Create a Worker in front of the site

In Cloudflare, add a Worker routed to your zone (or attach it to the zone as a custom domain proxy). The Worker fetches the origin HTML and prepends the CMP script to <head> so it runs before other tags.

worker.js

// worker.js
export default {
  async fetch(request, env, ctx) {
    const response = await fetch(request);
    const type = response.headers.get("content-type") || "";
    if (!type.includes("text/html")) return response;

    const snippet = `<script src="https://cdn.cmpstack.com/consent.js?v=16" data-domain-id="YOUR_DOMAIN_ID"></script>`;
    return new HTMLRewriter()
      .on("head", {
        element(el) {
          el.prepend(snippet, { html: true });
        },
      })
      .transform(response);
  },
};

2
Route it on HTML pages
Attach a route such as example.com/* (or a path that covers every HTML response). Skip static assets if you already filter on content-type as in the snippet.
Tip: CMPStack's own embed already loads consent.js from the CMPStack CDN. This Worker is for sites that cannot edit origin HTML (legacy CMS, locked themes).
3
Zaraz alternative
If you use Cloudflare Zaraz, add a Custom HTML tool that loads on every page and paste the same embed snippet. Place it before other Zaraz tools that inject analytics.
embed.html
```
<script
  src="https://cdn.cmpstack.com/consent.js?v=16"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://app.cmpstack.com"
></script>
```
4
Verify
Open the live hostname, view source, and confirm consent.js is the first script in <head>. Then verify the domain in CMPStack Settings.

Install CMPStack on your platform

WordPress

Open your theme header

Paste as first script in <head>

Verify your site

Ghost

Open code injection

Paste in Site Header

Save and test

Joomla

Open template editor

Paste at top of <head>

Clear cache and test

Drupal

Add to html.html.twig <head>

Alternative: block module

WooCommerce

Add the script to WordPress <head>

Cover shop pages

Match storefront domain

Shopify

Open theme code editor

Edit theme.liquid <head>

Paste as first script in <head>

Preview storefront

Magento

Use Script Manager or theme

Paste in HTML Head

Test checkout flow

PrestaShop

Add to theme <head>

Clear Smarty cache

BigCommerce

Open Script Manager

Add header script

Save and publish

Webflow

Open project settings

Add head custom code

Publish site

Framer

Open site settings

Paste at start of head

Publish

Wix

Open custom code

Add head code

Publish site

Squarespace

Open code injection

Paste in Header

Save and preview

Bubble

Open Bubble settings

Add script to head

Deploy and test

Next.js

Add to app/layout.tsx

Pages Router alternative

Deploy

React / Vite

Edit index.html (recommended)

SPA client-side alternative

Build and deploy

Nuxt

Configure nuxt.config

Or use app.vue

Deploy

HTML / any website

Copy embed snippet

Paste in <head>

Verify domain

Cloudflare

Create a Worker in front of the site

Route it on HTML pages

Zaraz alternative

Verify