consent-screen

Cookie permission popup for capi public sites. The package includes the browser widget, its popup CSS, and a CommonJS entry point for npm consumers.

Install

npm install consent-screen

Bundler Usage

Import the CSS and start the widget with your capi instance URL and site key:

require("consent-screen/cookie-permissions.css");

const { start } = require("consent-screen");

const CAPI_BASE_URL = "https://your-capi-instance.example.com";
const SITE_KEY = "your-site-key";

start({ CAPI_BASE_URL, SITE_KEY });

Lowercase option names are also accepted:

start({
  capiBaseUrl: "https://your-capi-instance.example.com",
  siteKey: "your-site-key",
});

initCookiePermissions is exported as an alias for start.

Direct Browser Usage

For static pages, include the CSS, configure the widget, and then load the script:

<link rel="stylesheet" href="/node_modules/consent-screen/cookie-permissions.css" />
<script>
  window.CAPI_COOKIE_PERMISSIONS = {
    CAPI_BASE_URL: "https://your-capi-instance.example.com",
    SITE_KEY: "your-site-key"
  };
</script>
<script src="/node_modules/consent-screen/cookie-permissions.js"></script>

Or use lowercase keys:

<script>
  window.CAPI_COOKIE_PERMISSIONS = {
    capiBaseUrl: "https://your-capi-instance.example.com",
    siteKey: "your-site-key"
  };
</script>

Configuration

• CAPI_BASE_URL / capiBaseUrl - base URL of your capi instance, without a trailing slash.
• SITE_KEY / siteKey - site key from the capi admin UI.

The browser script attaches window.CapiCookiePermissions, so it can be initialized manually if needed:

window.CapiCookiePermissions.start({ CAPI_BASE_URL, SITE_KEY });

Runtime Behavior

The widget loads enabled cookie questions from:

GET {CAPI_BASE_URL}/api/public/sites/{SITE_KEY}/cookie-questions

It saves answers to:

POST {CAPI_BASE_URL}/api/public/sites/{SITE_KEY}/cookie-consent

The page origin must be registered for the site in capi so the public API allows browser requests. The widget stores a stable visitor token, a saved-consent marker, and mirrored permission choices in first-party cookies scoped by site key.

Styling

Use cookie-permissions.css for the consent popup. The copied style.css from the static sample is also exported for sample pages, but it is not required by the popup.