> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cookiechimp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Banner Designer

> Design and configure your consent banner's layout, theme, and behavior.

<img src="https://mintcdn.com/identitysquare/PNp7zvpuSh_GT_4M/images/consent-banner/banner-designer.png?fit=max&auto=format&n=PNp7zvpuSh_GT_4M&q=85&s=210822ec81e629f043404e640a6a301b" alt="Banner Designer" width="2880" height="1734" data-path="images/consent-banner/banner-designer.png" />

## How do I show different banners by region?

Banners can be configured to show only in specific countries or U.S. states. This lets you create multiple banners customised for different regions and their regulations.

<img src="https://mintcdn.com/identitysquare/PNp7zvpuSh_GT_4M/images/consent-banner/geo-targeting.png?fit=max&auto=format&n=PNp7zvpuSh_GT_4M&q=85&s=4d88d2960a92bd3d1283ee35d53e558d" alt="Geo Targeting" width="2370" height="1608" data-path="images/consent-banner/geo-targeting.png" />

## How do I force users to consent before browsing?

The force consent option can be toggled to increase consent rates.

When this option is enabled, the user is forced to accept/deny consent before interacting with the website.

<img src="https://mintcdn.com/identitysquare/PNp7zvpuSh_GT_4M/images/consent-banner/force-consent.png?fit=max&auto=format&n=PNp7zvpuSh_GT_4M&q=85&s=60a60bec5b16f073bedf532a26723b1f" alt="Force Consent" width="2370" height="1608" data-path="images/consent-banner/force-consent.png" />

## How do I change the banner layout?

The layout, position and button placement of banners can be customised to fit your website's style.

<img src="https://mintcdn.com/identitysquare/PNp7zvpuSh_GT_4M/images/consent-banner/banner-layout.png?fit=max&auto=format&n=PNp7zvpuSh_GT_4M&q=85&s=08ee02da49f48adb78f1b6efb5c173d7" alt="Banner Layout" width="2370" height="1608" data-path="images/consent-banner/banner-layout.png" />

Similarly, the layout of the preferences modal can also be customised.

<img src="https://mintcdn.com/identitysquare/PNp7zvpuSh_GT_4M/images/consent-banner/preferences-layout.png?fit=max&auto=format&n=PNp7zvpuSh_GT_4M&q=85&s=5aa1a363ecaf5b9acc00fd425e1bfbd1" alt="Preferences Layout" width="2370" height="778" data-path="images/consent-banner/preferences-layout.png" />

## How do I customize banner buttons?

The weights, position and text of banner buttons can be customised.

<Note>
  Some regulations like GDPR require banner buttons to be equally weighted.
  Some regulations might require specific text for buttons.
</Note>

<img src="https://mintcdn.com/identitysquare/PNp7zvpuSh_GT_4M/images/consent-banner/banner-buttons.png?fit=max&auto=format&n=PNp7zvpuSh_GT_4M&q=85&s=4f4a38385e2b4d2ac96726533a37790c" alt="Banner Buttons" width="2370" height="1608" data-path="images/consent-banner/banner-buttons.png" />

## What is the Privacy Trigger?

The privacy trigger is a floating button that allows users to update their consent preferences at any time.
This can be enabled/disabled and its position can be customised.

<Note>
  Most regulations mandate that users must be able to update their consent preferences after giving their initial consent.
  You can enable this using our Privacy Trigger or by [adding your own button or link](/advanced/callbacks-events#showpreferences) to open the preferences.
</Note>

<img src="https://mintcdn.com/identitysquare/PNp7zvpuSh_GT_4M/images/consent-banner/privacy-trigger.png?fit=max&auto=format&n=PNp7zvpuSh_GT_4M&q=85&s=d1e2373eef8463ddd70588167ea34547" alt="Privacy Trigger" width="2370" height="888" data-path="images/consent-banner/privacy-trigger.png" />

## How do I control what users see in preferences?

The preferences modal can be customised to only show categories or to show their services and cookies and allow users to have more granular control.

<Note>
  Some regulations require all storage items and services to be shown.
</Note>

<img src="https://mintcdn.com/identitysquare/PNp7zvpuSh_GT_4M/images/consent-banner/control-level.png?fit=max&auto=format&n=PNp7zvpuSh_GT_4M&q=85&s=9ec7ace244be36f729dff0e921c7fa5a" alt="Control Level" width="2370" height="1040" data-path="images/consent-banner/control-level.png" />

## How do I theme the banner?

The banner's appearance can be customised with various theme options:

* Dark/Light mode - Choose between light, dark, or auto mode that follows the user's system preferences
* Colors - Customise the banner's primary colors, text colors, and button colors to match your brand
* Border radius - Adjust the roundness of corners on the banner, buttons and modal
* Logo - Add your company logo to reinforce brand identity

These theme settings apply to both the consent banner and preferences modal to maintain a consistent look across all consent UI elements.

<img src="https://mintcdn.com/identitysquare/PNp7zvpuSh_GT_4M/images/consent-banner/theme.png?fit=max&auto=format&n=PNp7zvpuSh_GT_4M&q=85&s=8295ec745bdf8f6269a339303d1a537b" alt="Theme" width="2338" height="2592" data-path="images/consent-banner/theme.png" />

For more detailed styling options, refer to the [Custom CSS](/advanced/custom-css) documentation page.

## How do I add translations?

For more detailed information about banner languages and translations, refer to the [Multilingual Banners](/features/multilingual-banners) documentation page.
