Banner & Preferences

Your consent banner is often the first interaction a visitor has with your brand. ConsentStack gives you full control over what they see, how they interact with it, and how they can update their choices later.

The consent banner

When someone visits your site for the first time, ConsentStack displays a consent banner. This is where visitors make their initial privacy choice.

ConsentStack detects each visitor's location and automatically shows the right version of the banner:

You don't need to configure this per region -- ConsentStack handles the logic automatically based on your consent rules.

Banner layouts

Choose from five layout options to match your site's design:

• Bottom bar -- A full-width strip along the bottom of the page. The default, and the most common choice.
• Bottom left / Bottom right -- A compact card in the corner. Less intrusive, good for content-heavy sites.
• Bottom center -- A floating card centered at the bottom. A balanced middle ground.
• Center modal -- A dialog in the middle of the screen with a dimmed background overlay. Impossible to miss.

All layouts are fully responsive. On smaller screens, they adapt automatically so buttons remain tappable and text stays readable.

The preferences center

When a visitor clicks "Customize" on the banner, the preferences center opens. This is where they get granular control over which cookie categories to allow.

Each consent category is listed with its name, a plain-language description, and a toggle. Essential cookies are always on and clearly marked as required -- visitors can see them but can't disable them. This transparency builds trust.

The preferences center has its own layout options:

• Modal -- A centered dialog, the default
• Side panel (left or right) -- Slides in from either edge of the screen
• Full page -- Takes over the entire viewport for maximum clarity

At the top, bulk "Accept All" and "Reject All" buttons give visitors a quick way to set everything at once. A "Save Preferences" button at the bottom confirms their choices.

The re-entry button

After a visitor makes their choice and the banner closes, a small floating button appears in the corner of your site. This is the re-entry button -- it lets returning visitors reopen the preferences center anytime to update their choices.

You can customize the re-entry button's position (bottom-left or bottom-right), choose from eight built-in icons (shield, cookie, fingerprint, settings, and more), or upload your own. Background color, icon color, and border radius are all configurable to match your brand.

Customization overview

Every visual detail of the banner, preferences center, and re-entry button is configurable from the dashboard -- no code required:

• Colors -- Primary, secondary, background, text, borders, and link colors
• Typography -- Heading and body fonts, font sizes, line height
• Layout -- Banner position, preferences center style, re-entry button placement
• Buttons and toggles -- Border radius, padding, sizing
• Banner dimensions -- Max width, max height, padding, border width, shadow style
• Content -- Title, description, and button text for every consent model. Automatic translations for seven languages built in.

Changes preview instantly in the Config Builder before you publish.

Built for everyone

The banner and preferences center are designed to work for all visitors:

• WCAG 2.1 AA accessible -- Proper focus management, ARIA labels, and screen reader announcements
• Keyboard navigable -- Every action is reachable via Tab and Enter, with Escape to close panels
• Respects motion preferences -- Animations are disabled automatically for visitors who prefer reduced motion
• Works on all devices -- Responsive layouts that adapt from desktop to mobile without configuration

Next steps

Ready to customize your banner? Open the Config Builder in your dashboard to start adjusting colors, layouts, and content with a live preview.