Setup & Installation

Banner Installation

Installing the Consentify banner on your website is quick and straightforward. Simply add our script tag to your site's HTML, and the banner will automatically appear to collect user consent.

Step 1: Get your script tag

Every domain you register with Consentify gets a unique script tag. You can find your script tag in your Consentify dashboard

Step 2: Choose your platform

Select your platform below for tailored installation instructions:

Verification

After installation, visit your website to confirm the banner appears correctly. You can also check your Consentify dashboard to see real-time analytics and verify that the script is communicating properly.

CLI Quickstart

Prefer the terminal? One command sets up a whole site: it logs you in, creates the domain, removes any old cookie tool, and adds the banner script. No copy-pasting.

What it does

1. Detects your framework (Next.js, Vite, Vue, WordPress, or plain HTML) and where to place the script.
2. Removes any existing consent tool (Cookiebot, OneTrust, Iubenda) and injects the Consentify banner.
3. Configures the trackers it finds so they are gated behind consent from the first load, then commits the change.

Useful flags

• --dry-run detect only, change nothing
• --git=branch|commit|push|none how changes are committed
• bulk <folder> set up every project in a folder at once

Revoke Consent Button

GDPR requires that users can change their consent preferences at any time. Consentify gives you two ways to provide this: add a custom button to your site, or enable the floating consent icon in your banner settings.

Option 1: Custom button

The Consentify script automatically detects any element with the id revoke-consent-btn and attaches the necessary click event to it. No additional JavaScript required on your end.

Adding the button

Add this button to your site's footer or another persistent location that appears on all pages:

<button id="revoke-consent-btn">
  Cookie Settings
</button>

You can style this button with your own CSS classes to match your website's design. The text can also be customized to match your preferred language (e.g., "Cookie Preferences", "Manage Cookies", etc.).

Option 2: Floating icon

Go to Banner settings and set Revoke Consent Button to Floating icon. Consentify will automatically inject a fixed-position icon button on every page so users can always open their preferences. No code changes needed on your site.

Integrations

Consentify makes it easy to integrate with popular third-party services like Google Analytics, Facebook Pixel, and many more. Our system ensures that these scripts are only loaded after a user provides their explicit consent, helping you maintain GDPR compliance.

How Integrations Work

When a user gives consent for a specific category (e.g., Analytics or Marketing), Consentify dynamically injects the associated third-party scripts into your website. This means you don't need to manually manage conditional script loading – Consentify handles it for you automatically.

For each integration, you typically provide an ID (e.g., a Google Analytics Tracking ID or a Facebook Pixel ID) in your Consentify dashboard. Our system then renders the correct script for that service.

Supported Integrations

Consentify supports a wide range of popular services. You can enable and configure them directly from your dashboard under the 'Integrations' tab.

Videos and widgets

A YouTube video, a Google Map or a Calendly booking widget starts setting cookies the second your page opens, long before anyone has agreed to anything. Consentify holds these back and shows a small box in their place until the visitor decides.

What you need to do

One small change per embed. Move the address out of src and into data-csfy-src, and on widget loader scripts also set type to text/plain. The browser then has no URL to fetch and nothing reaches the provider until we put it back. Our npx consentify-migrate command does this for you if your site lives in a repo.

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
></iframe>

<iframe
  data-csfy-src="https://www.youtube.com/embed/VIDEO_ID"
></iframe>

<script
  src="https://assets.calendly.com/assets/external/widget.js"
></script>

<script
  type="text/plain"
  data-csfy-src="https://assets.calendly.com/assets/external/widget.js"
></script>

Leave an embed exactly as the provider wrote it and it still gets a placeholder and still appears in your cookie declaration. What it does not get is real blocking: the browser sends the request while it is reading the page, before any script on it has run, so by the time we see the embed the provider has already heard from your visitor.

What gets held back

YouTube, Vimeo, Spotify, SoundCloud, Instagram, Facebook, X and Typeform wait for marketing consent. Google Maps and Calendly wait for functional consent, so someone who turns down marketing can still find your office and book a meeting.

What your visitors see

In place of the video or widget there is a small box, in the same colours as your banner, saying which service is hidden and why. One button takes them to your cookie settings, opened at that exact service. Accept, and the real content appears where the box was.

Your cookie declaration keeps itself current

Add a video to a page next year and you do not have to remember to tell anyone. The first visitor who opens that page is enough for it to appear in your cookie declaration, with its cookies listed. We never crawl your site to work this out.

Turning it off

There is a switch under Tools if you would rather embedded content loaded straight away. It is on by default. With it off, the content still shows up in your cookie declaration, but being listed there is not the same as being allowed.

For developers

An embed written with data-csfy-src has no URL for the browser to fetch, so nothing reaches the provider until consent arrives and we set src back. That is the only shape that is genuinely held back. A normal iframe src is different: the browser starts the request the moment it parses the tag, before any script on the page has run. We tested every way around it, including a MutationObserver, the synchronous DOMNodeInserted event and overriding the src setter on the prototype, and the request goes out first in all of them.

Placeholders render into a shadow root, so your CSS and ours cannot reach each other. Loader scripts are re-created on consent, and widget containers are hidden so they do not leave an empty gap where the widget would have been. Our script tag is async and belongs in the head, but that is about the banner appearing early and catching embeds that JavaScript adds later. It is not what holds back embeds in your markup, which data-csfy-src handles on its own.

