Documentation | getconsent.io

Getting Started

Up and running in 60 seconds.

Three steps. No build tools, no npm, no configuration files.

Create your account

Add your site

Go to the dashboard and add your domain. Choose a consent style and accent color.

Paste one script tag

Copy the snippet below into your HTML. That's it — you're compliant.

index.html

<script
  src="https://getconsent.io/v1.js"
  data-site="YOUR_SITE_KEY"
  defer
></script>

Replace YOUR_SITE_KEY with the key from your dashboard. The script is under 4kb gzipped, loads asynchronously, and causes zero layout shift.

Customization

Four ways to ask nicely.

Every site has a different tone. Pick the consent style that fits your brand, then customize the accent color from the dashboard.

Ghost

Best for: blogs, portfolios, minimal sites

Essential-only messaging by default. Displays a small shield badge in the corner that opens a preferences panel on click. Your site loads clean — no banner, no popup. The consent signal is still exposed so you can gate non-essential scripts.

Whisper

Best for: SaaS landing pages, marketing sites

A subtle bottom bar that slides in. Gives users a clear accept/decline choice without blocking content. Stays out of the way while remaining visible and accessible.

Trust Signal

Best for: e-commerce, finance, healthcare

A prominent but polished card overlay. Builds user confidence with clear language about what cookies are used and why. Ideal when trust is a key part of your conversion funnel.

Inline

Best for: sites requiring explicit consent before any interaction

A centered modal that requires interaction before the user can proceed. Impossible to miss. Use this when your legal team requires affirmative consent before the page becomes interactive.

All styles expose the same window.consentStatus property and consent event, so switching styles never requires code changes.

Core Concept

Gate scripts on consent.

The getconsent.io script exposes two primitives for controlling when third-party scripts execute:

1.window.consentStatus — a string property that reflects the current state: "accept", "reject", or "pending".
2.A consent CustomEvent dispatched on window whenever the user makes or changes their choice. The event's detail.action contains the new status.

Basic pattern

Check the current status for returning visitors who already consented, then listen for new choices:

consent-gating.js

// Check current consent status (for returning visitors)
if (window.consentStatus === 'accept') {
  loadAnalytics();
}

// Listen for new consent decisions
window.addEventListener('consent', function(e) {
  if (e.detail.action === 'accept') {
    loadAnalytics();
  }
});

Real-world example: Google Analytics

Gate Google Analytics so it only loads after the user accepts cookies. No data is sent to Google until explicit consent is given.

google-analytics.js

function loadGoogleAnalytics() {
  var script = document.createElement('script');
  script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
  script.async = true;
  document.head.appendChild(script);

  script.onload = function() {
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX');
  };
}

// Returning visitor who already consented
if (window.consentStatus === 'accept') {
  loadGoogleAnalytics();
}

// First-time visitor — wait for consent
window.addEventListener('consent', function(e) {
  if (e.detail.action === 'accept') {
    loadGoogleAnalytics();
  }
});

Real-world example: Facebook Pixel

Same pattern, applied to the Facebook tracking pixel. The pixel only initializes after consent.

facebook-pixel.js

function loadFacebookPixel() {
  !function(f,b,e,v,n,t,s) {
    if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)
  }(window,document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');

  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
}

if (window.consentStatus === 'accept') {
  loadFacebookPixel();
}

window.addEventListener('consent', function(e) {
  if (e.detail.action === 'accept') {
    loadFacebookPixel();
  }
});

Tip: handle rejection too

If you need to clean up when a user withdraws consent, listen for e.detail.action === 'reject' and remove any cookies or disable tracking accordingly.

Integration

Works with everything.

getconsent.io is a single script tag — it works anywhere HTML runs. Here are copy-paste examples for popular frameworks.

Next.js

App Router & Pages Router

Use the Next.js Script component to load the consent banner. Then gate analytics in a client component.

