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:

JavaScript / HTML Setup

Where to find your script tag

Your unique script tag with the correct domain ID is available in your Consentify dashboard. Copy it from there to ensure accuracy.

Copy your unique script tag.
Paste it before your closing </body> tag:
```
<body>
   <script>...</script>
</body>
```
Add a button or link in your HTML (e.g., in the footer) with the required ID so users can manage their preferences:
```
<button id="revoke-consent-btn">
  Cookie Settings
</button>
```

Where to find your script tag

Your unique script tag with the correct domain ID is available in your Consentify dashboard. Copy it from there to ensure accuracy.

Copy your unique script tag.
Paste it before your closing </body> tag:
```
<body>
   <script>...</script>
</body>
```
Add a button or link in your HTML (e.g., in the footer) with the required ID so users can manage their preferences:
```
<button id="revoke-consent-btn">
  Cookie Settings
</button>
```

Installation complete!

Once you've added the script, the banner will appear on your website immediately. You can customize its appearance and behavior in your dashboard.

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.

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.

Required for compliance

One of these two options must be active on all pages where the banner runs. The floating icon requires no code changes on your site.

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.

No JavaScript required!

The Consentify script handles everything automatically. Just add the HTML element with the correct ID, and it will work immediately.

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.

View Integrations

Embed Integrations

Some integrations work differently from regular script injections. Instead of just adding a script tag, they require a placeholder element in your page HTML that Consentify controls. YouTube and Calendly both work this way.

YouTube

YouTube iframes set tracking cookies the moment they load, before the user has a chance to consent. Consentify replaces each YouTube div with a blocked placeholder until the visitor accepts marketing cookies, then swaps in the real iframe.

Step 1: Enable YouTube in your dashboard

Go to Integrations in your Consentify dashboard, find YouTube under Marketing, and paste your video's embed URL. You can copy this from YouTube's Share menu by choosing Embed and copying the src URL.

Step 2: Add the div to your page

Your dashboard will generate a snippet once you've entered a video URL. Copy it and place it wherever you want the video to appear.

Example snippet:

<div data-consentify-youtube="4OYBJi8b5U0" style="width:100%;aspect-ratio:16/9;"></div>

How it works

When the page loads without marketing consent, Consentify replaces the div with a blurred thumbnail and a blocked overlay. Once the visitor accepts marketing cookies, the page reloads and the real iframe is injected in its place.

Multiple videos on the same page

Add one div per video, each with its own video ID. Consentify handles all of them independently.

<div data-consentify-youtube="4OYBJi8b5U0" style="width:100%;aspect-ratio:16/9;"></div>
<div data-consentify-youtube="dQw4w9WgXcQ" style="width:100%;aspect-ratio:16/9;"></div>

Styling

Inline styles on the div carry through to both the placeholder and the final iframe. CSS classes also work. The default snippet uses width: 100% and aspect-ratio: 16/9, which works for most layouts.

Calendly

Calendly's booking widget sets functional cookies when it loads. Consentify holds back the widget script until the visitor accepts functional cookies, then injects it so the widget populates normally.

Step 1: Enable Calendly in your dashboard

Go to Integrations, find Calendly under Functional, and enter your Calendly link. The link should look like https://calendly.com/your-name.

Step 2: Add the widget div to your page

Your dashboard generates a ready-to-use snippet with your Calendly URL pre-filled. Place it on any page where you want the booking widget to appear.

<div class="calendly-inline-widget"
     data-url="https://calendly.com/your-name"
     style="min-width:320px;height:630px;">
</div>

Before and after consent

Before consent, the div sits empty. Once the visitor accepts functional cookies, Consentify injects the Calendly script and the widget loads into the div automatically.

Do not add Calendly's script tag yourself

Consentify injects it after consent. If you add the script tag manually as well, the widget will load without waiting for consent.

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:

Add this to your privacy page:

<!-- 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>

Both work anywhere on your site. A dedicated cookie page is not required, a section on your existing privacy policy page is enough. The legacy ID consentify-privacy-policy still renders the declaration.

Real-time Updates

The policy is generated on the fly. If you add a new integration in your dashboard, it will appear in the table on your website instantly-no code changes required.

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();
}

This is useful if you have code outside of a Consentify integration that should only run after analytics consent is given for example, a custom event tracker or an A/B testing tool.

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
}

This pattern is useful for conditional server-side rendering, skipping analytics API calls in your backend, or adjusting responses based on user consent without requiring a client-side round-trip.

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:

Strictly necessary no consent required

Cookies and storage that are technically required for the site to function, or that store a preference the user explicitly set. Examples: session tokens, authentication cookies (e.g. Supabase), CSRF tokens, language preference (NEXT_LOCALE), shopping cart state.

Analytics requires consent

Cookies used to measure how your site is used. Examples: Google Analytics (_ga, _gid), PostHog, Microsoft Clarity, Mixpanel. These must be blocked until the user accepts the analytics category.

Marketing requires consent

Cookies used for ad targeting, retargeting, or cross-site tracking. Examples: Facebook Pixel (_fbp), TikTok Pixel, LinkedIn Insight, Google Ads. These must be blocked until the user accepts the marketing category.

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.

Setup & Installation