Skip to main content

​
Loading our JS code

If you are using a Single Page Application (SPA), you need to ensure to reinitialize the CookieChimp widget on page navigation. You can do this by including the CookieChimp script in the following way (example is for Astro JS): 
<script is:inline>
  function runCookieChimp() {
    var script = document.createElement("script");
    script.src = "https://cookiechimp.com/widget/K8ktWD.js";
    script.id = "cookiechimp-js";
    document.head.appendChild(script);
  }

  // for Astro JS.
  // listen for other events for different frameworks.
  document.addEventListener("astro:page-load", runCookieChimp);
</script>

​
Privacy Trigger Position

You can specify location where the Privacy Trigger (floating icon to update preferences) is added to the DOM by placing a div with the ID cookiechimp-container on the page. 
<div id="cookiechimp-container"></div>
This is useful for single page applications (SPA) where you want the floating icon to be persistent across different pages. Ensure to add this in a location which does not get replaced when navigating between pages. If you are using Turbo or Astro JS with View Transitions, you can add specific attributes to the div to ensure it persists across navigations. 
<!-- For Turbo -->
<div id="cookiechimp-container" data-turbo-permanent></div>

<!-- For Astro JS -->
<div id="cookiechimp-container" transition:persist></div>

​
Callbacks & Events

The cc:onConsented event can be used to execute code based on user consent. 
window.addEventListener("cc:onConsented", function (event) {
  if (CookieConsent.acceptedCategory("analytics")) {
    // "analytics" category enabled
  }

  if (CookieConsent.acceptedService("Google Analytics", "analytics")) {
    // "Google Analytics" service enabled
  }
});
The cc:onUpdate event can be used to execute code when the user changes their consent. 
window.addEventListener("cc:onUpdate", function (event) {
  var detail = event.detail;

  /**
   * detail.cookie
   * detail.changedCategories
   * detail.changedServices
   */

  if (detail.changedCategories.includes("analytics")) {
    if (CookieConsent.acceptedCategory("analytics")) {
      // "analytics" category was just enabled
    } else {
      // "analytics" category was just disabled
    }

    if (detail.changedServices["analytics"].includes("Google Analytics")) {
      if (CookieConsent.acceptedService("Google Analytics", "analytics")) {
        // "Google Analytics" service was just enabled
      } else {
        // "Google Analytics" service was just disabled
      }
    }
  }
});
View all available callbacks & events ›