Template Customization
This guide highlights all the visual elements you can change to make the cookie banner match your website's design perfectly.
🎨 Visual Overview
Customize your compliance experience across three main components:
1. Teaser Customization
The "Teaser" is the floating icon users see before expanding the banner.
- Position: Top-Left, Bottom-Right, Center, etc. (9 Grid Positions)
- Icon: Upload your own SVG brand icon or use a default.
- Color: Change the Background Color and Fill.
- Size: Set custom Size (Pixels) for Desktop vs. Mobile devices.
2. Main Popup Customization
The primary window for cookie consent.
✍️ Content & Typography
- Heading: Change text, color, and size (Desktop/Mobile).
- Body Text: Update descriptions, colors, and line heights.
- Rich Text: Add bolding, links, or lists within the editor.
🔘 Button Controls
- Shape: Rounded, Square, or Circle.
- Layout: Full Width (Stretched) or Fit Content (Compact).
- Alignment: Left, Center, or Right.
- Style: Background color, Border color, and Text color.
❌ Close Button
- Shape: Plain, Rounded-Filled, Square-Rounded, or Diamond.
- Visibility: Toggle it ON/OFF.
- Attributes: Color, Border, and Size.
3. Preference Center Customization
The Preference Center is where users manage specific cookie categories (e.g., Marketing, Essential).
📝 General Content
- Main Header: Customize the top Title and Description of the preference center.
- Dynamic Categories: Each category (Essential, Analytics, etc.) has its own Title and Detailed Description.
- Button Labels: Rename the "Save Settings" and "Cancel" buttons.
🎨 Style & Typography
Global Typography:
- Heading & Secondary Heading: Set separate colors, sizes, and line heights for main titles and category titles.
- Body Text: Customize font size and line height for descriptions.
Button Styles:
- Save Settings Button: Customize background, border, shape, and text color.
- Cancel Button: Style it differently to differentiate from the save action.
- Close Icon: Control the type (Rounded, Square, Diamond), color, and visibility of the top-right close button.
📱 Responsive Layout
- Accordion Design: Categories are presented in an accordion format for a clean look on mobile.
- Column Layout: Buttons automatically stack on mobile and span properly on desktop via the Device Toggle.
TIP
Use the Device Toggle at the top of the preview panel to verify how your custom template looks on a phone screen before publishing!
📁
Find these settings in the Dashboard > Customize section.