Privacy-Policy Generation

Keeping your privacy policy updated with every technical change is a hassle. Consentify automates this by generating a dynamic disclosure of all your active trackers and cookies.

How it works

Our script includes a built-in Privacy Policy engine. It detects which integrations you have enabled (like Google Analytics or custom scripts) and generates a formatted, compliant table of cookies, providers, and purposes.

Automatic Injection

To display your dynamic policy, simply create a page on your website (e.g., /privacy-policy) and add an empty element with the following ID:

<!-- Cookie declaration: categorized table of active cookies -->
<div id="consentify-cookie-declaration"></div>

<!-- Consent receipt: visitor's current consent, change / withdraw -->
<div id="consentify-consent-state"></div>

Custom Styling

The injected policy comes with a clean, neutral design, but you can easily override the CSS classes (like .csfy-pp-table) to match your brand's unique look.

Tips & Tricks

How to See the Banner Again

Once a user has made a choice, the Consentify banner will not automatically reappear on subsequent visits, unless the policy version changes or the consent expires. If you need to test the banner or change your consent, here are a few ways:

• 1. Clear Local Storage: The easiest way to force the banner to reappear is to clear the `csfy_consent` item from your browser's Local Storage for your domain. You can do this in your browser's developer tools (Application -> Local Storage).
• 2. Use Incognito/Private Browsing: Opening your website in an incognito or private browsing window will treat you as a new visitor, causing the banner to display.
• 3. Programmatic Reopening: The Consentify script exposes a global function `window.consentifyReopenBanner()` that you can call from your browser's console or your own JavaScript to force the banner to show again.

Policy Versioning

Consentify uses a policy versioning system. If you update your cookie policy or make significant changes to your banner configuration in the dashboard, incrementing the 'Policy Version' will ensure that all users see the banner again and are prompted to re-consent, even if they previously accepted.

Local Storage Key

Consentify stores user consent preferences in your browser's Local Storage under the key `csfy_consent`. The stored data includes preferences for necessary, analytics, and marketing cookies, along with the `policy_version` and a `delete_token`.

Debugging the Banner

Consentify provides several built-in mechanisms to help you debug the banner and integration scripts.

Debug Modes (GTM Preview, Hotjar Verify)

The Consentify script automatically detects certain URL parameters that are commonly used by debugging tools like Google Tag Manager (GTM) Preview mode or Hotjar Verify. When these parameters are present, Consentify will activate all integration scripts regardless of the user's consent, allowing you to test your tracking setups.

• For GTM Preview mode, look for parameters like `gtm_preview`, `gtm_auth`, or `gtm_debug`.
• For Hotjar Verify, look for `hjVerifyInstall` or `hjVerifyUUID`.

Development Domain Validation Bypass

In development environments (`NODE_ENV === "development"`), Consentify automatically bypasses domain validation. This means you can test the banner on `localhost` or any development URL without needing to register it in your dashboard.

Pageview Tracking

Consentify tracks pageviews for billing and analytics purposes. The script increments a pageview counter via an API endpoint (`/api/gateway/increment-pageview`). This happens automatically on initial page load and on subsequent route changes (for SPAs) if consent is given or pre-authorized.

Advanced Usage

Once the Consentify banner is installed, you can read the consent state in your own code, both on the client side and on the server. This lets you gate your own scripts, API calls, or UI behind consent without relying on the banner to do it for you.

Reading consent in your own JavaScript

Consent is stored in localStorage under the key csfy_consent. You can read it at any time from your own scripts:

const consent = JSON.parse(localStorage.getItem('csfy_consent') || '{}');

if (consent.analytics) {
  // Run your own analytics code
  myAnalytics.track('page_view');
}

if (consent.marketing) {
  // Run marketing code
  loadRetargetingPixel();
}

Reading consent server-side

Consentify sets a cookie named csfy_consent with the same value as localStorage. This cookie is readable in server-side code such as Next.js middleware, API routes, or any server that receives HTTP requests from the browser.

// Next.js middleware (edge runtime)
import { NextRequest } from 'next/server';

const raw = request.cookies.get('csfy_consent')?.value;
const consent = raw ? JSON.parse(decodeURIComponent(raw)) : null;

if (consent?.analytics) {
  // User has given analytics consent
}

// Next.js API route / Server Component (Node runtime)
import { cookies } from 'next/headers';

const raw = cookies().get('csfy_consent')?.value;
const consent = raw ? JSON.parse(decodeURIComponent(raw)) : null;

if (consent?.marketing) {
  // Skip marketing API call if not consented
}

What needs consent and what doesn't

Not all cookies or storage require user consent. Under GDPR and the ePrivacy Directive, strictly necessary and functional cookies are exempt. Here's how to categorize your own cookies:

Custom integrations and when they run

Scripts added through Custom Integrations in your dashboard are injected after the user accepts the corresponding category. You assign each custom script to either analytics or marketing, Consentify handles the rest. If you want a custom script to also set a cookie, document that cookie in the cookie table when adding the integration so it appears correctly in the banner's disclosure modal and your auto-generated privacy policy.