Agreely
FR EN

Customization

Banner customization is done in the Agreely dashboard under **Cookies > your site

Banner**. Changes are published by versioning the configuration; each version is hashed and tied to consent records.

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 (default) Bar or card at the bottom of the viewport
bottom-left Card at the bottom left
bottom-right Card at the bottom right
top Bar at the top of the viewport
center Centered modal

The banner uses position: fixed and does not shift page content (zero Cumulative Layout Shift).

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), determined by the page lang attribute then by the website's default language.

SEO

  • The script is async: it 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. This credit cannot be hidden by the page's CSS and is not suppressed by any customization setting - it is controlled by your tier, not by a parameter. Paid sites ($15/month per site) use your logo and your colors, without the credit.