Feedback & status

AppConsentBanner

The cookie consent banner: accept all, reject all, or choose per category.

<app-consent-banner policy-href="/cookie-policy" />

<app-consent-banner> is the cookie consent banner: Accept all, Reject all, or choose per category in Cookie settings (analytics, functional, marketing; essential is always on). There is no close button: dismissing without a choice would leave the visitor undecided, and the banner would just return on the next page.

It needs <app-analytics-head> in the page's <head>. That include wires up @webority/analytics: it sets up the consent record, opens this banner for an undecided visitor, and re-syncs it whenever a choice is saved. This sandbox's own layout carries one with no ids, which is why this demo below opens on your first visit.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the banner above it. Once you've answered it, use the Cookie settings link below the demo to reopen it.

heading description policy-href policy-label analytics-description functional-description marketing-description position standalone

Cookie settings

<app-consent-banner />

Every demo on this page is boxedThe real component is position: fixed: it pins to a corner of the viewport and stays there while the page scrolls. This example sits in a transformed container so it pins to that box instead; in your app you render it once, in the layout, and pass nothing about placement beyond position.

Wiring it up

One include in <head>, then the banner tag anywhere on the page.

The head include

Loads the analytics bundle, sets up consent, and wires this banner: this sandbox's own layout carries one with no ids.

Show code

<head>
  <app-analytics-head gtm-id="GTM-XXXX" clarity-id="abcd1234" cookie-domain=".example.com" />
</head>

<app-consent-banner policy-href="/cookie-policy" />

A page without the shared theme

For a site on its own CSS (or another Bootstrap major): the banner renders sealed in its own shadow root with its own styles, and the tag adds the small banner-only script itself. Nothing else from this library needs to load. Brand it with the theme's custom properties.

Show code

<style>:root { --color-primary: #6c2cff; }</style>

<app-consent-banner standalone="true" policy-href="/cookie-policy" />

Reopening it: data-consent-settings, no codeAny element carrying data-consent-settings reopens the banner in settings mode: withdrawing consent must be as easy as giving it. A footer "Cookie settings" link needs nothing beyond the attribute: <a href="#" data-consent-settings>Cookie settings</a>. The listener is document-wide, so it reopens every banner instance mounted on the page: in a real app that is exactly one.

When to use

Use it when

Any product surface that sets non-essential cookies (analytics, ads, feature personalization).
You want one shared consent record across the website and its subdomains.

Reach for something else when

You need to announce something to every visitor, not ask a compliance question. → app-banner
You're building the head include that loads the tags and the consent record. → app-analytics-head

Accessibility

What the element handles for youThe panel is a dialog named by its heading. There is no close button by design, so the only way out is a choice: Accept all, Reject all, or Save preferences in settings mode. Escape does not dismiss it either: the same reasoning as the missing close button.

Attributes

Attribute	Type	Default	Description
position	`string`	bottom-left	bottom-left \| bottom-right: which corner it pins to.
heading	`string`	Cookies on this site	Heading, and the dialog's accessible name.
description	`string`	-	The explanation shown above the buttons.
policy-href	`string`	-	Link to the cookie policy; no link when omitted.
policy-label	`string`	-	The policy link's text.
analytics-description	`string`	-	What the analytics category covers.
functional-description	`string`	-	What the functional category covers.
marketing-description	`string`	-	What the marketing category covers.
standalone	`bool`	false	Render sealed in a shadow root with bundled styles, and add the banner-only script, for a page that does not load the shared theme. Brand colour comes from `--color-primary` and the other theme custom properties.
class	`string`	-	Extra classes on the element; passes through as a plain HTML attribute (matching React's className).

Method on the element, called from your own script (the <app-analytics-head> include already does this for you): open({ settings, focus }), close(). Event: wui-consent-save with detail = { analytics, functional, marketing }.