Documentation, Installation, Configuration, Integrations

Q: Is the SDK loaded from a CDN, or should I host it on my own server?

Short answer: The SDK is served quickly via CDN and updates automatically. Self-hosting is not offered.

Q: Does the SDK work with Shadow DOM?

Short answer: Yes. Both the Cookie SDK and the Accessibility SDK use a Shadow DOM architecture, so there is no conflict with your site CSS; it loads async and does not block the first paint.

Q: Is there an npm package?

Short answer: The @cerezsuite/consent v0.1.0-beta package is ready, npm publish in Q3 2026. For now, use the Script tag guide for React/Next.js.

Q: How is the cache duration configured?

Short answer: The banner configuration is cached on the server for 5 minutes. On the browser side, sessionStorage is used. To clear the cache, go to Admin panel > Site Settings > Clear Cache.

Q: Can I use a single embed for multiple domains?

Short answer: No. A separate API key is issued for each domain. You can manage multiple domains under a single plan, but each domain must use its own embed code.

Q: Does the SDK write any cookies?

Short answer: It writes only a single functional cookie: cb_consent (which stores the consent decision). Because this cookie is in the functional category, it does not require user consent.

Q: Is it compatible with server-side rendering (SSR)?

Short answer: Yes. The SDK runs browser-only and does not affect rendering during Next.js/Nuxt SSR. We recommend using Script strategy='afterInteractive'.

Q: Is any configuration required for CSP (Content Security Policy)?

Short answer: It is enough to add https://cerez.io to your script-src directive. The SDK uses no inline scripts; it works with a nonce-free CSP.

QUICK START

A Working Banner in 3 Steps

Follow the steps below. You can have a live banner on your site within 5 minutes.

Create an Account

14-day free Pro trial. No credit card required; you are ready in seconds with just your email address.

Add a Domain

Enter your domain URL on the Admin Panel > Domains screen. An API key and secret key are generated automatically.

Paste the Code

Add the single-line embed code to your site's <head> tag. The banner and widget load automatically.

EMBED CODE

One Line, Two Products

Add the code below right before your site's <head> tag closes. Get the data-cerez-key value from the Admin Panel > Installation page.

<!-- cerez.io Cookie Consent + Accessibility -->
<script src="https://cerez.io/sdk/consent.js"
        data-cerez-key="YOUR_API_KEY"
        async></script>

Important The async attribute is mandatory; otherwise the SDK may delay the page's first paint. The configuration is cached server-side for 5 minutes; the SDK reflects your changes on the next load.

PLATFORMS

Ready-Made Guides for 6 Platforms

A detailed step-by-step installation guide is available for every platform.

HTML / Static Site

Add the script to the <head> tag. Setup takes 30 seconds.

<head>
  <!-- mevcut etiketler -->
  <script src="https://cerez.io/sdk/consent.js"
          data-cerez-key="YOUR_KEY" async></script>
</head>

WordPress

Download the WP Plugin ZIP, install the plugin, enter the API key.

# Seçenek A: Plugin ile (önerilen)
Admin Panel > Eklentiler > Yeni Ekle
ZIP yükle > Etkinleştir > API Key gir

# Seçenek B: Manuel (functions.php)
add_action('wp_head', function() {
  echo '<script src="https://cerez.io/sdk/consent.js"
  data-cerez-key="YOUR_KEY" async></script>';
});

Shopify

Add it inside theme.liquid or use a Custom Code Injector.

<!-- theme.liquid içinde, </head> öncesine -->
<script
  src="https://cerez.io/sdk/consent.js"
  data-cerez-key="YOUR_KEY"
  async></script>

Next.js / React

Use <Script strategy="afterInteractive"> inside _app.tsx.

// pages/_app.tsx
import Script from 'next/script'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Script
        src="https://cerez.io/sdk/consent.js"
        data-cerez-key="YOUR_KEY"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  )
}

Google Tag Manager

Create a Custom HTML tag and publish it with an All Pages trigger.

<!-- GTM > Tags > New > Custom HTML -->
<script
  src="https://cerez.io/sdk/consent.js"
  data-cerez-key="YOUR_KEY"
  async></script>

<!-- Trigger: All Pages / Consent Initialization -->

Webflow

Paste it into Site Settings > Custom Code > Head Code.

<!-- Site Settings > Custom Code > Head Code -->
<script
  src="https://cerez.io/sdk/consent.js"
  data-cerez-key="YOUR_KEY"
  async></script>

JAVASCRIPT API

Programmatic Control: 5 Core Methods

You can open the banner from your own UI, check consent and listen to events. All methods live under the window.cerez.io namespace.

CerezBanner.show()

Shows the banner manually. It can be called from custom triggers such as a "Manage My Cookie Preferences" button.

// Footer'daki "Çerez Tercihlerim" linkine event listener
document.querySelector('#cookie-prefs').addEventListener('click', () => {
    CerezBanner.show();
});

CerezBanner.getConsent()

Returns the user's current consent state. If no decision has been made yet, it returns null.

