Skip to main content
Most banner customization should happen in the CookieChimp dashboard. You can create multiple banners targeting different geolocation rules — country, US state, or other region — each with its own categories, translations, and consent mode (opt-in or opt-out). If you need a different legal text in California, a separate banner for visitors from Germany, or a translated version for visitors from Japan, that’s all configured without writing code. This page covers the cases that go beyond dashboard configuration: programmatic overrides where you reach into window.CookieChimp (or its CSS variables) from your own JavaScript or CSS to tweak the banner that’s already been served. Common reasons to do this include:
  • Hiding or showing a UI element on the banner for visitors from one country only.
  • Tagging your own analytics or CRM events with the consent mode that was applied, for internal reporting.
  • Giving the banner different branding on each of your domains while sharing a single CookieChimp account.
Geo-targeted customization is the most common reason to drop down to code, but the same pattern works for any condition you can read from window.CookieChimp or the current page.

​
What properties are available?

These are the most commonly used properties in the recipes below. For the complete client-side reference — every property, event, and method — see the JavaScript SDK.

​
CookieChimp.visitorCountry

The ISO 3166-1 alpha-2 country code of the visitor (e.g. "US", "GB", "CN", "DE"). 
CookieChimp.visitorCountry; // 'US'

​
CookieChimp.visitorRegion

The region/subdivision code of the visitor (e.g. "NY" for New York, "CA" for California). Useful when compliance rules differ by region within a country — for example, US state privacy laws. 
CookieChimp.visitorRegion; // 'NY'

​
CookieChimp.visitorNeedsConsent

true if a consent banner was shown to the visitor (either an opt-in or opt-out banner), false if the visitor's location does not require one. 
CookieChimp.visitorNeedsConsent; // true

​
CookieChimp.getConfig()['mode']

Returns the consent mode that was applied to the visitor based on your geolocation rules:
  • "opt-in" — the visitor was shown an opt-in banner (e.g. EU/EEA visitors under GDPR).
  • "opt-out" — the visitor was shown an opt-out banner (e.g. US visitors under CCPA-style regulations).
CookieChimp.getConfig().mode; // 'opt-in'
These properties are populated once the CookieChimp script has initialised. If you read them before initialisation — for example, at the very top of the page — they may be undefined. Read them inside a callback or event handler such as cc:onModalReady, cc:onConsented, or after a check for window.CookieChimp.

​
Example: hide the close button for one country

Some jurisdictions treat a close (×) button as an ambiguous signal — a visitor who dismisses the banner without an explicit accept or reject hasn’t made a clear consent choice, and regulators may not consider that a valid interaction. If your default banner shows a close button, the cleanest fix is to hide it — but only for visitors from those countries, so the easier dismissal flow is preserved elsewhere. You can keep a single banner and toggle the close button visibility with a small CSS rule that’s only applied when visitorCountry matches.

​
Option 1 — Inject a style tag

window.addEventListener("cc:onModalReady", function () {
  if (CookieChimp.visitorCountry === "CN") {
    const style = document.createElement("style");
    style.textContent = `#cc-main .cm__btn.cm__btn--close { display: none !important; }`;
    document.head.appendChild(style);
  }
});

​
Option 2 — Toggle a class on <html> and scope the CSS

window.addEventListener("cc:onModalReady", function () {
  if (CookieChimp.visitorCountry === "CN") {
    document.documentElement.classList.add("cc-cn");
  }
});

.cc-cn #cc-main .cm__btn.cm__btn--close {
  display: none !important;
}
We wrap the check in cc:onModalReady so CookieChimp.visitorCountry is guaranteed to be populated before we read it. See the JavaScript SDK for other events you can hook into.
CookieChimp already handles tag-firing correctly for both opt-in and opt-out banners out of the box — opt-out banners fire analytics natively without waiting for consent, and Google Consent Mode is wired up automatically. You don’t need to write code for that. What you may want to do is segment your own product analytics by consent mode so you can build internal dashboards — for example, comparing engagement between visitors who saw an opt-in banner vs. an opt-out banner, or tracking consent rates by country for compliance reporting. 
window.addEventListener("cc:onModalReady", function () {
  if (!window.analytics) return;

  window.analytics.identify({
    consent_mode: CookieChimp.getConfig().mode, // 'opt-in' or 'opt-out'
    visitor_country: CookieChimp.visitorCountry,
    visitor_region: CookieChimp.visitorRegion,
  });
});
Swap window.analytics.identify for whichever analytics or CDP SDK you use (Segment, Amplitude, Mixpanel, PostHog, etc.). Once these properties are attached to the visitor, every downstream event can be filtered or grouped by consent mode and region.

​
Example: per-domain branding when sharing one account

If you run multiple domains from a single CookieChimp account — for example, a brand and its regional subsidiaries — you can keep one set of categories, vendor lists, and consent records, while still giving each domain its own banner colours. The dashboard sets the global theme; a tiny CSS override on each domain swaps the variables that need to differ. Add the override directly in each site’s stylesheet (or inject it from your tag manager): 
/* brand-a.com */
#cc-main {
  --cc-btn-primary-bg: #ff5a5f;
  --cc-btn-primary-hover-bg: #e0484d;
  --cc-link-color: #ff5a5f;
}

/* brand-b.com */
#cc-main {
  --cc-btn-primary-bg: #2ec27e;
  --cc-btn-primary-hover-bg: #26a868;
  --cc-link-color: #2ec27e;
}
If you’d rather have the variables live in one shared stylesheet and branch at runtime — for example, when you serve the same JS bundle across all domains — switch on location.hostname: 
const themes = {
  "brand-a.com": { primary: "#ff5a5f", hover: "#e0484d" },
  "brand-b.com": { primary: "#2ec27e", hover: "#26a868" },
};

const theme = themes[location.hostname];
if (theme) {
  const style = document.createElement("style");
  style.textContent = `
    #cc-main {
      --cc-btn-primary-bg: ${theme.primary};
      --cc-btn-primary-hover-bg: ${theme.hover};
      --cc-link-color: ${theme.primary};
    }
  `;
  document.head.appendChild(style);
}
See Custom CSS for the full list of CSS variables you can override.

​
When should I override vs. configure another banner?

Configure a separate banner in the dashboard (via geolocation rules) when:
  • You want different banner text, design, or configuration for a region — each banner has its own copy, styling, and consent mode (opt-in or opt-out), with translations built in.
  • The applied consent mode needs to differ between regions — CookieChimp surfaces the applied mode via getConfig().mode.
Use a programmatic override (as shown above) when:
  • The banner content is the same across regions, but you need a small UI tweak, a per-domain colour change, or different tag-firing behaviour for one segment.
  • You want to keep a single source of truth for banner content and avoid maintaining duplicates just to flip one CSS rule or push one event.
  • Enable Debug mode from the CookieChimp dashboard and check the browser JS console for errors.
If you encounter any issues or need further assistance, please reach out to us via our chat.