​
Step 1: Sign Up

  • Create an Account: Sign up at CookieChimp.com.
  • Configure: Access your dashboard to set up your cookie consent preferences.

​
Step 2: Integration

Choose the integration method suitable for your platform:

​
HTML

Add your website’s CookieChimp JS snippet in the <head> tag of your HTML:

<script src="https://cookiechimp.com/widget/abc123.js"></script>

You need to replace abc123 with your website’s unique CookieChimp ID.

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 = "http://localhost:3000/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>

​
WordPress

Install the CookieChimp plugin from the WordPress plugin and configure it in your dashboard.

​
Shopify

Add the CookieChimp Shopify app and set it up in your Shopify admin.

​
Step 3: Customization and Testing

  • Customize the appearance and settings of the cookie consent widget from your CookieChimp dashboard.

  • Test to ensure it functions correctly on your site.

  • CookieChimp will automatically start scanning for cookies on your website. You can view these in your CookieChimp dashboard and organize them.

    If you have CookieChimp AI copilot enabled, CookieChimp will automatically fill in the missing information & categorize these cookies for you.

​
Step 4: 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.

​
Step 5: Allow users to update their preferences

​
5a. Privacy Trigger (Floating Privacy Icon)

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 specify location where the Privacy Trigger 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>

​
5b. Manually Open Preferences Modal

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>

​
Troubleshooting

  • 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.

​
Need Help?

If you encounter any issues or require further assistance, please reach out to us at [email protected].

OverviewAI Copilot