Zest logo Zest

Getting Started

Install and set up Zest cookie consent on your website

Installation

The easiest way to add Zest to your website is via CDN:

<!-- unpkg (full bundle with all 12 languages) -->
<script src="https://unpkg.com/@freshjuice/zest"></script>

<!-- or jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/@freshjuice/zest"></script>

Single Language Bundle

For smaller bundle size (~9KB vs ~14KB), use a single-language build:

<!-- English only -->
<script src="https://unpkg.com/@freshjuice/zest/dist/zest.en.min.js"></script>

<!-- German only -->
<script src="https://unpkg.com/@freshjuice/zest/dist/zest.de.min.js"></script>

<!-- Available: en, de, es, fr, it, pt, nl, pl, uk, ru, ja, zh -->

npm

npm install @freshjuice/zest
import '@freshjuice/zest';

Basic Setup

Add the script before any tracking scripts you want to block:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>

  <!-- Zest configuration (optional) -->
  <script>
    window.ZestConfig = {
      policyUrl: '/privacy-policy'
    };
  </script>

  <!-- Load Zest BEFORE tracking scripts -->
  <script src="https://unpkg.com/@freshjuice/zest"></script>

  <!-- These will be auto-blocked until consent -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=GA-XXXXX"></script>
</head>
<body>
  <!-- Your content -->
</body>
</html>

How It Works

  1. On page load, Zest checks if the user has already made a consent decision
  2. If no decision, the consent banner is displayed
  3. Known tracking scripts are automatically blocked (in safe mode or higher)
  4. When user consents, blocked scripts are executed and cookie/storage operations are replayed
  5. A floating widget appears so users can change their preferences later

Configuration via Data Attributes

You can also configure Zest using data attributes on the script tag:

<script
  src="https://unpkg.com/@freshjuice/zest"
  data-position="bottom-right"
  data-theme="dark"
  data-accent-color="#ff6b35"
  data-policy-url="/privacy"
></script>

Zest uses four consent categories:

Category Default Description
Essential Always ON Required for website functionality (cannot be disabled)
Functional OFF Personalization features (language, theme preferences)
Analytics OFF Usage tracking (Google Analytics, Plausible, etc.)
Marketing OFF Advertising and remarketing (Facebook Pixel, Google Ads, etc.)

Next Steps