# Customize your cookie banner in the Builder

Layouts, colors, typography, multilingual copy and live preview: everything the FlowConsent Builder offers to make the banner match your brand.

> Canonical: https://www.flowconsent.com/en/doc/banner-customization
> Last updated: 2026-07-30
The Builder is where a banner's look, copy and behavior are edited. Every change is reflected instantly in the **live preview** on the right, with a device selector (desktop, tablet, mobile), and nothing goes live until you deploy — you can iterate safely on a published banner.

## What can be customized where

The Builder is organized in tabs, each owning one concern:

- **Information** — banner title, description and logo (upload a file or use the default).
- **Style** — the whole visual layer, detailed below.
- **Legal** — the legal identity shown to visitors. A banner cannot be published without it; the sidebar marks this tab with a dot as long as it's incomplete.
- **Services** and **Cookie list** — what the banner declares and blocks; see [services and legal bases](/en/doc/services-and-legal-basis) and the [cookie declaration](/en/doc/cookie-declaration).
- **Deployment** — publishing, the install snippet and the setup wizard.
- **GTM Server Side** and **Google Consent Mode v2** — Google-specific integrations.
- **Translations** — the multilingual copy, detailed below.
- **Logs** — the banner's consent activity.

## Choose a layout

The banner format is picked from six templates: **minimal**, **bottom bar**, **floating**, **full width**, **modern popup** and **GDPR wall**. The template drives which style controls apply:

- **Bottom bar** and **GDPR wall** span the viewport, so they have no position controls; the bottom bar gets its own dedicated section instead.
- All other formats expose a **widget position** section: choose the corner and fine-tune X/Y offsets per breakpoint (desktop, tablet, mobile), in px or rem.

> [!TIP]
> The breakpoint selector in the position section is the same state as the preview's device selector — switching one switches the other, so you always see the breakpoint you are editing.

## Style: colors, typography, buttons

The **Style** tab groups the visual sections:

- **Colors** — background, text, accents, radii, with color pickers.
- **Typography** — font family and sizes.
- **Buttons** — the accept/reject/preferences buttons' styling.
- **Floating button** — the persistent re-open button visitors use to change their mind, including its size.
- **Trigger**, **shadow** and **overlay** (with adjustable opacity) — how and over what the banner appears; shadow and overlay don't apply to the bottom bar.
- A **reset** section restores the defaults if you've gone too far.

> [!NOTE]
> GDPR defaults — equal Accept / Reject buttons, prior blocking, granular categories — are preserved across customization. Styling changes how the banner looks, not what it is allowed to do.

## Copy and languages

The **Information** tab holds the default title and description. The **Translations** tab manages every other language:

- pick the **default language** and how the visitor's language is detected (browser or URL), with a URL-mapping overview per language;
- add translations, each editable per language card.

Language count depends on the plan: **Free** covers 2 languages (default + 1 translation), **Pro** 5, **Enterprise** unlimited.

## Versions and rollback

Every deployment records a version in the **Version history** card of the Deployment tab. Rollback to a previous version is **instant and requires no redeployment**; the last 10 deployments are kept. If a styling change goes wrong in production, roll back first, fix calmly after.

> [!NOTE]
> On self-hosted (Free plan) banners, reading the version history requires your Cloudflare API token, since versions live in your own Cloudflare account.

## Next steps

- [Declare your services and their legal bases](/en/doc/services-and-legal-basis)
- [Review the cookie declaration](/en/doc/cookie-declaration)
- [Verify the result with a refusal scan](/en/doc/compliance-verification)