const consent = CerezBanner.getConsent();
// Örnek dönüş:
// { necessary: true, analytics: true, marketing: false, functional: true, timestamp: 1717000000 }

if (consent?.analytics) {
    // Google Analytics'i yükle
}

CerezBanner.on(event, callback)

Listen to consent changes. Supported events: consent.given, consent.updated, consent.rejected, banner.shown.

CerezBanner.on('consent.given', (data) => {
    console.log('Onay verildi:', data.categories);

    if (data.categories.marketing) {
        // Facebook Pixel başlat
        fbq('init', 'YOUR_PIXEL_ID');
    }
});

CerezBanner.reset()

Clears the current consent and shows the banner again. Suitable for functions such as "Reset My Preferences".

CerezBanner.reset(); // cb_consent cookie silinir, banner yeniden açılır

CerezBanner.hide()

Hides the banner programmatically. No consent is recorded; only the visibility changes.

CerezBanner.hide(); // Banner DOM'dan kaldırılmaz, gizlenir

SCRIPT BLOCKING

Block 3rd-Party Scripts Before Consent

Scripts such as GA4, Facebook Pixel and Hotjar must not run until consent is granted (a KVKK/GDPR requirement). Automatic blocking is achieved with the type="text/plain" and data-cb-category attributes.

Non-compliant (the script runs immediately)

<!-- YANLIŞ: script anında yüklenir -->
<script
  src="https://www.googletagmanager.com/gtag/js?id=G-XXX"
></script>

Compliant (runs after consent)

<!-- DOĞRU: sadece onay sonrası yüklenir -->
<script
  type="text/plain"
  data-cb-src="https://www.googletagmanager.com/gtag/js?id=G-XXX"
  data-cb-category="analytics"
></script>

Inline Script Blocking

<!-- Inline script için: type="text/plain" + data-cb-category -->
<script type="text/plain" data-cb-category="marketing">
    fbq('init', 'PIXEL_ID');
    fbq('track', 'PageView');
</script>

Supported Categories necessary (cannot be blocked), analytics, marketing, functional

GOOGLE CONSENT MODE V2

Automatic Integration, a Single Toggle

Turn on the "Consent Mode v2" toggle under Admin Panel > Site Settings > Google Integration. The SDK automatically manages gtag('consent', 'default', {...}) and the update signals.

The SDK Does This Automatically

// Sayfa yüklenir yüklenmez, kullanıcı henüz karar vermedi
gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied',
    'functionality_storage': 'denied',
    'personalization_storage': 'denied',
    'security_storage': 'granted'
});

// Kullanıcı onay verdikten sonra, analytics + marketing kabul edildi
gtag('consent', 'update', {
    'ad_storage': 'granted',
    'analytics_storage': 'granted'
});

For a detailed GCM v2 guide, see the Google Consent Mode v2 page.

ADVANCED SETTINGS

Customization and Configuration

You can customize the SDK's behavior by adding extra attributes to the embed code.

Preview Mode

By adding ?cb_preview=true to the URL, you can bypass the existing consent and show the banner every time. Ideal for testing and development.

Language Preference

Under Admin Panel > Site Settings > Banner Language, you can select a fixed language or set automatic switching (auto) based on the visitor's browser language. TR / EN / DE are supported.

CSP Compatibility

It is enough to add https://cerez.io to your script-src directive. The SDK uses no inline scripts; it does not require a nonce.

sessionStorage Cache

After loading, the SDK stores the banner configuration in sessionStorage. No further server call is made within the same session; page load time is reduced.

Consent Duration

Set the validity period of the cb_consent cookie under Admin Panel > Site Settings > Consent Duration (default 180 days). The recommended period for KVKK compliance is 6 months.

IP Restriction

Restrict API access by opening the IP Restriction toggle under Admin Panel > Installation and entering the allowed IP addresses (CIDR notation supported).

FREQUENTLY ASKED QUESTIONS

Technical Questions

Is the SDK loaded from a CDN, or should I host it on my own server?

Short answer: The SDK is served quickly via CDN and updates automatically. Self-hosting is not offered; this way, new features and security updates reach all customers automatically.

Does the SDK work with Shadow DOM?

Is there an npm package?

Short answer: The @cerezsuite/consent v0.1.0-beta package is ready. The npm registry publish target is Q3 2026. For now, the <Script strategy="afterInteractive"> guide is recommended (see the Next.js section on this page).

How is the cache duration configured?

Can I use a single embed for multiple domains?

Does the SDK write any cookies?

Short answer: It writes only a single functional cookie: cb_consent (which stores the consent decision, default 180 days). Because this cookie is in the functional category, it does not require user consent under KVKK/GDPR.

Is it compatible with server-side rendering (SSR)?

Short answer: Yes. The SDK runs browser-only; it does not affect rendering during the Next.js/Nuxt SSR process. We recommend using <Script strategy="afterInteractive">. No hydration mismatch occurs.

Is any special configuration required for CSP (Content Security Policy)?

Short answer: It is enough to add https://cerez.io to your script-src directive. The SDK uses no inline scripts; it works with a nonce-free CSP.

Install in 5 minutes, customize without limits