Back to Documentation

Banner Customization

Customize your cookie consent banner to match your brand

Overview

CookieConfig allows you to fully customize your cookie consent banner's appearance, text, and behavior from your dashboard. All changes are applied instantly to your website without requiring code changes.

Accessing Banner Settings

  1. Log in to your dashboard
  2. Select the website you want to customize
  3. Navigate to the "Banner Configuration" section

Customization Options

Banner Text

Customize the main message shown to users:

  • Heading: The title of your cookie banner (e.g., "We value your privacy")
  • Description: Explanation of why you use cookies
  • Button Labels: Customize "Accept All", "Reject All", and "Customize" button text
  • Category Labels: Edit names for Necessary, Functional, Analytics, and Marketing categories

Banner Position

Choose where the banner appears on your website:

  • Bottom: Fixed bar at the bottom of the page (recommended for desktop)
  • Top: Fixed bar at the top of the page
  • Bottom Left: Small modal in the bottom left corner
  • Bottom Right: Small modal in the bottom right corner
  • Center: Centered modal overlay

Colors and Styling

Match the banner to your brand colors:

  • Background Color: Banner background (default: white)
  • Text Color: Main text color (default: dark gray)
  • Primary Button Color: "Accept All" button color (default: blue)
  • Primary Button Text: Text color for primary button (default: white)
  • Secondary Button Color: "Reject All" and "Customize" buttons (default: gray)
  • Border Color: Banner border color (optional)

Advanced Options

  • Show on Page Load: Display banner immediately vs. after delay
  • Auto-hide Delay: Automatically hide banner after X seconds if no interaction
  • Reshow After Days: How often to show the banner to users who dismissed it (default: 30 days)
  • Block Until Consent: Block all non-essential scripts until user makes a choice

Preview Your Changes

Use the live preview in your dashboard to see how your banner will look before publishing. The preview shows your banner on a sample website layout.

Testing Tip

After customizing your banner, test it on your actual website in an incognito/private browsing window to see exactly how users will experience it.

Best Practices

  • Keep your description clear and concise - most users won't read long paragraphs
  • Ensure sufficient color contrast for accessibility (minimum 4.5:1 ratio)
  • Test your banner on mobile devices - it should be easy to interact with on small screens
  • Make "Accept" and "Reject" buttons equally prominent to avoid dark patterns
  • Use your brand colors but ensure the banner is clearly visible

Multi-Language Support

If your website serves users in multiple languages, you can create different banner configurations for each language. The banner will automatically detect the user's browser language and display the appropriate version.

Related Documentation