You can customize the layout, styling, content, and behavior of your banner template. This allows you to create a look and feel that matches your organization's branding style and behavior preferences. You can create multiple templates based on your compliance requirements to display different banners for different regions.
What is a Cookie Consent Banner?
A Cookie Consent Banner is a pop-up that is displayed on websites that allows users to explicitly provide consent (e.g., accept or reject) to cookies that are available on the website.
To customize a Banner template
Banners can be customized and created in two ways. This article details creating and customizing your Banner through the Templates section of Cookie Consent. To learn how to configure a banner when scanning a domain, see Scanning a Website.
On the Cookie Consent menu, select Templates. The Templates screen appears.
Click on the name of the template you want to customize. The Template Details screen appears.
Select the Web Browser button for the Platform.
Go to the Banner tab. Configurable elements (left) and a live preview of your Banner (right) display.
Note
Custom CSS configurations do not display in the preview.
Click the Save button for each template section you configure.
Click the Save Template button.
For the changes to reflect on your site, the respective domain's production or testing script must be republished.
Banner Template Details Screen References
Layout
This section allows you to select how the banner is positioned on your website.
Layout
Description
Position Options
Center Rounded
Displays a banner with rounded corners in the center of the screen.
Default
Choices Banner
Displays a banner that features the categories of your site's cookies and allows the user to configure their preferences without having to access the full Preference Center.
Default
Flat
Displays a banner across the full width of the screen.
Bottom
Top
Floating Flat
Displays a half-width banner on one side of the screen.
Bottom Left
Bottom Right
Floating Rounded
Displays a half-width banner with rounded corners on one side of the screen.
Bottom Left
Bottom Right
Floating Rounded Corner
Displays a third-width banner with rounded corners on one side of the screen.
Bottom Left
Bottom Right
Floating Rounded Icon
Displays a banner with rounded corners and an icon across the bottom of the screen.
Default
No Banner
Displays the Preference Center at the first layer without a banner.
Note
If you do not want to display a modal when the user first visits your site and prefer to provide a link elsewhere for the user to update consent preferences, ensure you uncheck the Show Banner option in the geolocation rule.
Additionally, selecting the No Banner layout option in the template does not have the same functionality as unchecking Show Banner in a geolocation rule.
This section allows you to customize colors for buttons, text, and the background of the Banner, in addition to other styling options. You can also add a custom logo.
Note
The recommended color contrast ratio is 4.5:1 for WCAG compliance. You will see a warning in the tool if the contrast ratio is below the recommended guidelines.
Field
Description
Accept & Reject Button Color
Select the color for the buttons on the banner.
Continue Without Accepting Link Color
Select the color for the Continue Without Accepting link text.
Save Choices Button
Select the color for the Save Choices button.
Button Text Color
Select the color of the text on the buttons.
Text Color
Select the color of the text on the banner.
Background Color
Select the background color for the banner.
Link Text Color
Select the Cookie Policy link color.
Accordion Background Color
Select the color for the accordion background.
Note
Only applicable if you do not override Banner styling in the Preference Center.
Manage Preferences Button Color
Select the color of the Preference Center button.
Note
Only applicable if Cookie Settings is configured as a button on the Banner in the Content section.
Manage Preferences Link Color
Select the color for the Preference Center link.
Note
Only applicable if Cookie Settings is configured to be a link on the Banner in the Content section.
Focus Border Color
Select the color for the border of an in-focus element.
Category Container Color
Select the color of the category container.
Note
Only available for Banners with a Choices Banner layout.
Category Style
Select the display style of your categories, either Checkbox or Toggle.
Note
Only available for Banners with a Choices Banner layout.
Your Logo
Click the Upload button to upload a custom logo image.
The optimum size for a logo in the Banner:
Height: 60px
Width: 60px
Supported file formats are PNG, JPG, and JPEG with a maximum size of 2MB.
Company Logo Screen Reader Value (aria-label)
Enter screen reader text for your custom logo.
Remove Logo
Click to remove your logo file.
Custom CSS
Enter custom CSS for additional styling of the banner, such as padding, width, etc.
Click the Apply Custom CSS button to display custom CSS in your template preview.
Note
Because there are regular updates to the Cookie Consent application, elements IDs used for CSS can change. OneTrust recommends testing custom CSS added in your template on a staging site before publishing a production CDN script.
This link is optional and can be used alongside the Cookie Policy link.
Imprint Link URL
Enter a URL for the link.
Imprint Link Screen Reader Value (aria-label)
Enter a value for the imprint link aria label.
Partners Link
Field
Description
Partners Link
Display name for a link to the vendor list.
When selected, the Partners Link it will direct the user to the Vendor List within the Preference Center.
Button Set
Field
Description
Show Allow All Button
Enable this setting to show a button on the banner that accepts all cookies and then closes the banner.
Allow All Cookies Button
Enter the text that will appear on the Allow All button.
Show Cookie Settings Button
Enable this setting to show a button or link on the Banner that opens the Preference Center to allow for the granular configuration (e.g., accept or reject) of cookie preferences.
Cookie Settings Button
Enter the text that will appear on the Cookie Settings button.
When using the button in a web page to access the Cookie's Preference Center
Select Display the same Button Text as in banner to display the the same text on the Preference Center as configured on the Banner.
Select Show other text to display custom text. You can add the text you want to display for the Cookie Settings button in the Other Text field.
If Show other text is selected, enter the text for the Cookie Settings button.
Cookie Setting Button Style
Choose how to display Cookie Settings: as a Link or a Button.
Show Reject All Button
Enable this setting to show a button to reject all cookies.
Reject All Button Text
Enter the text that will appear on the Reject All button.
Show Close Button
Enable this setting to show a close button on the Banner. You can select a traditional close button (X) or a Continue Without Accepting link depending on your business needs and compliance requirements.
Screen Reader Value (aria-label)
If Close button is selected, enter the screen reader text for the Close button aria label.
Note
Aria labels are metadata for page elements without text. When a site visitor is using a screen reader or similar assistive technology, the aria label is used to identify the element.
Continue Without Accepting link
If Continue Without Accepting Link is selected, enter the text to display for the Continue Without Accepting link.
Note
This option leaves the consent “as-is” based on the default consent model configured in the geolocation rules.
Opt Out Signal
Field
Description
Enable Opt-Out Signal Notification
Enable the setting to display a notification on your cookie Banners and Preference Center that the opt-out preference signal has been honored.
The notification will display if any of these three conditions are met:
A user has explicitly opted out of any cookie categories in the Banner or Preference Center.
Notification
Enter the notification text to display to your end users.
Behavior
This section allows you to configure different behaviors for the Banner.
Field
Description
Banner Focus
Enable the setting to define the initial focus upon banner load by one of the options found below.
Initial Focus - Banner
Select this option to direct the initial focus to the banner when the banner is loaded. After the banner is closed or interacted with, the focus will be the body of the page.
Initial Focus - Link, Button
Select this option to direct the initial focus to the Cookie Policy link or the first link or button that displays when the Banner loads. After a user interacts with or closes the Banner, the focus will be the first tabbable element.
Disable the setting to allow the focus to follow the natural order for the elements as they appear on the page.
Require Banner Interaction
Enable to prevent access to the site until a user accepts or rejects cookies or changes settings. This creates an overlay on the site that forces the user to interact with the Banner before proceeding to the site.
Banner pushes down page
Enable to insert the Banner above the page header instead of as an overlay.
Note
Only available for Banners with a Flat layout and Top position.
Banner Animation
Select an animation option to determine how the banner appears.
Slide In
Fade In
Remove Animation
Use Relative Font Sizes
Enable to make the font sizes on the banner and preference center relative to your base HTML defined font size.
To manage Banner languages
The Language field displays all languages that are available for a template. Only languages that are enabled for the template will appear in the selection menu.
You can add additional languages for the banner and select from the Advanced Languages section to cover additional language HTML code options that may be used on your website. For more information on how OneTrust language detection can work on your website, see the Enable Language Detection on Scripts section in Publishing and Implementing Cookie Consent Scripts.
Note
Only out-of-the-box OneTrust Banner text is automatically translated for applicable languages. Any custom text changes made to a template are not automatically translated to other languages. For these changes to translate, you must provide your own translations in the template.
Tip
In your banner script, you can define language codes using underscores or hyphens.
Example: en-US or en_US.
On the Cookie Consent menu, select Templates. The Templates screen appears.
Click on the name of the template. The Template Details screen appears.
Click the Manage Languages button. The Manage Languages modal appears.
Select the checkboxes for the languages you want to enable. You can select a new default language by selecting the check box in the Default column.
Note
If you want to select languages based on locality, enable the Show Advanced Languages setting.
Click the Save button.
Things to Know: Enhancing Banner Performance
You can leverage the following configurations to potentially increase page load speed and improve Banner performance:
Remove the banner load animation by selecting Remove Animation in the Banner Animation field. For more information, see Behavior.
