Cookie Banner

Cookie Banner editor

The Cookie Banner editor is where you control everything your visitors see and interact with: which law the banner follows, where it appears, how it looks, and what it says. This article walks through every setting in the order they appear in the editor — General, Layout, Design and Content. Opening the editor In your CookieLet dashboard, select the website you want to edit from the Website selector at the top of the sidebar, then choose Cookie Banner. The editor has two halves. On the left is a live preview of your banner on a placeholder page; every change you make on the right is reflected there immediately. The three icons in the preview's top-right corner switch between desktop, tablet and mobile views, so you can check the banner at each size before publishing. Three buttons sit in the header: - Save — stores your changes as a draft. Nothing changes on your live site. - Preview — opens your draft banner on your actual website in a new tab, so you can see it in context. - Publish — pushes your saved changes live. The button stays greyed out until there is a saved draft to publish. Save and Publish are separate on purpose. You can save work in progress across several sessions and only publish when the whole banner is ready. Visitors never see an unpublished draft. Above the settings panel sits the Legislation Preset selector. It sets the consent model the banner follows — opt-in for GDPR, opt-out for US state laws, or geo-targeted for worldwide traffic — and pre-fills sensible defaults throughout the editor. You chose this when you added the website; change it here if your audience changes. A small crown icon next to a setting means it's available on paid plans. On the Free plan the setting is visible but locked. See our pricing page for which plan unlocks which feature. General The General section controls where the banner is shown, which industry frameworks it supports, and how consent is stored. Geo-target banner Decides which visitors see the banner at all, based on their location. - Worldwide — every visitor sees the banner regardless of location. The safest choice if you're unsure, and the only option on the Free plan. - EU Countries & UK — only visitors in the European Economic Area and the United Kingdom see the banner. Visitors elsewhere are not asked, and non-essential scripts load normally for them. Use this if your only consent obligation is GDPR. - Select Countries — you pick the exact countries or regions. A tree lets you tick whole continents or expand them to choose individual countries, with a search box for speed. Geo-targeting works from the visitor's IP address. Visitors on a VPN are placed wherever the VPN exits, so a UK visitor tunnelling through the US would not see an EU-only banner. If that matters to you, choose Worldwide. Support IAB TCF v2.3 Turns on the IAB Europe Transparency and Consent Framework. When enabled, the banner collects consent per purpose and per vendor and produces a TC string that ad-tech partners can read. You need this if you run programmatic advertising, use Google Ad Manager or AdSense in the EEA/UK, or work with vendors who require a TCF-registered CMP. Turning TCF on adds a vendor list and purpose descriptions to the preference centre automatically. Leave it off if you don't serve programmatic ads — it makes the banner longer and more complex for no benefit. Support Google's Additional Consent Mode Available once TCF is on. Extends the TC string with consent for Google's ad-tech providers that aren't part of the IAB vendor list. Turn this on if you use Google Ad Manager or AdSense with TCF. Enable Google's Advertiser Consent Mode Available once TCF is on. Lets Google's advertising tags derive their consent signals directly from the TC string rather than from your cookie categories. Turn it on if you use Google Ads or Floodlight alongside TCF — it's the mechanism Google expects TCF-enabled sites to use. See our Google Consent Mode article for how the two interact. Advanced settings Select Show advanced settings to reveal the storage options. Consent expiration (days) How long a visitor's decision is remembered before the banner is shown again. The default is 365 days. Some regulators recommend re-asking after 6 to 12 months; check the guidance that applies to you. A shorter value means more frequent prompts and, typically, a slightly lower overall consent rate. Reload page on consent action When on, the page reloads the moment a visitor accepts or rejects. This guarantees that every script CookieLet was blocking loads cleanly, exactly as it would on a fresh visit — which is the most reliable behaviour for analytics and advertising tags. Turn it off only if a reload would break something on your site, such as a form the visitor is mid-way through, a video that's playing, or a single-page app that loses state. With it off, CookieLet still releases blocked scripts after consent, but without a page reload some scripts may not initialise until the next navigation. Layout The Layout section controls the shape of the banner, where it sits on the page, and how it appears. Choose Banner Layout - Box — a compact floating card pinned to a corner or edge. Least intrusive; page content stays fully visible. - Banner — a full-width bar across the top, centre or bottom of the viewport. Traditional and highly visible. - Popup — a larger card you can place anywhere on screen, typically centred. Most prominent; use it when you want a clear decision before the visitor continues. The Position control changes to match the layout you chose. For Box, a nine-point grid lets you pin the card to any corner, edge or the centre. Bottom-left and bottom-right are the most common choices for a box. For Banner, you choose top, centre or bottom. Bottom is the least disruptive; top is the most noticeable. For Popup, the same nine-point grid applies. Centre is the default and the usual choice. Regulators in several EU countries have taken the view that a banner must be as easy to reject as to accept, and that the banner should not be so unobtrusive that visitors miss it. Layout and position are your call, but Box in a corner with a small font is the setup most likely to draw that criticism. Style Effect - None — flat card with a plain border. - Shadow — soft drop shadow that lifts the banner off the page. - Glassmorphism — frosted-glass effect with a translucent background that blurs the page behind it. Works best over image-heavy pages; on a plain white page it's barely distinguishable from None. Animation How the banner enters the page: Fade in, Slide up, Slide down or Bounce. Slide up suits bottom-positioned banners; slide down suits top-positioned ones. Bounce is the most attention-grabbing and the most likely to feel out of place on a corporate site. Design The Design section controls colours and branding. Theme Pick a starting point. Light and Dark apply a coordinated palette in one step; Custom lets you set every colour yourself. Choosing a theme after you've customised colours overwrites your changes, so pick the theme first and adjust from there. Colour Settings Each swatch opens a colour picker. Select Reset all to return every colour to the theme default. General Colours - Background — the banner card itself - Title — the heading text ("We value your privacy" by default) - Highlight — accent colour used for toggles and emphasised elements in the preference centre - Text — the body message - Link — the Privacy Policy and Cookie Policy links Button Colours Each of the three buttons has its own background, text and border colour: - Button 01 — Accept All - Button 02 — Reject All - Button 03 — Customise Keep Accept and Reject visually equal. Giving Accept All a bold filled button while Reject All is a faint outline is the pattern regulators describe as a "dark pattern", and it has drawn enforcement action in France, Germany and elsewhere. If you style one prominently, style the other the same way. Contrast between text and background on every button should meet at least the WCAG AA ratio of 4.5:1. CookieLet Watermark Controls the small "Powered by CookieLet" line at the foot of the banner. Turn it off to remove the branding. Available on paid plans. Toggle button icon After a visitor makes their choice, a small floating button stays on the page so they can reopen their preferences at any time. By default it shows the CookieLet icon; upload a PNG of your own — your logo, or a simple cookie glyph in your brand colour — to replace it. PNG only, maximum 100 KB. Square images with a transparent background look best. Content The Content section controls every piece of text on the banner and in the preference centre. Show language selector on banner Adds a language dropdown to the banner so visitors can switch. It only appears once your banner has more than one language; add translations on the Languages page first. If you rely on automatic language detection you can leave this off. Default Language The language shown when CookieLet can't match the visitor's browser language to one of your translations. The text fields below always edit the language shown here — to edit other translations, go to the Languages page. Cookie Notice and Preference Center tabs Content is split into two tabs. Cookie Notice is the first thing visitors see; Preference Center is the detailed panel that opens when they select Customise. Reset all restores the default wording for the current tab. Cookie Notice — Banner - Title — the heading. Keep it short; it renders in the Title colour set under Design. - Message — the explanatory paragraph. This is the text regulators read most closely: say what you use cookies for in plain terms and mention that clicking Accept All consents to all of them. Avoid legal boilerplate. - "Accept All" button, "Reject All" button, "Customise" button — the labels on the three buttons. Keep the meaning unambiguous; "OK" or "Got it" on an accept button is not considered valid consent under GDPR. Revisit Consent Button Text on hover — the tooltip shown when a visitor hovers over the floating preferences button. Default is "Consent Preferences". Policy Links The two links shown beneath the banner message: - "Cookie Policy" link text and Cookie Policy link — the label and the URL. The default URL is /cookiepolicy; change it to wherever your cookie policy actually lives. If you generated your cookie policy with CookieLet's Policy Generator, link to the page where you published it. - "Privacy Policy" link text and Privacy Policy link — the same for your privacy policy, defaulting to /privacypolicy. Both links can be relative (/privacy) or absolute (https://www.example.com/privacy). Check them in the Preview — a link to a page that doesn't exist is one of the most common banner mistakes. Preference Center Switch to the Preference Center tab to edit the detailed panel: its title and introduction, the name and description of each cookie category, and the labels on the Save and Accept All buttons inside it. Category names here should match the categories shown in your Cookie Manager, since the cookie declaration lists cookies under them. Putting it live 1. Select Save. 2. Select Preview and check the banner on your real site — on desktop and on a phone. 3. Test all three buttons and confirm the preference centre opens, saves, and closes. 4. Select Publish. Published changes reach your site through the CookieLet CDN within a few minutes. If you don't see them, clear your site's cache and test in a private window — your own browser may hold an existing consent decision that hides the banner. Still need help? Email support@cookielet.com with your website URL and a description of what you're trying to achieve, and we'll suggest the right settings.