app/layout.tsx

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://getconsent.io/v1.js"
          data-site="YOUR_SITE_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

components/Analytics.tsx

'use client';
import { useEffect } from 'react';
import Script from 'next/script';
import { useState } from 'react';

export function Analytics() {
  const [consented, setConsented] = useState(false);

  useEffect(() => {
    if (window.consentStatus === 'accept') {
      setConsented(true);
    }
    function onConsent(e: CustomEvent) {
      setConsented(e.detail.action === 'accept');
    }
    window.addEventListener('consent', onConsent as EventListener);
    return () => window.removeEventListener('consent', onConsent as EventListener);
  }, []);

  if (!consented) return null;

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

React

Vite, Create React App, etc.

Add the script tag to your index.html, then use a useEffect hook to respond to consent changes.

src/useConsent.ts

import { useEffect, useState } from 'react';

export function useConsent() {
  const [status, setStatus] = useState<string>(
    () => (window as any).consentStatus ?? 'pending'
  );

  useEffect(() => {
    function onConsent(e: CustomEvent) {
      setStatus(e.detail.action);
    }
    window.addEventListener('consent', onConsent as EventListener);
    return () => window.removeEventListener('consent', onConsent as EventListener);
  }, []);

  return status;
}

// Usage in any component:
// const consent = useConsent();
// if (consent === 'accept') { /* load analytics */ }

WordPress

functions.php snippet

Add this to your theme's functions.php. It enqueues the consent script with the required data-site attribute.

functions.php

function enqueue_getconsent_script() {
    wp_enqueue_script(
        'getconsent',
        'https://getconsent.io/v1.js',
        array(),
        null,
        array( 'strategy' => 'defer', 'in_footer' => true )
    );
}
add_action( 'wp_enqueue_scripts', 'enqueue_getconsent_script' );

function add_getconsent_data_attribute( $tag, $handle ) {
    if ( 'getconsent' !== $handle ) {
        return $tag;
    }
    return str_replace(
        ' src',
        ' data-site="YOUR_SITE_KEY" src',
        $tag
    );
}
add_filter( 'script_loader_tag', 'add_getconsent_data_attribute', 10, 2 );

Shopify

theme.liquid

Paste this into your theme's theme.liquid file, just before the closing </head> tag.

theme.liquid

<!-- Add before </head> -->
<script
  src="https://getconsent.io/v1.js"
  data-site="YOUR_SITE_KEY"
  defer
></script>

</>

Plain HTML

Any static site

Just add the script tag anywhere in your HTML. The defer attribute ensures it loads without blocking rendering.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <script
    src="https://getconsent.io/v1.js"
    data-site="YOUR_SITE_KEY"
    defer
  ></script>
</head>
<body>
  <!-- Your content -->
</body>
</html>

Compliance

Link your privacy policy.

GDPR Article 13 requires that you inform users about your data processing practices at the point of collection. Your consent banner should link to a privacy policy that explains what cookies you use, why, and how users can manage their preferences.

In the getconsent.io dashboard, go to Site Settings → Privacy Policy URL and enter the full URL of your privacy policy page. The consent banner will automatically include a link to it.

What to include in your privacy policy:

• Which cookies your site uses and their purpose
• Which third parties receive data (Google Analytics, Facebook, etc.)
• How long cookies persist
• How users can withdraw consent at any time
• Contact information for your Data Protection Officer (if applicable)

If you don't have a privacy policy yet, consult a legal professional familiar with the privacy regulations that apply to your users. getconsent.io helps you collect consent — but the policy itself should be written by someone who understands your specific data processing activities.

User Rights

Withdrawal is always available.

Under GDPR, users must be able to withdraw consent as easily as they gave it. getconsent.io handles this automatically with a persistent settings badge.

How it works:

1After a user makes their initial consent choice, the banner dismisses and a small shield badge appears in the corner of the screen.
2Clicking the badge reopens the consent preferences panel at any time.
3When a user changes their preference, a new consent event fires with the updated status.
4The preference is stored locally and respected on subsequent visits. No server-side session is required.

If you're gating scripts with the event listener pattern described in Gating Scripts, withdrawal works automatically. When a user switches from accept to reject, the page reloads and your gated scripts simply won't execute on the next load.

Common Questions

Frequently asked.

Is getconsent.io GDPR compliant?+

Yes. getconsent.io is built with privacy by design and is intended to support common consent requirements under GDPR, CCPA, LGPD, and similar regulations. It provides a clear opt-in/opt-out mechanism, persists user preferences, exposes a consent signal for gating non-essential scripts, and links to your privacy policy. That said, full GDPR compliance depends on how your entire site handles data — the consent tool is one important piece.

Does getconsent.io block cookies?+

getconsent.io itself does not intercept or block cookies set by other scripts. Instead, it exposes a consent signal (window.consentStatus and a consent event) that you use to conditionally load scripts that set cookies. This gives you full control: scripts that depend on consent only run after the user opts in.

How does consent withdrawal work?+

After a user makes their initial choice, a small shield badge persists in the corner of the screen. Clicking it reopens the consent panel so they can change their preference at any time. When they do, a new consent event fires and window.consentStatus updates—your code should stop loading or disable non-essential scripts if they withdraw consent. This supports the GDPR expectation that withdrawal must be as easy as giving consent.

What data does getconsent.io collect?+

getconsent.io collects the minimum data needed to function: your site's domain, the consent style configuration, and anonymous consent events (accept, reject, dismiss) for your analytics dashboard. No personal data, IP addresses, or cross-site identifiers are collected or stored. Consent preferences are stored locally in the user's browser.

Can I customize the consent banner?+

Yes. You can choose from four consent styles (Ghost, Whisper, Trust Signal, Inline), set a custom accent color, and configure the banner text from the dashboard. The banner automatically inherits a dark or light treatment to match your site. On the Business plan, you can also add custom branding and remove the getconsent.io attribution.

Does getconsent.io work with single-page applications?+

Yes. The consent script is loaded once and persists across client-side route transitions. The window.consentStatus property and consent event work the same way in SPAs as in traditional multi-page sites. For React and Next.js, see the Framework Guides section above for idiomatic integration patterns.

How do I integrate getconsent.io with Google Analytics?+

Wrap your Google Analytics initialization in a function, then call that function only when window.consentStatus is 'accept' or when a consent event fires with detail.action === 'accept'. See the Gating Scripts section above for a complete, copy-paste Google Analytics example.

What's the difference between the consent styles?+

Ghost shows essential-only messaging with a subtle corner badge — ideal for minimal sites. Whisper is a slim bottom bar. Trust Signal is a prominent card overlay that builds confidence for e-commerce. Inline is a centered modal that requires interaction before the page becomes usable. All four styles use the same consent API, so you can switch anytime without code changes.

Is getconsent.io free?+

Yes, there is a free plan that includes 1 site, 5,000 pageviews per month, and all four consent styles. No credit card required. The Pro plan ($9/month) adds up to 3 sites and 100,000 pageviews. The Business plan ($29/month) includes unlimited sites and pageviews, custom branding, and priority support.

Does getconsent.io slow down my website?+

No. The script is about 3kb gzipped (under 10kb uncompressed), loads asynchronously with the defer attribute, and causes zero layout shift. It typically loads in under 50ms and has minimal impact on Core Web Vitals. The script is served from a global CDN for fast delivery worldwide.

How does getconsent.io protect against abuse?+

Public APIs apply rate limits (for example on consent events, config fetches, and sign-ups). In production, configure Upstash Redis (UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN) so limits are enforced consistently across all serverless instances. Without Redis, in-memory limits still apply per instance but are weaker under heavy traffic.

Ready to get started?

Create a free account, add your site, and paste one script tag. You'll be compliant in under a minute.

Start free