Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.cookiechimp.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

If your site is plain HTML — a static landing page, a hand-written multi-page site, or anything served as .html files — you can install CookieChimp by adding a single <script> tag to your <head>. This guide also doubles as a reference for understanding what every other platform guide ultimately does under the hood.
1

Copy your CookieChimp snippet

Log in to your CookieChimp dashboard and copy your website's JS snippet:
<script src="https://cookiechimp.com/widget/abc123.js"></script>
Replace abc123 with your website's unique CookieChimp ID.
2

Add the snippet to every HTML page

Paste the snippet inside the <head> of every HTML page on your site, as the very first script.Here’s a complete minimal HTML document with CookieChimp installed correctly:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>

    <!-- CookieChimp must be the first script in <head> -->
    <script src="https://cookiechimp.com/widget/abc123.js"></script>

    <!-- Your other scripts go after CookieChimp -->
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <h1>Welcome to my website</h1>
    <!-- Page content -->
  </body>
</html>
Replace abc123 with your website’s unique CookieChimp ID.
The CookieChimp script needs to be the first script in the <head> section so it can block other scripts before they run and set cookies without consent. If other scripts are added before, they may set cookies and other storage items before consent is granted.
If you have many HTML pages, consider using a shared header include (via your static site generator, a server-side include, or a small build step) so you only have to update the snippet in one place.
3

Block scripts & cookies

To stay compliant with GDPR and other privacy regulations, you need to actively block non-essential scripts and cookies until the user gives consent. See our Scripts Management Section for full details.The pattern is to change any third-party <script> tag from a regular script into a “blocked” script that CookieChimp will only activate once the user consents to the matching category.Before — a Google Analytics tag that runs unconditionally:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>
After — the same tags blocked until the user accepts the analytics category:
<script
  type="text/plain"
  data-category="analytics"
  async
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"
></script>
<script type="text/plain" data-category="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>
Setting type="text/plain" stops the browser from executing the script. CookieChimp scans the page on load, watches for consent, and rewrites the type back to text/javascript on tags whose data-category the user has accepted.See the Scripts Management page for the full attribute reference, including how to block iframes, images, and inline event handlers.
4

Allow users to update their preferences

CookieChimp provides a floating privacy icon (Privacy Trigger) that lets users manage cookie preferences at any time. Enable it in the banner settings.To open the preferences modal from a custom button or link, add the data attribute data-cc="show-preferencesModal":
<button type="button" data-cc="show-preferencesModal">
  Manage cookie preferences
</button>
A full example with a footer link that opens the preferences modal:
<footer>
  <nav>
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
    <button type="button" data-cc="show-preferencesModal">
      Manage cookie preferences
    </button>
  </nav>
</footer>

​
How does the script work?

When the browser loads https://cookiechimp.com/widget/abc123.js, CookieChimp:
  1. Reads your configuration (categories, services, banner copy and design) from your account.
  2. Scans the DOM for any <script type="text/plain" data-category="..."> tags and keeps them blocked.
  3. Shows the consent banner if the user hasn’t made a choice yet — or silently applies their stored consent if they have.
  4. When the user accepts a category, rewrites the matching blocked tags so the browser executes them.
Because everything is driven by attributes on existing HTML, there’s no JavaScript API you have to call from your pages — the script does the work as long as it’s the first one in <head>. If you have custom code that should only run after the user has consented to a specific category, listen for the cc:onConsented event: 
<script>
  window.addEventListener("cc:onConsented", function () {
    if (CookieChimp.acceptedCategory("analytics")) {
      // Initialize your own analytics code here.
    }

    if (CookieChimp.acceptedService("Google Analytics", "analytics")) {
      // "Google Analytics" service was accepted.
    }
  });
</script>
To react when the user changes their preferences later, listen for cc:onUpdate: 
<script>
  window.addEventListener("cc:onUpdate", function (event) {
    if (event.detail.changedCategories.includes("analytics")) {
      if (CookieChimp.acceptedCategory("analytics")) {
        // Analytics was just enabled.
      } else {
        // Analytics was just disabled — tear down your analytics here.
      }
    }
  });
</script>
For all available events, see Callbacks & Events.

​
Troubleshooting

  • Make sure your domain is allowed in the Account Settings in your CookieChimp dashboard. Local file URLs (file://) and localhost need to be explicitly added if you want to test before deploying.
  • The script must be the first script in <head>. If you see other scripts setting cookies before consent is granted, they were added above the CookieChimp tag.
  • Make sure you updated every HTML page on your site — pages without the snippet won’t show the banner.
  • 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.