Skip to main content

Cookie Consent (GDPR Banners)

Deploy a GDPR-compliant cookie banner with per-category consent choices, and store a granular, per-user record of exactly what was accepted, and when.

Coming Soon

Screenshot: Cookie consent banner at the bottom of a webpage with category toggles for Analytics, Marketing, and Functional cookies

Before You Begin​

  • Know which cookie categories your site uses (e.g., Analytics, Marketing, Functional).
  • Review the Consent Management overview to understand how categories and user consent state work.
  1. Go to Click → Templates → New Template.
  2. Set the type to Consent — this is the only template type that supports per-category cookie preferences. Static and Generated types do not have category management.
  3. Name it (e.g., Cookie Consent, Global) and click Save.
Coming Soon

Screenshot: New Template dialog with "Consent" type selected

In the Categories tab, add a row for each cookie group. Each category requires:

  • Category Key — used in your code (e.g., analytics)
  • Category Name — shown to users (e.g., Analytics Cookies)
  • Description — briefly explain what these cookies do
KeyNameNotes
essentialEssential CookiesMark as Required — GDPR permits these without consent
analyticsAnalytics CookiesOptional — users can decline
marketingMarketing CookiesOptional — users can decline
functionalFunctional CookiesOptional — users can decline
tip

Marking essential as Required locks the toggle so users cannot disable it. This is the correct GDPR approach for strictly necessary cookies.

Step 3: Configure Appearance and Content​

  1. In Appearance, set your brand colors, font, and layout.
  2. In Content Settings, customize the banner headline, description, and button labels (e.g., "Accept All", "Manage Preferences", "Reject Non-Essential").
  3. In Deployment Config, choose your rendering mode — Popup for a non-blocking prompt, or Modal for a centered overlay that requires a response.
Coming Soon

Screenshot: Appearance settings panel with color pickers and a live banner preview

Coming Soon

Screenshot: Categories tab showing the filled-in category rows — Essential (Required), Analytics, Marketing, Functional — with their toggle states

Step 4: Publish and Deploy​

  1. Click Publish to move the template out of Draft.
  2. Go to Deployments → New Deployment.
  3. Enter your root domain (e.g., yourcompany.com) and set path to / so the banner appears on every page.
  4. Set environment to Staging, test, then switch to Production.
  5. Click Activate.
note

Only one active deployment is allowed per domain/path. Activating a new deployment on the same path automatically deactivates the previous one.

Coming Soon

Screenshot: Deployment screen with domain set to root path "/" and environment "Production"

const sdk = ProperClick.init({
  apiKey: 'your-api-key',
  environment: 'production',
  userId: 'user-123'
});

// Renders banner only for users who haven't consented yet
await sdk.renderByDomain('yourcompany.com', '/', {
  onAccept: async (response) => {
    // response confirms the acceptance was recorded — id, receiptId, timestamp, etc.
    // Per-category choices are stored server-side as ConsentChoice records.
    // Retrieve the user's current consent state from your backend to branch on categories:
    const consentState = await fetchUserConsentState(response.userId);

    if (consentState.categories.analytics) {
      loadAnalyticsScript();
    }
    if (consentState.categories.marketing) {
      loadMarketingScript();
    }
  }
});
note

The onAccept response confirms that acceptance was recorded — it carries fields like id, receiptId, and timestamp. Per-category consent choices (analytics, marketing, etc.) are stored server-side as ConsentChoice records. To branch on individual categories, retrieve the user's consent state from your backend using response.userId, or read the accepted categories from your local template configuration if you fetched the deployment config at render time.

The SDK automatically skips the banner for users whose consent is still valid. See the Events & Callbacks guide for the full response shape.

Click keeps two separate records per user:

  • Current consent state — a live snapshot of the user's category choices. Use this for real-time checks (e.g., "can I send this user a marketing email?").
  • Consent history — an append-only log of every change per category. Use this for compliance audits and demonstrating what the user agreed to on a specific date.

When a user updates their preferences, the current state is updated and a new history entry is added. Previous entries are never modified.

Consent Tracking → · User Preferences →

Updating Your Banner​

When you add a new category or change your cookie policy, do not edit the published template.

Coming Soon

The New Version workflow and Re-consent on Update feature — which automatically re-prompts all users on their next visit — are in development.

In the meantime, clone the template, make your changes, publish the new copy, and update your deployment.

Version Management →

Next Steps​

note

Cookie consent requirements vary by jurisdiction. This guide covers technical implementation — your legal team should review the specific disclosures required for your markets.