Customizing the Banner Template

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.

  1. On the Cookie Consent menu, select Templates. The Templates screen appears.

  2. Click on the name of the template you want to customize. The Template Details screen appears.

  3. Select the Web Browser button for the Platform.
  4. Go to the Banner tab. Configurable elements (left) and a live preview of your Banner (right) display.
  5. Complete the fields. For more information, see Layout, Styling, Content, and Behavior.
  6. Click the Save button for each template section you configure.
  7. 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.

For more information, see Configuring Geolocation Rules.

Default

Styling

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.

To test custom CSS, add CSS to your template, publish the CDN script and place the script on a website. For more information, see Publishing and Implementing Cookie Consent Scripts.

Content

This section allows you to configure text for various fields on the Banner, including buttons and links.

Title & Description



Field
Description
Banner Title

Enter the title of the banner.

Notice Description

Enter a short description of the Privacy Notice.

Note:

To add HTML to this section, disable HTML sanitization. For more information, see Disabling HTML Sanitization.

Cookie Policy Link



Field
Description
Show Cookie Policy Link

Enable to show the Cookie Policy link at the end of your banner description.

Cookie Policy Link

Enter the text to appear on for the Cookie Policy link.

Cookie Policy URL

Enter the URL for the Cookie Policy.

Screen Reader Value (aria-label)

Enter the text for the screen reader value

Note:

When configured for a CTV banner, the Cookie Policy Link will display as a QR code.



For more information, see Customizing the CTV Banner Template.

Imprint Link



Field
Description
Show Imprint Link

Enable to display an imprint link on the banner.

Note:

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.

This setting configures the text that is displayed when implementing the Do Not Sell & Cookie Setting Button script. For more information, see Publishing and Implementing Cookie Consent Scripts.

Other text

If Show other text is selected, enter the text for the Cookie Settings button.

Cookie settings 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 choose the button option that best fits your business needs and compliance requirements.

  • Select Show Close Button (X) to display a traditional close button (X).

  • Select Show continue without accepting link to display a Continue without accepting link.

Note:

The Close button (X) is designed to close the banner without actively accepting or rejecting cookies. It cannot be reconfigured to perform the same action as the Accept all button.

Screen reader value (aria-label)

If Close button (X) 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.

Button layout

Click and drag to arrange the placement of buttons on the banner.



Opt Out Signal



Field
Description
Enable Two-Step Opt In

Enable this setting to display a confirmation modal on web banners and preference centers for users to reconfirm their choice after previously opting out.

Enable Opt-Out Signal Notification

Enable the setting to display a notification on cookie banners and preference centers that the opt-out preference signal has been honored.

Note:

This setting is always enabled for CPRA and CCPA templates.

This message is displayed when a browser signal (e.g., Global Privacy Control) is detected and respected before the user provides consent.

Enter the notification text to display to your end users.

This message is displayed after the user provides consent, confirming that their opt-out preference signal was honored.

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

External Links

  • Require external link icon

    Enable the to add an icon that indicates if a link is external. The links will open in a new browser window.

  • Use custom icon

    If the Require external link icon setting is enabled, you can enable this setting to display a custom icon for external links.

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.

  1. On the Cookie Consent menu, select Templates. The Templates screen appears.

  2. Click on the name of the template. The Template Details screen appears.

  3. Click the Manage Languages button. The Manage Languages modal appears.


  4. 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.

  5. 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:

If you continue to experience performance issues, please contact OneTrust Support here.