Free cookie banner generator

Build a cookie banner, preview the choices, and download the JavaScript for your website.

Add it to your website

Host the downloaded file on your website. You do not need a DataDad account.

1. Load the banner first

Upload cookie-banner.js to your website. Add this tag to each page's <head>, before tracking code. Do not add async or defer.

<script src="/cookie-banner.js"></script>

2. Mark optional scripts

Change each optional script to type="text/plain". Add its category and move its source to data-src.

<script type="text/plain"
  data-cookie-consent="analytics"
  data-src="/your-analytics.js"></script>

Set the category to analytics, advertising, or functionality. Keep the script's existing settings, such as data-site. For inline scripts, omit data-src. Mark both the loader and its setup script.

3. Check your website

Open your site in a private window. Reject optional cookies and check that marked scripts stay blocked. Then test each category and reload the page. Use Cookie settings to change a saved choice.

Install and connect your analytics

Install the banner

Upload the downloaded file to your website. Load it before your analytics scripts so it can set their initial consent state. Replace the example IDs in each provider’s installation snippet.

<!-- Put this before Google, Clarity, or DataDad scripts in <head>. -->
<script src="/cookie-banner.js"></script>

Google tag: Consent Mode v2

Enable the Google option above. The banner sends default and update decisions automatically for Google Analytics and Google Ads. It maps advertising consent to ad storage, ad user data, and ad personalization. Load gtag after the banner. This uses advanced consent mode: denied storage can still send cookieless measurements. To block all requests, load the tag through an analytics-gated script instead.

gtag('consent', 'update', {
  analytics_storage: 'granted',
  ad_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied'
});

DataDad analytics

Enable DataDad above and install the tracking snippet from your project setup. The banner applies saved decisions when the script starts and sends later changes. This API controls persistent analytics identity. Denied returns to cookieless collection. To stop all collection before consent, gate the script as shown below.

datadad.consent({analytics_storage: 'granted'});
// On withdrawal:
datadad.consent({analytics_storage: 'denied'});

DataFast: load only after analytics consent

Use this instead of the normal DataFast script tag. Keep your real website ID and domain. The banner starts the script only after analytics consent. This integration blocks script loading; it does not assume an undocumented DataFast consent API.

<script type="text/plain" data-cookie-consent="analytics"
  data-src="https://datafa.st/js/script.js"
  data-website-id="dfid_YOUR_WEBSITE_ID"
  data-domain="yourdomain.com"></script>

Microsoft Clarity: Consent V2

Enable Clarity above. The banner queues its default decision before Clarity loads and sends changes automatically. Install the Clarity snippet after the banner and configure your Clarity project to require cookie consent. The capital S in each Storage key is required.

clarity('consentv2', {
  analytics_Storage: 'granted',
  ad_Storage: 'denied'
});

Other scripts and custom integrations

Use analytics, advertising, or functionality as the category. Read the current decision when a provider loads, then listen for later changes. Withdrawal sends denied decisions and reloads the page to stop gated scripts. The banner does not delete third-party cookies itself; use each provider’s deletion controls if needed.

<script type="text/plain" data-cookie-consent="analytics"
  data-src="/your-analytics-script.js"></script>
<script>
  window.addEventListener('datadad:consent', function(event) {
    const choices = event.detail;
    // Map choices.analytics and choices.advertising to your provider API.
  });
  const current = window.DataDadConsent.get();
</script>

Put the result to work

Read about DataDad privacy and consent, then follow the web analytics setup.