Framework Guides

Step-by-step guides for adding ConsentStack to React, Next.js, Vue, Nuxt, and static sites.

Framework-specific guides for integrating ConsentStack. Each section shows the recommended approach for your stack — pick the one that matches and you'll be up and running in minutes.

For the full React SDK reference (hooks, props, headless mode), see the React SDK docs. For the vanilla JavaScript API, see the JavaScript API reference.

Next.js (App Router)

Install the React SDK and wrap your root layout with ConsentStackProvider. This gives every page access to consent state via hooks.

npm install @consentstack/react

app/layout.tsx

import { ConsentStackProvider } from '@consentstack/react'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ConsentStackProvider siteKey="pk_abc123">
          {children}
        </ConsentStackProvider>
      </body>
    </html>
  )
}

Use the useConsent hook in any client component to check consent state or conditionally load scripts:

components/analytics.tsx

'use client'

import { useConsentValue } from '@consentstack/react'
import Script from 'next/script'

export function Analytics() {
  const hasAnalytics = useConsentValue('analytics')
  if (!hasAnalytics) return null

  return <Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX" strategy="afterInteractive" />
}

Next.js (Pages Router)

Wrap your app in _app.tsx. The provider works the same way — it just lives in a different file.

pages/_app.tsx

import type { AppProps } from 'next/app'
import { ConsentStackProvider } from '@consentstack/react'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ConsentStackProvider siteKey="pk_abc123">
      <Component {...pageProps} />
    </ConsentStackProvider>
  )
}

If you don't need hooks, you can use the simpler ConsentStack component in _document.tsx instead:

pages/_document.tsx

import { Html, Head, Main, NextScript } from 'next/document'
import { ConsentStack } from '@consentstack/react'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <ConsentStack siteKey="pk_abc123" />
      </body>
    </Html>
  )
}

React (Vite / CRA)

Same React SDK, different entry point. Wrap your app at the root.

npm install @consentstack/react

src/main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { ConsentStackProvider } from '@consentstack/react'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ConsentStackProvider siteKey="pk_abc123">
      <App />
    </ConsentStackProvider>
  </React.StrictMode>
)

All hooks (useConsent, useConsentValue) work exactly as documented in the React SDK reference.

Vue & Nuxt

Vue apps use the script tag directly. Add it via useHead in your root layout or app component.

Nuxt 3

Add the script globally in nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://cdn.consentstack.io/consent.js',
          'data-site-key': 'pk_abc123',
          defer: true,
        },
      ],
    },
  },
})

Vue 3 (Vite)

Add the script tag to your index.html:

index.html

<head>
  <script src="https://cdn.consentstack.io/consent.js" data-site-key="pk_abc123" defer></script>
</head>

Vue composable

Access consent state reactively by wrapping window.consentstack in a composable:

composables/useConsent.ts

import { ref, onMounted, onUnmounted } from 'vue'

export function useConsent() {
  const consent = ref<Record<string, boolean> | null>(null)
  let unsubscribe: (() => void) | undefined

  onMounted(() => {
    const sdk = window.consentstack
    if (!sdk) return

    consent.value = sdk.getConsent()
    unsubscribe = sdk.onConsentChange((updated) => {
      consent.value = updated
    })
  })

  onUnmounted(() => {
    unsubscribe?.()
  })

  const hasConsent = (category: string): boolean => {
    return consent.value?.[category] ?? false
  }

  return { consent, hasConsent }
}

components/Analytics.vue

<script setup lang="ts">
import { useConsent } from '@/composables/useConsent'

const { hasConsent } = useConsent()
</script>

<template>
  <div v-if="hasConsent('analytics')">
    <!-- Analytics scripts load here -->
  </div>
</template>

Vanilla JS & Static Sites

The simplest integration. Add the script tag to your HTML <head> and ConsentStack handles everything automatically — no framework, no build step.

<head>
  <script src="https://cdn.consentstack.io/consent.js" data-site-key="pk_abc123" defer></script>
</head>

To let visitors re-open their preferences (e.g., from a "Cookie Settings" link in your footer), add an anchor with id="cs-preferences":

<footer>
  <a id="cs-preferences" href="#">Cookie Settings</a>
</footer>

For programmatic access, use the global window.consentstack API:

// Check consent before running a script
if (window.consentstack?.hasConsent('marketing')) {
  loadFacebookPixel()
}

// Listen for consent changes
window.consentstack?.onConsentChange((consent) => {
  console.log('Consent updated:', consent)
})

See the JavaScript API reference for the full API surface.

WordPress

Add the script tag to your site's <head> using the theme customizer or a header/footer plugin.

Theme Customizer: Go to Appearance > Customize > Additional Scripts (if your theme supports it) and paste:

<script src="https://cdn.consentstack.io/consent.js" data-site-key="pk_abc123" defer></script>

Header/footer plugin: Install a plugin like WPCode or Insert Headers and Footers. Add the script tag above to the header section.

functions.php: If you prefer code, add this to your theme's functions.php:

functions.php

function consentstack_enqueue_script() {
  wp_enqueue_script(
    'consentstack',
    'https://cdn.consentstack.io/consent.js',
    array(),
    null,
    false
  );
  // Add the data-site-key attribute
  add_filter('script_loader_tag', function($tag, $handle) {
    if ($handle === 'consentstack') {
      return str_replace(' src', ' data-site-key="pk_abc123" defer src', $tag);
    }
    return $tag;
  }, 10, 2);
}
add_action('wp_enqueue_scripts', 'consentstack_enqueue_script');

Replace pk_abc123 with your actual site key from the ConsentStack dashboard. You'll find it under Site Settings after creating your site.

What's next

React SDK reference — full hook and component documentation
JavaScript API — the window.consentstack API for any framework
SDK installation — advanced options like self-hosting and debug mode

On this page