← Cookie Compliance Agent Manual

v2 banner design gallery

Eight example designs for the v2 Cookie Compliance banner, in both of its styles, standard and compact. Each one is a screenshot of the real v2 widget showing that design. The build checks every colour pair a visitor reads on the v2 banner's first layer at WCAG AA (4.5:1), and the level pill borders at 3:1.

These designs are for the v2 banner, which is opt-in. For the default v1 banner, see the v1 banner design gallery.

What v2 is

v2 is the new banner engine. It is opt-in, per app: an app uses the v1 banner, the default, until its owner switches it to v2, and it can be switched back the same way.

The v2 first layer offers the consent levels as buttons, Private, Personalized and (when the app offers three choices) Balanced, with Customize last. There is no Accept or Save button: choosing a level is the choice, and nothing is selected until the visitor picks one. Customize opens the categories.

Standard and compact

v2 has two styles, set with config.bannerStyle (a config key, not a design key):

The examples use the default behaviour settings. On a live banner, the number of choices, the close button and which links show depend on the app's settings and the visitor's region.

v2 consent banner in the compact style as a single-row white bar across the bottom of a white page: the heading on the left, then the message with a navy Privacy policy link, then Private and Personalized buttons with grey borders and a Customize button, with download and close icons at the far right.
Design and config JSON 
{
  "config": {
    "bannerStyle": "compact"
  },
  "design": {
    "position": "bottom",
    "displayType": "fixed",
    "bannerOpacity": 1,
    "primaryColor": "#1d3a8a",
    "btnTextColor": "#ffffff",
    "bannerColor": "#ffffff",
    "borderColor": "#5e6a74",
    "textColor": "#1f2937",
    "headingColor": "#111827",
    "btnBorderRadius": "6px",
    "textSize": "13px",
    "headingSize": "15px"
  }
}
Compact bottom barCompact style as a single-row white bar across the bottom, with navy links, for sites that want the banner to take as little height as possible.
v2 consent banner in the compact style as a single-row near-black bar across the top of a dark page: a white heading on the left, then the white message with a mint Privacy policy link, then Private and Personalized buttons with grey borders and a Customize button, with download and close icons at the far right.
Design and config JSON 
{
  "config": {
    "bannerStyle": "compact"
  },
  "design": {
    "position": "top",
    "displayType": "fixed",
    "bannerOpacity": 1,
    "primaryColor": "#20c19e",
    "btnTextColor": "#000000",
    "bannerColor": "#0f1117",
    "borderColor": "#767676",
    "textColor": "#ffffff",
    "headingColor": "#ffffff",
    "btnBorderRadius": "6px",
    "textSize": "13px",
    "headingSize": "15px"
  }
}
Compact top bar, darkCompact style as a single-row dark bar across the top, with mint links, for dark-themed sites.
v2 consent banner in the compact style as a wide pale violet card floating at the bottom of a pale violet page: the heading in the top row beside download and close icons, the message with a violet Privacy policy link below it, then pill-shaped Private and Personalized buttons and a pill-shaped Customize button.
Design and config JSON 
{
  "config": {
    "bannerStyle": "compact"
  },
  "design": {
    "position": "bottom",
    "displayType": "floating",
    "bannerOpacity": 1,
    "primaryColor": "#7c3aed",
    "btnTextColor": "#ffffff",
    "bannerColor": "#f5f3ff",
    "borderColor": "#5e6a74",
    "textColor": "#1f2937",
    "headingColor": "#1f2937",
    "btnBorderRadius": "25px",
    "textSize": "13px",
    "headingSize": "15px"
  }
}
Compact floating cardCompact style as a wide pale-violet card floating at the bottom, with pill-shaped buttons and violet links.
v2 consent banner in the standard style as a wide white card floating at the bottom of a white page: the site domain at top left with download and close icons at top right, a centred heading and message with a teal Privacy policy link, then Private, Balanced and Personalized buttons and a Customize button in one centred row.
Design and config JSON 
{
  "config": {
    "bannerStyle": "standard"
  },
  "design": {
    "position": "bottom",
    "displayType": "floating",
    "bannerOpacity": 1,
    "primaryColor": "#0f766e",
    "btnTextColor": "#ffffff",
    "bannerColor": "#ffffff",
    "borderColor": "#5e6a74",
    "textColor": "#1f2937",
    "headingColor": "#111827",
    "btnBorderRadius": "6px",
    "textSize": "13px",
    "headingSize": "15px"
  }
}
Standard bottom cardStandard style as a wide white card floating at the bottom, with all three levels and teal links.
v2 consent banner in the standard style as a cream panel centred over a cream page: the site domain at top left with download and close icons at top right, a centred heading and message with a burnt orange Privacy policy link, then pill-shaped Private, Balanced and Personalized buttons and a pill-shaped Customize button.
Design and config JSON 
{
  "config": {
    "bannerStyle": "standard"
  },
  "design": {
    "position": "center",
    "displayType": "floating",
    "bannerOpacity": 1,
    "primaryColor": "#c2410c",
    "btnTextColor": "#ffffff",
    "bannerColor": "#fdf6ec",
    "borderColor": "#5e6a74",
    "textColor": "#292524",
    "headingColor": "#292524",
    "btnBorderRadius": "25px",
    "textSize": "13px",
    "headingSize": "15px"
  }
}
Standard centeredStandard style as a cream panel centred on the page, with pill-shaped buttons and burnt-orange links, for warm, editorial sites.
v2 consent banner in the standard style as a near-black panel running the full height of the right side of a dark page: the site domain and the download and close icons at the top, a centred white heading and message with a rose Privacy policy link, then square-cornered Private, Balanced and Personalized buttons, with the Customize button on its own row below them.
Design and config JSON 
{
  "config": {
    "bannerStyle": "standard"
  },
  "design": {
    "position": "right",
    "displayType": "fixed",
    "bannerOpacity": 1,
    "primaryColor": "#f43f5e",
    "btnTextColor": "#000000",
    "bannerColor": "#18181b",
    "borderColor": "#767676",
    "textColor": "#ffffff",
    "headingColor": "#ffffff",
    "btnBorderRadius": "0px",
    "textSize": "13px",
    "headingSize": "15px"
  }
}
Standard right panelStandard style as a full-height dark panel down the right side, with square-cornered buttons and rose links.
v2 consent banner in the compact style on a phone-sized screen, as a white sheet across the bottom of a white page: the heading in the top row beside download and close icons, the message with a blue Privacy policy link, Private and Personalized buttons side by side, and Customize as a blue underlined link centred below them.
Design and config JSON 
{
  "config": {
    "bannerStyle": "compact"
  },
  "design": {
    "position": "bottom",
    "displayType": "fixed",
    "bannerOpacity": 1,
    "primaryColor": "#1f6feb",
    "btnTextColor": "#ffffff",
    "bannerColor": "#ffffff",
    "borderColor": "#5e6a74",
    "textColor": "#1f2937",
    "headingColor": "#111827",
    "btnBorderRadius": "6px",
    "textSize": "13px",
    "headingSize": "15px"
  }
}
Compact on a phoneCompact style on a phone: two level buttons side by side, and Customize as an underlined link below them.
v2 consent banner in the standard style on a phone-sized screen, as an off-white card floating at the bottom of an off-white page: the site domain with download and close icons at the top, a centred heading and message with a near-black Privacy policy link, then full-width Private, Balanced and Personalized buttons stacked in a column, with a full-width Customize button last.
Design and config JSON 
{
  "config": {
    "bannerStyle": "standard"
  },
  "design": {
    "position": "bottom",
    "displayType": "floating",
    "bannerOpacity": 1,
    "primaryColor": "#111827",
    "btnTextColor": "#ffffff",
    "bannerColor": "#fafafa",
    "borderColor": "#5e6a74",
    "textColor": "#1f2937",
    "headingColor": "#111827",
    "btnBorderRadius": "6px",
    "textSize": "13px",
    "headingSize": "15px"
  }
}
Standard on a phoneStandard style on a phone: the three levels and Customize stacked as full-width buttons.

Switch an app to v2

  1. Dashboard: open the app, go to Configuration → Design, and find the last card, Banner engine. Set Engine version to New. It saves itself.
  2. WordPress plugin: version 3.1.11 or later picks the change up at its next check-in. Nothing to paste.
  3. Hand-pasted snippet: go to Integrations, copy the updated snippet (it loads the v2 script) and replace the old one on your site.
  4. Once the app is on v2, set Banner style to Compact if you want the compact style, then click Publish Now (unlike Engine version, this setting does not save itself). Standard is the default.

To switch back to v1, follow the same steps and set the engine version back. For a hand-pasted snippet, paste the updated snippet again.

Apply a design to your live banner

A design block set on your own page is overwritten by your app's published configuration a moment after the banner loads. To use one of these designs on a live v2 banner:

Never add a design block to the install snippet.

Previewing

The MCP preview tools show the v1 banner only, and demo.suggestDesign checks colours against the v1 banner's pairs. To apply a v2 design, use account.previewDesignChange then account.updateDesign (with design and config.bannerStyle), or the dashboard.

If you derive your own v2 colours, check these pairs at 4.5:1 with bannerOpacity at 1: