Agreely
FR EN

The banner designer

The banner designer lives in the Agreely dashboard under Cookie banner (cookies) > your site > Banner. There you set appearance, position, policy links and branding, with a live preview. Changes are published by versioning the configuration; each version is hashed and tied to consent records, so a proof always states exactly which banner the visitor was shown.

Conditional publishing. Publishing a banner is blocked while any cookie in the inventory is still marked "to review". Clear the inventory review first (see Inventory and categorization), then publish.

Available options

Branding (logo and colors) applies to paid sites ($15/month per site). On the free site, the banner stays in Agreely's colors, with Agreely's logo and the "Powered by Agreely" mention (see pricing). The visitor-facing "Customize" button for consent choices exists on every tier.

Upload your organization's logo (PNG or SVG recommended, transparent backgrounds supported). The logo is served from cdn.agreely.ca/e/v1/logo/{key}. If no logo is provided, the banner shows only your organization's name.

Primary and secondary color

Two colors define the banner palette. The theme engine automatically computes color derivatives (background, borders, hover states, etc.) and enforces a minimum 4.5:1 contrast ratio (WCAG 2.2 AA). If the computed contrast is insufficient, the dashboard shows a warning and adjusts the hue to stay readable.

The three main actions (Accept all / Refuse all / Customize) always have identical visual weight: same size, same button style. Law 25 (article 14) requires that refusing be as easy as accepting.

Position

Value Description
bottom-right (default) Card at the bottom right
bottom Bar at the bottom of the viewport (full width)
bottom-left Card at the bottom left
top Bar at the top of the viewport
center Centered modal

A new site starts at the bottom right (bottom-right). The banner uses position: fixed and does not shift page content (zero Cumulative Layout Shift).

Live FR|EN language switcher

The banner is not just bilingual: it shows an FR|EN switcher the visitor can toggle live. Since client version 1.3.5, the banner already bundles both languages (no extra download), auto-detects your page's lang attribute (<html lang="fr"> or <html lang="en">), then falls back to the site's default language, then to French.

The visitor can switch FR ⇄ EN at any time, both on the main banner and in the preferences layer. Switching changes only the displayed text: it never alters the visitor's per-purpose choices or the recorded consent. The designer offers the same FR|EN preview so you can preview both languages without touching the saved configuration.

Add one or more links to your privacy policy or cookie policy. Each link carries a French label and an English label. URLs are restricted to http and https protocols; javascript: and data: URLs are rejected.

Accessibility

  • Touch targets of at least 24 px (WCAG 2.2 AA, criterion 2.5.8).
  • Visible focus indicators with >= 4.5:1 contrast on all interactive elements.
  • The preferences layer is a real dialog (role="dialog", aria-modal="true") with focus trap, Esc key, and focus restoration.
  • Layer 1 (the main banner) does not block scrolling or navigation.
  • Decisions are announced via a live region (role="status").
  • Animation is disabled when prefers-reduced-motion: reduce is active.
  • All interface strings are bilingual (French / English). The initial language is determined by the page lang attribute, then by the website's default language; an FR|EN switcher then lets the visitor toggle live.

SEO

  • The loader runs synchronously but is tiny (around 0.7 KB); the banner module loads asynchronously and does not block page rendering.
  • The banner is position: fixed; it does not hide indexable content.
  • No cloaking: Googlebot receives the unaltered page without content gating.

Free tier: Agreely branding

On the free banner-only tier, the banner is served in Agreely's colors, with Agreely's logo, and the "Powered by Agreely" credit is displayed inside the banner in the shadow root. The shadow root is in open mode: it isolates the banner from your page's CSS, so page CSS cannot hide the credit, and no customization setting suppresses it - it is controlled by your tier, not by a parameter. (The open mode is still reachable by the page's JavaScript, so we do not claim absolute isolation, only isolation from CSS.) Paid sites ($15/month per site) use your logo and your colors, without the credit.