🎨 Designing The Cookie Banner: Layouts, Colours, Presets And Live Preview

New here? Not a customer yet?See everything ResultsAiX Consent can do, and get it.Get ResultsAiX Consent →

Everything about how the banner looks is on the Banner tab, with a live preview beside the options.

Three shapes

Under Shape and place choose one of:

  • A box. Sits in a corner. The least intrusive, and what most sites use.
  • A bar. Spans the whole width, top or bottom. Hard to miss.
  • In the middle. Front and centre, over the page.

Where it sits offers Bottom left, Bottom right, Bottom, centred and Top. A bar ignores left and right and uses top or bottom only. You can also set Corner rounding (0 to 30), Text size (11 to 20), tick Dim the page behind the banner, and tick This is a dark banner, which adjusts the dividing lines when your background is dark.

Colours and one-press looks

Under Colours there are six starting looks: Clean Light, Midnight, Soft Slate, Ocean, Forest and High Contrast. Pressing one only fills in the colour pickers, so you can change any single colour afterwards, and nothing is saved until you press Save the banner. The six pickers are Background, Text, Buttons, Button text, Quiet button and Quiet button text.

Accept and Reject are always equal

Accept and Reject are drawn the same way on purpose. They share one style, so there is no colour setting that makes one of them shout and the other whisper. The third button, which opens the detailed choices, is the quiet one, because it opens a screen instead of making a decision.

Show the reject button is ticked by default, and the screen asks you to think hard before turning it off. There is also an optional close X. If you show it, pressing it counts as rejecting everything, never as accepting.

The live preview

The preview is the real banner. It uses the same stylesheet your visitors load, so what you see is what they get. It updates as you type the wording, pick colours, change the rounding or text size, and switch shape or position. Use the Light page and Dark page buttons above it to check the banner against both kinds of site. The only difference from the real thing is that it sits inside the screen, so it cannot float over your admin.

When you are happy, press Save the banner. Visitors see the change from their next page load.

New here? Not a customer yet?See everything ResultsAiX Consent can do, and get it.Get ResultsAiX Consent →

Ready to stop reading and start using?

Every plugin documented here works alongside the others, managed from one ResultsAiX Hub.