CookieFast

Vanilla JavaScript Integration

Add CookieFast to your vanilla JavaScript or static HTML website in seconds.

Quick Start

Add the CookieFast script to your website's <head> section:

<!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>


  <!-- CookieFast Script -->
  <script
    async
    src="https://cdn.cookiefa.st/cookiefast.js"
    data-api-key="your-api-key-here"
  ></script>
</head>
<body>
  <!-- Your content here -->
</body>
</html>

Getting Your API Key

  1. Sign up at CookieFast Dashboard
  2. Create a new property for your website
  3. Copy the API key from your property settings
  4. Replace your-api-key-here with your actual API key

Advanced Integration

Using Environment Variables

For build tools like Webpack or Vite, you can use environment variables:

<script
  async
  src="https://cdn.cookiefa.st/cookiefast.js"
  data-api-key="<%= process.env.COOKIEFAST_API_KEY %>"
></script>

Programmatic Control

Listen to consent events:

// Listen for consent changes
window.addEventListener('cookiefast:consent', (event) => {
  const { analytics, marketing } = event.detail;


  if (analytics) {
    // Initialize Google Analytics
    initializeAnalytics();
  }


  if (marketing) {
    // Initialize Facebook Pixel
    initializeFacebookPixel();
  }
});


// Check current consent status
if (window.CookieFast) {
  const consent = window.CookieFast.getConsent();
  console.log('Current consent:', consent);
}


// Programmatically open the banner
function openCookieSettings() {
  if (window.CookieFast) {
    window.CookieFast.showBanner();
  }
}

Cookie Settings Link

Add a link anywhere on your site to let users change their preferences:

<!-- Automatic trigger -->
<button id="cookiefast-banner-trigger">
  Cookie Settings
</button>


<!-- Or programmatic trigger -->
<button onclick="window.CookieFast?.showBanner()">
  Manage Cookies
</button>

Multi-Page Websites

For sites with multiple HTML files, you have two options:

Option 1: Template/Include

If using a templating system or server-side includes:

<!-- header.html -->
<script
  async
  src="https://cdn.cookiefa.st/cookiefast.js"
  data-api-key="your-api-key-here"
></script>

Then include it in all pages:

<!-- index.html -->
<?php include 'header.html'; ?>


<!-- about.html -->
<?php include 'header.html'; ?>

Option 2: Add to Each Page

For static sites, add the script to each HTML file's <head> section.

Bundle with Your Scripts

If you're bundling JavaScript, you can dynamically inject the script:

// main.js
const script = document.createElement('script');
script.src = 'https://cdn.cookiefa.st/cookiefast.js';
script.async = true;
script.setAttribute('data-api-key', 'your-api-key-here');
document.head.appendChild(script);

Common Patterns

Initialize Scripts After Consent

window.addEventListener('cookiefast:consent', (event) => {
  const { analytics, marketing, essential } = event.detail;


  // Google Analytics (Analytics category)
  if (analytics) {
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
  }


  // Facebook Pixel (Marketing category)
  if (marketing) {
    !function(f,b,e,v,n,t,s) {
      // Facebook Pixel code
    }(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', 'YOUR_PIXEL_ID');
    fbq('track', 'PageView');
  }
});

Check Consent Before Tracking

function trackEvent(category, action, label) {
  // Only track if user has consented to analytics
  if (window.CookieFast?.getConsent()?.analytics) {
    // Send event to your analytics platform
    gtag('event', action, {
      event_category: category,
      event_label: label
    });
  }
}

Performance Tips

  1. Use async attribute: Never blocks page rendering
  2. Place in <head>: Loads early, shows banner quickly
  3. Minimize custom scripts: Keep analytics/marketing scripts lean
  4. Cache properly: CookieFast is served from CDN with aggressive caching

Troubleshooting

Banner Not Showing

  • Check browser console for errors
  • Verify API key is correct
  • Ensure you're not visiting from US (banner auto-accepts for US visitors)
  • Clear cookies and localStorage, then reload

Scripts Not Executing

  • Check that consent was granted
  • Verify script syntax in dashboard
  • Check browser console for JavaScript errors

Next Steps