How to add a cookie consent banner to a SvelteKit app

Where does the snippet go in SvelteKit?

SvelteKit's page template is src/app.html. The %sveltekit.head% placeholder is replaced with the <link> and <script> elements the app needs, plus any <svelte:head> content. Put the snippet above it, so it is in the HTML of every route before SvelteKit's scripts:

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

To keep the key out of the file, write data-site="%sveltekit.env.PUBLIC_COOKIEQUIET_SITE%". SvelteKit replaces the placeholder at render time with a public environment variable, and with an empty string if it is missing. With a nonce-based Content Security Policy, add nonce="%sveltekit.nonce%" to the tag, and allow https://cookiequiet.com in script-src and connect-src.

Do not load the snippet with <svelte:head> in a layout. That content is placed by the app among its own head elements, while app.html is the one template that puts the script before everything else on every route.

How do I block my tags until consent?

Marked tags in app.html. Paste them under the snippet and change their opening tag. Cookiequiet runs them when the category is granted, and at once on later visits where the stored choice includes it:

html
<script type="text/plain" data-cq-category="analytics" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script type="text/plain" data-cq-category="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

The Meta Pixel base code takes data-cq-category="marketing", without its noscript image; the Meta Pixel guide explains why. To keep the Google tag under Consent Mode instead, see the Google Analytics 4 guide.

Scripts created by JavaScript. Tag managers and widgets that inject trackers at runtime are held by the auto-blocker (switched on by data-auto-block="1") when the tracker is one of the about 80 it knows, until the category is granted.

How do components know the visitor's choice?

Cookiequiet dispatches a cq:consent event on window each time it applies a choice: a stored one when the page loads, a new one after a click, and every category at once in regions where geo-targeting does not show the banner. event.detail.categories lists the granted categories. A store wraps it:

js
// src/lib/consent.js
import { readable } from "svelte/store";
import { browser } from "$app/environment";
​
export const consent = readable([], (set) => {
  if (!browser) return;
  const stored = window.Cookiequiet && window.Cookiequiet.get();
  if (stored) set(stored.c);
  const onConsent = (e) => set(e.detail.categories);
  window.addEventListener("cq:consent", onConsent);
  return () => window.removeEventListener("cq:consent", onConsent);
});

In a component, render the embed only when the category is in the list:

svelte
<script>
  import { consent } from "$lib/consent";
</script>
​
{#if $consent.includes("marketing")}
  <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="Video"></iframe>
{:else}
  <button onclick={() => window.Cookiequiet.showPreferences()}>Allow videos</button>
{/if}

What about client-side navigation?

SvelteKit navigates without full reloads after the first page. The snippet runs once per full load, the choice stays applied and the banner does not reappear. Marked scripts are activated on load and after each choice, so keep them in app.html, not in route components. If your analytics needs a page view per route, afterNavigate from $app/navigation, called in the root +layout.svelte, runs on mount and after every navigation: read get(consent) there (get comes from svelte/store) and send the page view only when it includes analytics.

How do I add the Cookie preferences link?

html
<a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>

Cookiequiet listens for clicks on this link anywhere on the page and opens the preferences centre.

How do I test it?

1. Run vite dev or build and preview, and open the app in a private window.
2. View the page source: the Cookiequiet script comes before SvelteKit's scripts.
3. Click Reject all. The cookies are cq_consent and your session cookies, nothing from Google or Meta.
4. Clear the cookies, click Accept all, reload, navigate between routes: the tags run and the choice holds.
5. Check the consent log in the dashboard.

Prerendered pages and adapters (adapter-static, adapter-node, adapter-vercel) all use the same template, so nothing changes per adapter. Cookiequiet is free for one website with geo-targeting included; Starter costs €3 per website per month, with unlimited pageviews on every plan.