Agreely Docs
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. The designer saves a draft: nothing is served to visitors until you publish.

Publishing

Publishing happens in one place, the your site > Publishing page. It shows the banner's serving state, what the new version will cover and what changes against the version being served, then publishes. Each version is hashed and tied to consent records, so a proof always states exactly which banner the visitor was shown.

Publishing is refused while:

  • the site is not verified, or the version would serve nothing (no non-essential purpose to present);
  • any cookie in the inventory is still marked "to review" (see Inventory and categorization);
  • the site uses non-essential cookies and the banner carries no valid link to your privacy policy: the Act requires publishing and disseminating that policy (P-39.1 s. 8.2; A-2.1 s. 63.4);
  • the colors fall short of a 4.5:1 contrast;
  • for a site's very first publication, your signing key is not yet authorized by your company's root passkey (under Settings > Root passkey).

Available options

Branding (logo and colors) applies to sites holding a paid place ($15/month per site). A site still on the former free Discovery tier keeps Agreely's colors and logo, with the "Powered by Agreely" credit (see pricing). The visitor-facing "Customize" button for consent choices exists on every site.

Upload the site's logo: PNG, JPEG or WebP, up to 2 MB. The image is cropped to a square and re-encoded automatically (metadata is stripped). SVG files are not accepted. The logo is served from cdn.agreely.ca/e/v1/logo/{key}. Without a logo of its own, the site's banner shows your company logo, or failing that the Agreely emblem.

Background color and accent color

Two colors define the palette: the banner's background color and the accent color of the accept button. The theme engine derives the rest (text, hover states) aiming for a contrast of at least 4.5:1 (WCAG 2.2 AA). A pair whose accent falls short of 4.5:1 on the background is refused on save and on publish, with a message asking you to pick a darker or lighter color.

The three main actions (Accept all / Refuse all / Customize) always have identical visual weight: same size, same button style. This is an Agreely design choice: the Act requires consent to be free and informed (P-39.1 s. 14, first paragraph; A-2.1 s. 53.1, first paragraph), and a banner that makes refusing harder than accepting can undermine that freedom.

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).

Corner rounding

Five levels, from None to Maximum, set how round the card is; the buttons follow so the whole thing stays coherent.

Floating "Manage cookies" button

After their decision, the person finds a floating button that reopens their preferences. It is on by default. Only turn it off if your page already exposes a clearly visible trigger carrying the data-agreely-preferences attribute (see Installation): the person must be informed of their right to withdraw consent (P-39.1 s. 8, first paragraph, subparagraph 4) or, for a public body, of the consequences of a withdrawal (A-2.1 s. 65, first paragraph, subparagraph 5). If no trigger is detected, the banner shows a fallback button.

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. As soon as your site uses non-essential cookies, at least one valid link is required to publish.

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 light (around 3 KB compressed); 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.

Discovery tier: Agreely branding

On a site still on the free Discovery tier (an offer withdrawn for new sites), 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.) Sites holding a paid place ($15/month per site) use your logo and your colors, without the credit.