Developer reference

Install and integrate CookieFence

Tag installation, browser functions, consent controls, and the supported CSS customization surface.

Installation

Add the tag to every public page

Replace YOUR_TAG_UUID with the value shown in CookieFence. Load the tag before analytics, advertising, tag managers, and other scripts that may require consent.

HTML

<link rel="preconnect" href="https://api.cookiefence.com" crossorigin>
<script
  id="CookieFence"
  src="https://api.cookiefence.com/tags/YOUR_TAG_UUID.js"
></script>

Place the preconnect and script as high in <head> as your platform allows.
Keep the script id set to CookieFence.
Install the tag once, using the same Tag UUID on every page of the website.
Deploy the tag before rescanning the production website.

Next.js App Router

Add the script to the root layout with beforeInteractive so it initializes before later application scripts.

app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script
        id="CookieFence"
        src="https://api.cookiefence.com/tags/YOUR_TAG_UUID.js"
        strategy="beforeInteractive"
      />
    </html>
  );
}

WordPress

Install with the WordPress plugin

The plugin adds the preconnect and website tag through wp_head. It only requires the Tag UUID.

01Download the installable CookieFence plugin ZIP.
02Open Plugins → Add Plugin → Upload Plugin in WordPress.
03Activate CookieFence and open Settings → CookieFence.
04Paste the Tag UUID and save.

Download plugin ZIP

Override the tag host in local or staging environments with COOKIEFENCE_TAG_BASE_URL.

JavaScript API

Functions exposed by the tag

The API is assigned to window.CookieFence when the tag loads. Use optional chaining when application code may run before the tag is available.

JavaScript

// Open the consent banner.
window.CookieFence?.openConsentBanner();

// Re-render the declaration after inserting its placeholder dynamically.
window.CookieFence?.renderCookieDeclaration();

Function	Behavior
`openConsentBanner()`	Opens the consent interface. It does nothing if an instance is already mounted.
`renderCookieDeclaration()`	Renders or refreshes the declaration in the configured placeholder. Call it after inserting that placeholder dynamically.

Connect your own settings control

Call the API from any button or link in your application.

JavaScript

document
  .querySelector("[data-cookie-settings]")
  ?.addEventListener("click", () => {
    window.CookieFence?.openConsentBanner();
  });

HTML-only trigger

Replace TAG_PREFIX with the characters before the first hyphen in the Tag UUID. CookieFence intercepts clicks on this URL hash.

HTML

<a href="#CookieFenceConsent-TAG_PREFIX">
  Cookie settings
</a>

Cookie declaration

Render the current cookie inventory

Add the placeholder to a privacy or cookie policy page. The installed tag fills it with the classified inventory and a control for changing consent.

HTML

<div id="CookieFenceDeclaration-TAG_PREFIX"></div>

Use the same Tag UUID prefix as the HTML-only consent trigger. If a client-side router inserts this element after initial page load, call renderCookieDeclaration().

Customization

Banner settings and declaration CSS

Banner appearance is configured through structured settings. The generated cookie declaration also accepts custom CSS.

Consent banner

In Website → Banner, configure:

Placement: corners, center, or full-width bottom
Maximum content width for the full-width layout
Inherited, system, or custom font stack
Accept, reject, and preferences button colors
Privacy policy link and per-language URL overrides
Live preview before saving

CookieFence does not currently expose arbitrary custom CSS for the consent banner. Use the banner settings to keep saved configuration and the preview consistent.

Cookie declaration CSS

Add CSS under Website → Cookie declaration → Custom CSS. Selectors are automatically scoped to this website's declaration placeholder and appended after the default declaration styles.

CSS

.cf-declaration {
  color: #111827;
  font-family: Inter, sans-serif;
}

.cf-declaration-title {
  font-size: 1.75rem;
}

.cf-declaration-table th,
.cf-declaration-table td {
  padding: 10px 12px;
}

.cf-declaration-button {
  border-color: #0f172a;
  background: #0f172a;
  color: #ffffff;
}

@media (max-width: 600px) {
  .cf-declaration-button {
    width: 100%;
  }
}

Available selectors

.cf-declaration
.cf-declaration-header
.cf-declaration-title
.cf-declaration-meta
.cf-consent-summary
.cf-consent-summary-title
.cf-consent-summary-list
.cf-consent-summary-line
.cf-declaration-section
.cf-declaration-section-title
.cf-declaration-text
.cf-declaration-table-wrap
.cf-declaration-table
.cf-declaration-button

CSS rules

Maximum length: 12,000 characters.
Supported at-rules: @media, @supports, and @container.
url() and expression() are rejected.
Write local selectors; do not include the generated placeholder ID.

Verification

Check the integration before release

Open a private window and confirm the banner appears on the first visit.
Confirm optional analytics and marketing requests follow the configured consent mode.
Test accept, reject, and custom preferences across a page reload.
Use your settings control to reopen the banner.
Confirm the declaration renders and its custom CSS is applied.
Check the browser console for CookieFence integration errors.