Banner Editor

Design and customize your cookie consent banner with our visual editor. Match your website's look and feel with live preview.

Overview

The Banner Editor lets you fully customize your consent banner's appearance, content, and behavior. All changes are previewed in real-time before you save.

Access the editor from your Dashboard or directly via Banner Editor in the sidebar. Select your domain from the dropdown at the top.

The editor is organized into four tabs:

  • Styles – Colors, typography, themes, and visual effects
  • Content – Text, languages, and translations
  • Layout – Position, style, logo, and re-consent widget
  • Advanced – Consent timing and Google Consent Mode

Styles Tab

Customize your banner's visual appearance. The Styles tab contains collapsible panels for different styling options.

Extract Styles from Website

Automatically match your banner to your website's design with one click. Enter your website URL and Cookient will analyze your CSS to detect:

  • Primary and secondary colors
  • Background colors
  • Font families (added to the font dropdown)
  • Border radius values

Review the extracted styles in the preview and fine-tune as needed.

Style Themes

Choose from pre-designed style presets for quick setup. Themes include different color schemes (dark, light, colorful) that you can use as a starting point and customize further.

Colors

  • Background – Banner's main background color
  • Text – Heading and body text color
  • Primary Button – "Accept All" button background and text
  • Secondary Button – "Reject All" and "Customize" buttons
  • Link Color – Privacy policy and other links

Typography

  • Font Family – System default or Google Fonts (Inter, Roboto, Poppins, etc.). Fonts extracted from your website appear at the top of the list.
  • Font Size – Small (12px), Medium (14px), or Large (16px)

Shape & Effects

  • Border Radius – Corner roundness (0 – 32px)
  • Border Width – Border thickness (0 – 10px)
  • Border Color – Color of the banner border
  • Background Opacity – Transparency level (0 – 100%)
  • Shadow Intensity – Drop shadow strength (0 – 50)
*
Quick Start
Use Extract Styles to pull colors and fonts from your website, or choose a Style Theme as a starting point.

Content Tab

Customize all banner text and configure language settings for international visitors.

Language Settings

  • Auto-detect Language – When enabled, the banner automatically displays in the visitor's browser language if it's one of your enabled languages.
  • Default Language – Fallback language when auto-detection is disabled or the visitor's language isn't supported.
  • Enabled Languages – Select which languages to activate. Only enabled languages appear in auto-detection.

Supported Languages

Cookient supports 10 languages with pre-filled default translations:

ENEnglish
DEDeutsch
FRFrançais
ESEspañol
NLNederlands
ITItaliano
FISuomi
SVSvenska
NONorsk
DADansk

Editable Text Fields

Select a language from the tabs and customize these fields:

  • Heading – Main title (e.g., "We value your privacy")
  • Description – Explanation text about cookies and consent
  • Accept All Button – Primary action text
  • Reject All Button – Decline action text
  • Customize Button – Opens category selection
  • Privacy Policy Link – URL to your privacy policy
  • Terms of Service Link – URL to your terms of service (optional)
i
Translations
Each enabled language has its own set of text fields. Switch between languages using the tabs above the text fields to customize translations.

Layout Tab

Configure where and how your banner appears, add your logo, and set up the re-consent widget.

Position

Bottom Center
Full-width bar at bottom (Recommended)
Bottom Left
Corner popup, bottom left
Bottom Right
Corner popup, bottom right
Top Left
Corner popup, top left
Top Right
Corner popup, top right
Center
Modal overlay in center

Style

  • Banner – Compact bar style, fixed at page edge
  • Modal – Centered overlay popup

Button Layout

  • Vertical – Buttons stacked on top of each other
  • Horizontal – Buttons side by side

Logo

Upload your company logo to display in the banner. Supported formats: PNG, JPG (max 1MB). The logo appears next to the heading. Click "Remove logo" to delete it.

Preferences Widget

Allow visitors to change their cookie preferences after they've already made a choice. GDPR requires withdrawing consent to be as easy as giving it.

Widget Types

Floating Button

A small button fixed to a corner of the screen. Clicking opens the consent preferences.

API Only

No visible widget. Use the JavaScript API to open preferences from your own UI element.

Disabled

No re-consent option. You must provide your own way for users to change preferences.

Floating Button Options

  • Position – Bottom-left, bottom-right, top-left, or top-right
  • Style – Icon only, text only, or icon with text
  • Icon – Cookie, shield, or settings icon
  • Label – Custom text for the button

API Method

If using "API Only" mode, open the consent dialog programmatically:

JavaScript
// Open consent preferences dialog
window.cookient.showPreferences();

// Example: Link in your footer
<a href="#" onclick="window.cookient.showPreferences(); return false;">
  Cookie Settings
</a>

Advanced Tab

Fine-tune consent timing and configure Google Consent Mode integration.

Consent Timing

  • Re-consent Trigger (days)

    Number of days before showing the consent banner again to returning visitors. Use this when you update your cookie policy. Default: 30 days.

  • Consent Expiry (days)

    How long a visitor's consent choice is remembered before the banner appears again. Default: 365 days. Range: 30 – 730 days.

Google Consent Mode v2

Integrate with Google's consent framework for GA4 and Google Ads compliance. When enabled, Cookient sends consent signals to Google services based on user choices.

Consent Signals

  • ad_storage– Enables storage for advertising (cookies for ads)
  • ad_user_data– Consent to send user data to Google for advertising
  • ad_personalization– Enables personalized advertising
  • analytics_storage– Enables storage for analytics (e.g., Google Analytics cookies)
i
Learn More
For detailed Google Consent Mode setup, see our Google Consent Mode integration guide.
*
Script Blocking
To block third-party scripts before consent, use the Cookie Scanner to scan your site and configure which scripts to block in the Scripts tab.
← QuickstartCookie Scanner →