Banner with no framework for JavaScript

@cookieyes/vanilla puts the complete CookieYes banner on any page: the banner, the preferences and opt-out dialogs, the reload notice and the recall button. Use it on a site with no framework, or with a framework that has no CookieYes adapter yet, such as Vue, Svelte or Angular.

This is the open-source SDK, not the CookieYes platform script: you configure it in code, it needs no CookieYes account, and it never talks to CookieYes servers. If you manage your banner in the CookieYes app, use the script tag the app gives you instead.

1. Install

npm install @cookieyes/vanilla

This is the only package you install.

2. Start it

import { start } from "@cookieyes/vanilla";
import "@cookieyes/vanilla/styles.css";

export const cookieyes = start({
  mode: "cookie-only", // no backend needed
  regulation: "GDPR", // "GDPR" | "CCPA"
});

Import this file once, from your page's entry script. start takes the same configuration as initCookieYes in every other CookieYes package, so Configuration applies as written. It returns the consent runtime: read and react to consent with cookieyes.consentStore, as in Using the store.

The stylesheet import is required. Without it the banner renders as plain text, with no error to tell you why.

3. Check it is working

1. Open the page in a private window. The banner appears in the bottom-left corner.
2. Press Tab once: focus lands on the banner's Close button.
3. Click Customise: the preferences dialog opens. Press Escape: it closes and focus returns to Customise.
4. Click Accept All: the banner closes and the recall button appears in the bottom-left corner.

Commands

import { openPreferences } from "@cookieyes/vanilla";

document.querySelector("#cookie-settings")?.addEventListener("click", (event) => {
  event.preventDefault();
  openPreferences();
});

Show the banner before any script runs

The banner normally appears once your script has run. To have it on screen at first paint:

1. Inline the contents of @cookieyes/vanilla/critical.css in a <style> in <head>, and keep the styles.css import.
2. Put the output of renderShell(config) at the start of <body>, generated at build time or on your server, with the same configuration you pass to start.

import { renderShell } from "@cookieyes/vanilla";

const shell = renderShell({ mode: "cookie-only", regulation: "GDPR" });
// Write `shell` into your HTML template, right after <body>.

When start runs it takes that banner over in the same task: no flash, no second entry animation.

On a server, pass the request's cookies and a visitor who has already decided gets no banner in the HTML at all:

const shell = renderShell(config, { cookieHeader: request.headers.get("cookie") ?? "" });

A static page has no request to read, so a returning visitor sees the banner until start removes it. If you send a Content-Security-Policy, the inline <style> needs its hash in style-src; see CSP.

Good to know

• Styling, themes, part names and translations are the same as in every other CookieYes package. A stylesheet written for the React banner restyles this one unchanged. See Styling.
• The preferences and opt-out dialogs load the first time a visitor opens one, so a visitor who only sees the banner never downloads them.
• renderShell uses the configured regulation and the starting language of i18n: a page rendered ahead of time cannot know a visitor's region.

Common mistakes

The banner renders as unstyled text. The styles.css import is missing.

Nothing appears on the page. The file that calls start is never imported. Import it from your entry script.

A "Cookie settings" link does nothing. It runs before start. Call openPreferences() from a click handler, after start has run.

Next steps

• Configuration: every option start accepts
• Styling: match the banner to your brand
• Integrations: load tags only after consent