Skip to main content
1

Add our JS code

Add your website’s CookieChimp JS snippet in the <head> tag of your HTML:
The CookieChimp script needs to be added at the top of the <head> section, so that it can run first, in order to ensure other scripts are only run based on consent. If other scripts are added before, they may set cookies and other storage items before consent is granted.
<script src="https://cookiechimp.com/widget/abc123.js"></script>
You need to replace abc123 with your website’s unique CookieChimp ID.
2

Block Scripts & Cookies

To ensure compliance with GDPR regulations, it’s crucial not only to display a consent banner but also to actively block all non-essential scripts and cookies until the user has given explicit consent. For comprehensive instructions on how to effectively manage and block scripts and cookies, please refer to our Scripts Management Section.
3

Allow users to update their preferences

CookieChimp provides a floating privacy icon (Privacy Trigger) that allows users to manage their cookie preferences at any time. You can enable this in the banner settings.Optionally, you can open the preferences modal with a custom link or button by adding a button with the data attribute data-cc="show-preferencesModal":
<button type="button" data-cc="show-preferencesModal">
  Manage cookie preferences
</button>

​
Are there platform-specific guides?

Yes — pick the guide that matches your stack for tailored instructions.

​
Plain HTML

HTML

Add the snippet to a static HTML site — also a useful reference for understanding how CookieChimp works under the hood.

​
JavaScript frameworks

Next.js

App Router and Pages Router with next/script.

React (Vite / CRA)

Plain React apps with React Router.

Remix

Server-rendered React with client navigation.

Nuxt

Vue framework with SSR and client routing.

Angular

Standalone or NgModule-based apps.

Astro

Static sites, with or without View Transitions.

SvelteKit

SvelteKit’s afterNavigate pattern.

JS & SPAs (catch-all)

Generic SPA setup if your framework isn’t above.

​
CMS, eCommerce & tag managers

WordPress

Official plugin with WP Consent API support.

Shopify

Add the snippet to theme.liquid.

Google Tag Manager

Direct HTML or via GTM’s Consent Initialization trigger.

​
Website builders

Webflow

Custom Code in Project Settings.

Framer

Site Settings → Custom Code → Head.

Squarespace

Header Code Injection.

Wix

Custom Code on Wix Premium plans.

Ghost

Site Header in Code Injection.

Carrd

Embed widget set to Head (Carrd Pro).

Duda

Site-Wide Code → Header.

Bubble

SEO/metatags → Script/meta tags in header.

Weebly

SEO → Header Code (paid plans).

Hostinger

Integrations → Custom code.

​
What if the banner doesn’t show?

  • Check if the domain is allowed in the Settings page on our platform.
  • If the widget doesn’t display, ensure there are no conflicts with other scripts or styles on your website.
  • Clear your browser cache and cookies, then reload the website.
  • Enable “Debug mode” from our platform and open JS console to check for any errors.

​
How do I get help?

If you encounter any issues or require further assistance, please reach out to us via our chat.