CMPStackCMPStack
Integrations

Install CMPStack on your platform

Step-by-step guides for 18+ platforms — CMS (WordPress, Ghost, Joomla, Drupal), e-commerce (Shopify, WooCommerce, Magento, PrestaShop, BigCommerce), builders (Webflow, Framer, Wix, Squarespace, Bubble), and frameworks (Next.js, React, Nuxt, HTML).

Coming soon

WordPress

Native WordPress.org plugin.

Coming soon

Shopify

Native Shopify App Store app.

Coming soon

Wix

Native Wix App Market app.

Replace YOUR_DOMAIN_ID with the ID from Dashboard → your domain → Integrations. Sign in to copy your live Domain ID and Script URL automatically.

WordPress

Official plugin

Official plugin — no theme edits required.

Download plugin
  1. 1

    Download the plugin

    Download cmpstack-wordpress.zip from your dashboard Integrations page or the link below.

    Download WordPress plugin →
  2. 2

    Upload and activate

    In wp-admin go to Plugins → Add New → Upload Plugin. Choose the zip, click Install Now, then Activate.

  3. 3

    Configure Settings → CMPStack

    Open Settings → CMPStack in the WordPress sidebar. Paste your Domain ID and Script URL from the dashboard, then save.

  4. 4

    Verify your site

    Confirm DNS verification in CMPStack Settings, then visit your site in a private browser window. The plugin injects the script in <head> as the first tag.

Ghost

Script tag

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

  1. 1

    Open code injection

    In Ghost admin go to Settings → Code injection.

  2. 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://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://cmpstack-production.up.railway.app"
></script>
  3. 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

Script tag

Add the script to your active site template.

  1. 1

    Open template editor

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

  2. 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: first script in <head> -->
<script src="https://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15" data-domain-id="YOUR_DOMAIN_ID" data-api-origin="https://cmpstack-production.up.railway.app"></script>
  <!-- other scripts after CMPStack -->
</head>
  3. 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

Script tag

Load the banner from your theme or a custom block.

  1. 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: first script in <head> -->
<script src="https://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15" data-domain-id="YOUR_DOMAIN_ID" data-api-origin="https://cmpstack-production.up.railway.app"></script>
  <!-- other scripts after CMPStack -->
</head>
  2. 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

Official plugin

WordPress + WooCommerce via the official plugin.

Download plugin
  1. 1

    Install the WordPress plugin

    WooCommerce runs on WordPress — use the official CMPStack plugin.

    Download WordPress plugin →
  2. 2

    Configure on your store

    Paste Domain ID and Script URL in Settings → CMPStack. The banner loads on shop, product, cart, and checkout pages.

  3. 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

Script tag

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

  1. 1

    Open theme code editor

    Shopify admin → Online Store → Themes → Actions → Edit code.

  2. 2

    Edit theme.liquid <head>

    In Layout, open theme.liquid. Find the <head> section near the top of the file.

  3. 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: first script in <head> -->
<script src="https://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15" data-domain-id="YOUR_DOMAIN_ID" data-api-origin="https://cmpstack-production.up.railway.app"></script>
  <!-- other scripts after CMPStack -->
</head>
  4. 4

    Preview storefront

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

Magento

Script tag

HTML Head script via admin or theme layout.

  1. 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. 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://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://cmpstack-production.up.railway.app"
></script>

    Tip: Prefer HTML Head over Footer so auto-blocking runs before storefront scripts.

  3. 3

    Test checkout flow

    Verify payment and analytics scripts respect consent on product, cart, and checkout pages.

PrestaShop

Script tag

First script in theme <head> via template partial.

  1. 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: first script in <head> -->
<script src="https://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15" data-domain-id="YOUR_DOMAIN_ID" data-api-origin="https://cmpstack-production.up.railway.app"></script>
  <!-- other scripts after CMPStack -->
</head>
  2. 2

    Clear Smarty cache

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

BigCommerce

Script tag

Script Manager header script for all storefront pages.

  1. 1

    Open Script Manager

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

  2. 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://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://cmpstack-production.up.railway.app"
></script>
  3. 3

    Save and publish

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

Webflow

Script tag

Head custom code — loads before other tags after publish.

  1. 1

    Open project settings

    Webflow Designer → gear icon (Project Settings).

  2. 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://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://cmpstack-production.up.railway.app"
></script>
  3. 3

    Publish site

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

Framer

Script tag

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

  1. 1

    Open site settings

    Framer → Site Settings → General → Custom Code.

  2. 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://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://cmpstack-production.up.railway.app"
></script>
  3. 3

    Publish

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

Wix

Script tag

Custom code on all pages via Wix dashboard.

  1. 1

    Open custom code

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

  2. 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://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://cmpstack-production.up.railway.app"
></script>
  3. 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

Script tag

Header code injection in Squarespace settings.

  1. 1

    Open code injection

    Squarespace → Settings → Advanced → Code Injection.

  2. 2

    Paste in Header

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

    embed.html
    <script
  src="https://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://cmpstack-production.up.railway.app"
></script>
  3. 3

    Save and preview

    Save, then open your site in a private window. Business plan or higher 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

Script tag

Script in Bubble SEO / meta tag settings.

  1. 1

    Open Bubble settings

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

  2. 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://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://cmpstack-production.up.railway.app"
></script>
  3. 3

    Deploy and test

    Deploy to live and test on your Bubble custom domain.

Next.js

Script tag

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

  1. 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://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15"
          data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://cmpstack-production.up.railway.app"
          strategy="beforeInteractive"
        />
        {children}
      </body>
    </html>
  );
}
  2. 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://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://cmpstack-production.up.railway.app"
></script>
  3. 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.

React / Vite

Script tag

Paste into index.html or load via useEffect.

  1. 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: first script in <head> -->
<script src="https://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15" data-domain-id="YOUR_DOMAIN_ID" data-api-origin="https://cmpstack-production.up.railway.app"></script>
  <!-- other scripts after CMPStack -->
</head>
  2. 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. 3

    Build and deploy

    Run your production build and deploy. Add the live hostname as a domain in CMPStack.

Nuxt

Script tag

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

  1. 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://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15",
          "data-domain-id": "YOUR_DOMAIN_ID",
          "data-api-origin": "https://cmpstack-production.up.railway.app",
        },
      ],
    },
  },
});
  2. 2

    Or use app.vue

    Alternatively use useHead() in app.vue with the same script src and data-domain-id attributes.

  3. 3

    Deploy

    Deploy your Nuxt app and verify the banner on SSR and client navigations.

HTML / any website

Script tag

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

  1. 1

    Copy embed snippet

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

    embed.html
    <script
  src="https://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://cmpstack-production.up.railway.app"
></script>
  2. 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: first script in <head> -->
<script src="https://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15" data-domain-id="YOUR_DOMAIN_ID" data-api-origin="https://cmpstack-production.up.railway.app"></script>
  <!-- other scripts after CMPStack -->
</head>
  3. 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

Script tag

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

  1. 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://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15" data-domain-id="YOUR_DOMAIN_ID"></script>`;
    return new HTMLRewriter()
      .on("head", {
        element(el) {
          el.prepend(snippet, { html: true });
        },
      })
      .transform(response);
  },
};
  2. 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. 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://cmpstack-cdn.sakilahmed-dev.workers.dev/consent.js?v=15"
  data-domain-id="YOUR_DOMAIN_ID"
  data-api-origin="https://cmpstack-production.up.railway.app"
></script>
  4. 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.