Banner basics: brand, languages, categories

This guide covers everything you need to configure a clean, on-brand, and compliant consent banner. From colors and logos to layout positions and category defaults, set up your banner in minutes.

Branding and Colors

Setting Your Brand Colors

1. Go to Domains > [your domain] > Widget Configuration.
2. Configure these color settings:

Logo

• Upload a logo under Branding in Widget Configuration.
• Recommended size: 120-200px wide, PNG or SVG with transparent background.
• The logo appears in the banner header area, reinforcing trust.
• If no logo is uploaded, only your banner title text appears.

Typography

• The banner inherits your site's default font family by default.
• To override, use Custom CSS in your GetCookies dashboard:

.gc-banner {
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
}

Banner Position and Layout

Position Options

Choose where the banner appears on the page:

Layout Styles

• Compact: Minimal text with Accept/Reject buttons. Best for repeat visitors and simple sites.
• Expanded: Shows category toggles directly without requiring a second click. Better for transparency and GDPR regions where granular choice matters.
• Wall (blocking): Full-page overlay that prevents interaction until consent is given. Use sparingly -- required in some interpretations of ePrivacy regulations.

Avoiding Layout Shift

• The bottom bar position can push page content up on load. To prevent this, the banner uses position: fixed by default and floats over content.
• If you prefer the banner to push content, enable "Push content" in Widget Configuration (note: this may cause layout shift on Core Web Vitals).
• For the center modal, a backdrop overlay prevents interaction but does not shift content.

Button Configuration

Button Text

Customize all button labels under Widget Configuration:

Button Visibility

• Reject All button: Always enable this for GDPR/ePrivacy compliance. EU data protection authorities require that rejecting cookies is as easy as accepting them.
• Preferences button: Always show this so users can make granular choices.
• Close (X) button: Optional. If enabled, closing the banner without a choice treats all non-necessary cookies as denied.

Languages and Translations

Adding Languages

1. Go to Domains > [your domain] > Languages.
2. Click Add Language and select from the available list.
3. For each language, translate:

• Banner title and description text
• Button labels (Accept, Reject, Preferences, Save)
• Category names and descriptions
• Privacy policy link text

Auto-Detection

• Enable Auto-detect language to show the banner in the visitor's browser language.
• Set a fallback language for visitors whose language is not configured.
• GetCookies detects language via the browser's Accept-Language header.

RTL Support

• GetCookies supports right-to-left (RTL) languages like Arabic and Hebrew.
• RTL layout is applied automatically when an RTL language is detected.

Consent Categories

Default Categories

Customizing Categories

• Rename categories in Widget Configuration if your privacy policy uses different terms (e.g., "Functional" instead of "Preferences").
• Add descriptions for each category that explain what scripts/cookies it includes in plain language.
• Map each category to the appropriate Google Consent Mode signals if using Consent Mode v2.

Category-to-Consent-Mode Mapping

Advanced: Custom CSS

For styling beyond what the visual editor provides, add custom CSS in your GetCookies dashboard:

/* Rounded buttons */
.gc-banner .gc-btn-accept,
.gc-banner .gc-btn-reject,
.gc-banner .gc-btn-preferences {
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Gradient accept button */
.gc-banner .gc-btn-accept {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

/* Softer shadow on the banner */
.gc-banner {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 12px 12px 0 0;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .gc-banner {
        padding: 12px 16px;
        font-size: 13px;
    }
    .gc-banner-buttons {
        flex-direction: column;
        gap: 8px;
    }
}

CSS Class Reference

Floating Preferences Button

After the user makes a consent choice, the banner hides but a small floating button remains so they can change their preferences at any time. This is required by GDPR.

• Configure the button position: bottom-left or bottom-right.
• Customize the button icon and color in Widget Configuration.
• The button opens the same preferences panel as the "Manage Preferences" button on the banner.

Accessibility

GetCookies banners are built with accessibility in mind:

• Keyboard navigation: All buttons and toggles are focusable and operable with Tab/Enter/Space.
• Screen readers: ARIA labels and roles are applied to all interactive elements.
• Focus trapping: When the modal is open, focus is trapped inside it so screen reader users do not get lost.
• Color contrast: Default themes meet WCAG AA contrast ratios. Verify contrast if you use custom colors.
• Reduced motion: Animations respect the prefers-reduced-motion media query.

Test Before Publishing

1. Open your site in an incognito window to see the banner as a new visitor.
2. Check that the banner appears correctly on desktop and mobile.
3. Verify all buttons work: Accept All, Reject All, Manage Preferences, Save Preferences.
4. Switch languages (if configured) and check that text fits within the banner layout.
5. Toggle each category and verify scripts are blocked/unblocked accordingly.
6. Check the floating preferences button appears after making a choice and reopens the preferences panel.
7. Test with a screen reader (VoiceOver, NVDA, or JAWS) to verify accessibility.