Customizing the Preference Center Template
You can customize the layout, styling, content, and cookie category configuration of your preference center. This allows you to create a look and feel that matches your organization's branding style.
What is a Preference Center?
A Cookie Consent Preference Center is a modal that allows users to configure cookie consent preferences. Typically, there is a link to access the Preference Center on the site as well as the cookie Banner, if one is available.
To customize a Preference Center template
Preference Centers can be customized and created in two ways. This article covers creating and customizing your preference center through the Templates section of the Cookie Consent application.
Preference Center Configuration Options
Layout
This section allows you to select how the Preference Center is positioned on your website.
- Field
- Description
- Tab
-
Select to display a centered, tabbed layout.
- Center
-
Select to display a centered layout.
- Panel
-
Select to display a left- or right-aligned layout.
- Choose a Position
-
Select a position to configure the alignment of the Preference Center.
Styling
This section allows you to customize colors for buttons, text, and the background of the Preference Center, in addition to other styling options. You can also add a custom logo.
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
- Override Banner Styling
-
Enable this setting if you want the Preference Center to be branded differently than the banner. Styling fields will appear after the setting is enabled.
Note:This setting is disabled by default and the Banner styling settings carry over to the Preference Center. To add a logo to your Preference Center, enable Override Banner Styling.
- Show Object to Legitimate Interest as a button (IAB templates only)
-
Enable this setting to display an Object to Legitimate Interests button under the descriptions of applicable purposes.
When disabled, a setting for Legitimate Interest will be available next to the Consent setting for each purpose.
Note:Only available when you have the Allow Legitimate Interest setting enabled in the Advanced Configuration section.
- Button Color
-
Select the color of buttons in the Preference Center.
- Continue Without Accepting Link Color
-
Select the color for the Continue Without Accepting link text.
- Button Text Color
-
Select the color for the text displayed on buttons.
- Text Color
-
Select the color for the text in the Preference Center.
- Background Color
-
Select the color for the background of the Preference Center.
- Link Text Color
-
Select the color for the Link text
- Accordion Background Color
-
Select the color for the background of the cookie category descriptions accordion.
Note:Applicable when you select or +/- as the accordion type.
- Focus Border Color
-
Select the color for the border of an in-focus element.
- Legitimate Interest Button Background (IAB templates only)
-
Select the color for the background of the Object to Legitimate Interests button.
Note:Only available if the Show Object to Legitimate Interest as a button setting is enabled.
- Legitimate Interest Button Text (IAB templates only)
-
Select the color for text displayed on the Object to Legitimate Interests button.
Note:Only available if the Show Object to Legitimate Interest as a button setting is enabled.
- Accordion Type
-
Select the accordion style or remove the accordion.
Note:These three options determine how the cookie category descriptions display.
- Your Logo
-
Click the Upload button to select a logo image to display on the Preference Center.
Click the Reset to default logo button to reset the logo to the default.
Tip:The optimum size for a logo in the Preference Center:
Height: 50px; Width: 140px.
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 the company logo.
- Button Logo
-
Click the Upload button to select a logo image to display for the Persistent Cookie Settings hover button.
Click the Revert to Default button to reset the logo to default.
Note:This option is available only if you enable the Enable persistent Cookie Settings hover button setting in the Button Set section.
- Custom CSS
-
Enter custom CSS to further style the preference center to match your organization's branding needs.
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 test script and place the script on a staging website. For more information, see Publishing and Implementing Cookie Consent Scripts.
Content
This section allows you to configure text for various fields on the Preference Center, including buttons and links.
Title & Description
- Field
- Description
- Title
-
Enter the text for the title of the Preference Center.
- Preference Center Screen Reader Value (Region Landmark)
-
Enter the screen reader value for the Preference Center title.
- Description (non-IAB templates only)
-
Enter a description to be displayed in the Preference Center.
To add HTML to this section, disable HTML sanitization. For more information, see Disabling HTML Sanitization.
IAB Enforced Description (IAB templates only)
This section allows you to select different types of IAB descriptions.
These descriptions are enforced by IAB and cannot be edited. To add custom text to an IAB enforced description, please contact OneTrust Support or your account representative.
- Field
- Description
- Version
-
This field is not configurable.
- IAB Enforced Description
-
The IAB-source description populates this field.
Cookie Policy Link
- Field
- Description
- Cookie Policy Link
-
Enter text to display for the Cookie Policy link at the end of your Preference Center description.
- Cookie Policy URL
-
Enter a URL for the Cookie Policy.
- Screen Reader Value (aria-label)
-
Enter a screen reader value for the Cookie Policy link.
When configured for a CTV Preference Center, the Cookie Policy Link will display as a QR code on the Preference Center and Vendor Details tabs.
For more information, see Customizing the CTV Preference Center 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.
Vendor List Link
- Field
- Description
- Vendor List Link
-
Enter a name for the link to the unfiltered Vendor List.
- Vendor List Link Screen Reader Value (aria-label)
-
Enter a screen reader value for the Vendor List link.
Categories & Purposes List
- Field
- Description
- Title
-
Enter a title for the Categories and Purposes list.
- Show Always Active Label
-
Enable this setting to display the Always Active label. This label displays for the categories (and/or IAB purposes) configured with a notice-only consent model, such as Strictly Necessary.
- Always Active Label
-
Enter the text you want to display when a category or purpose is always active.
- Always Inactive Label
-
Enter the text you want to display when a category or purpose is always inactive.
- Show Illustrations Link Text
-
Enter text for the link to illustrations.
- Illustrations Label
-
Enter text for the illustrations label.
- Links Position
-
Select Before Description Details or After Description Details.
Button Set
- Field
- Description
- Allow All Button
-
Text displayed on the Allow All button.
Remove text from this field to prevent the Allow All button from displaying.
- Show Consent Status Labels
-
Enable this setting to display consent status text labels alongside purpose toggles in the preference center.
- Reject All Button
-
Text displayed on the Reject All button.
For IAB templates only, when the Show Reject All Button setting is enabled, you can configure how the button interacts with Legitimate Interest.
- Confirm Button
-
Enter text for the Confirm Choices button.
- Show Close Button
-
Enable to show the Close button. This allows the user to exit the Preference Center without confirming choices.
You can select a traditional close button (X) or a Continue Without Accepting link depending on your business needs and compliance requirements.
- Close Button Screen Reader Value (aria-label)
-
If the Close button is selected, enter screen reader text for the Close button.
- Continue Without Accepting Link
-
If the Continue Without Accepting Link is selected, enter text 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.
- Object to Legitimate Interests (IAB templates only)
-
Enter text to show on the Object to Legitimate Interests button.
Note:Only applicable if the Show Object to Legitimate Interest as a button setting is enabled.
- Remove Objection (IAB templates only)
-
Enter text to display for the Remove Objection link.
Note:Only applicable if the Show Object to Legitimate Interest as a button setting is enabled.
- Objection Applied (IAB templates only)
-
Enter text to display when an objection to Legitimate Interests is applied.
- Enable persistent Cookie Settings hover button
-
Enable to display a button in the bottom left of your website to resurface the Preference Center.
- Enable dynamic rendering for persistent Cookie Settings button (IAB templates only)
-
When this setting is enabled, OneTrust removes the persistent Cookie Settings hover button if other links to access the Preference Center are detected on the page.
For IAB templates, the persistent Cookie Settings hover button is automatically enabled to allows users to easily access the Preference Center to update their consent preferences.
- Button Layout
-
Click and drag to arrange the placement of buttons on the banner.
Note:If a button’s text exceeds 20 characters, the buttons will be displayed in a stacked layout.
Vendor List
Non-IAB Templates
- Field
- Description
- Allow All Consent Label
-
Enter text to display for Allow All Consent.
- Back Button Screen Reader Value (aria-label)
-
Enter screen reader text for the Back button.
- Show General Vendors
-
Enable this setting to display your configured General Vendors.
For more information, see Adding General Vendors to Vendor Lists.
You can configure the following fields if this setting is enabled:
View Vendor List Label
Enter text to display for the Vendor List button.
View Vendor List Screen Reader Value (aria-label)
Enter screen reader text for the View Vendor List button.
View Privacy Policy
Enter text to display for the View Privacy Policy link.
Vendor Level Opt-Out
Enable this setting to enable users to individually allow or reject vendors based on their preferences
Note:If a cookie within the vendor belongs to the Strictly Necessary or Always Active category, the vendor level opt-out option will not be available to the user.
- Show Cookies List
-
Enable to show the Cookies List within the Vendor List and choose the cookie properties to display.
You can configure the following fields if this setting is enabled:
Cookie List Title
Enter text to display for the Cookie List title.
Vendor List Title
Enter text to display for the Vendor List title.
Cookie List Filter Screen Reader Value (aria-label)
Enter screen reader text for the Cookie List filter.
First-Party Cookies
Enter text to display that identifies first-party cookies.
Show Host
Select to display a cookie's host.
Show Duration
Select to display a cookie's duration.
Show Type
Select to display a cookie's type.
Show Category
Select to display a cookie's category.
Show Description
Select to display a cookie's description.
Link to Cookiepedia
Select to display a link to Cookiepedia.
Name
Enter text to display for the cookie name.
Duration Label
If Show Duration is selected, enter text for the Duration label.
Type Label
If Show Type is selected, enter text for the Type label.
Category Label
If Show Category is selected, enter text for the Category label.
Description Label
If Show Description is selected, enter text for the Description label.
Host Label
If Show Host is selected, enter text for the Host label.
First Party
Enter text for the First Party label.
Third Party
Enter text for the Third Party label.
IAB Templates
- Field
- Description
- Title
-
Enter text to display for the Vendor List title.
- Description
-
Enter text to display for the Vendor List description.
- View Privacy Policy
-
Enter text to display for the View Privacy Policy link.
- Allow All Consent Label
-
Enter text to display for Allow All Consent.
- Back Button Screen Reader Value (aria-label)
-
Enter screen reader text for the Back button.
- IAB Vendors List Link
-
Enter text to display for the link to the IAB Vendor List.
- View IAB Vendor List Screen Reader Value
-
Enter screen reader text for the IAB Vendor List.
- IAB Vendor Label
-
Enter text to display for the IAB Vendor label.
- Max Duration Label
-
Enter text to display for the Max Duration label.
- Non-cookie Usage Description
-
Enter text to display for the Non-cookie Usage Description.
- Device Storage Disclosure Label
-
Enter text to display for the Device Storage Disclosure label.
- Identifier Label
-
Enter text to display for the Identifier label.
- Type Label
-
Enter text to display for the Type label.
- Purposes
-
Enter text to display for the Purposes label.
- Domain Label
-
Enter text to display for the Domain label.
- Domains Used
-
Enter text to display for the Domains Used label.
- Use
-
Enter text to display for the Use label.
- Use Google’s Additional Vendors
-
Enable this setting to leverage Google's Additional Vendors. Learn more here.
- Field
- Description
- Google Vendors Label
-
Enter text to display for the Google Vendors label.
- Show General Vendors
-
Enable this setting to display your configured General Vendors.
For more information, see Adding General Vendors to Vendor Lists.
You can configure the following fields if this setting is enabled:
View Vendor List Label
Enter text to display for the Vendor List button.
View Vendor List Screen Reader Value (aria-label)
Enter screen reader text for the View Vendor List button.
View Privacy Policy
Enter text to display for the View Privacy Policy link.
Vendor Level Opt-Out
Enable this setting to enable users to individually allow or reject vendors based on their preferences
Note:If a cookie within the vendor belongs to the Strictly Necessary or Always Active category, the vendor level opt-out option will not be available to the user.
- Show Cookies List
-
Enable to show the Cookies List within the Vendor List and choose the cookie properties to display.
You can configure the following fields if this setting is enabled:
Cookie List Title
Enter text to display for the Cookie List title.
Vendor List Title
Enter text to display for the Vendor List title.
Cookie List Filter Screen Reader Value (aria-label)
Enter screen reader text for the Cookie List filter.
First-Party Cookies
Enter text to identify first-party cookies.
Show Host
Select to display a cookie's host.
Show Duration
Select to display a cookie's duration.
Show Type
Select to display a cookie's type.
Show Category
Select to display a cookie's category.
Show Description
Select to display a cookie's description.
Link to Cookiepedia
Select to display a link to Cookiepedia.
Name
Enter text to display for the cookie name.
Duration Label
If Show Duration is selected, enter text for the Duration label.
Type Label
If Show Type is selected, enter text for the Type label.
Category Label
If Show Category is selected, enter text for the Category label.
Description Label
If Show Description is selected, enter text for the Description label.
Host Label
If Show Host is selected, enter text for the Host label.
First Party
Enter text for the First Party label.
Third Party
Enter text for the Third Party label.
Filter
- Field
- Description
- Apply Filter
-
Enter text for the Apply Filter button.
- Cancel Filter
-
Enter text for the Cancel Filter button.
- Clear Filter
-
Enter text for the Clear Filter button.
- Search Vendor List
-
Enter text to display in the Search field on the Vendor List.
- Search Cookie List
-
Enter text to display in the Search field on the Cookie List.
- Host Not Found Label
-
Enter text for the Host Not Found label.
- Vendors Not Found Label
-
Enter text for the Vendors Not Found label.
- Screen Reader Announcement for Apply Action
-
Enter screen reader text to announce an applied action.
- Screen Reader Announcement for Filter Clear Action
-
Enter screen reader text to announce that filter are cleared.
User ID
You must enable the Capture Records of Consent setting in the template's geolocation rule in order for these fields to populate. For more info, see Configuring Geolocation Rules .
- Field
- Description
- Show User ID
-
Enable to display a user ID associated with a user on the Preference Center.
- Title
-
Enter a title for the user ID.
- Show Description
-
Enable to display a description of the user ID.
- Description
-
Enter a description.
- Enable Timestamp
-
Enable to display a timestamp of the user's most recent consent configuration (UTC).
If no previous interactions exist, this will display a timestamp for the first time users make a selection on the Banner or Preference Center.
- Timestamp Title
-
Enter a title for the timestamp.
- Not Yet Consented Text
-
Enter text to display before consent is granted.
- Show Divider Bar (mobile Preference Centers only)
-
Enable to show a divider bar.
Opt-In/Opt-Out Preferences
- 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.
Global Opt-Out Settings
The Global opt-out flow feature is under Public Preview for customers with solution packaging only. Please contact OneTrust Support to request early access.
You can allow end users to opt out of a purpose or purpose group across all of their linked devices, services, and accounts at once. A DSR request based on the settings your configure below will be automatically created to process the user's opt out.
- Field
- Description
- Apply opt‑out across all linked devices, services, and accounts
-
Enable this setting to apply opt-out requests to all known identifiers associated with the user’s account. If the user is logged‑in at time of request, the opt‑out will be applied automatically.
- Select purposes/purpose group
-
Select the purpose or purpose group to which the opt-out applies.
- Date format
-
Select a date format for the opt-out request.
- Organization
-
Select the managing organization to assign to the opt-out request.
- Approver
-
Select the approver for the opt-out request.
- Default fulfillment workflow
-
Select the workflow for the opt-out request. The workflows that populate are based on what workflows are available to the selected organization.
For more information on available workflows and supported languages, see Managing Language Options for Privacy Rights.
- Default days to respond
-
Enter the default number of days in which requests must be completed.
- Default reminder
-
Enter the default number of days before the deadline that the approver should be reminded of outstanding requests.
- Allow users to request global opt-out
-
Enable this setting to allow unknown users to request an opt-out. The banner will display the option for the user to submit their email to apply the opt-out request across all their devices, services, and accounts.
- Instructional message
-
Enter the instructional message to display to end users.
Advanced Configuration
To enable Legitimate Interest (IAB templates only)
Updating to the new Preference Center template
You can enable the New Preference Center Template Design on the Template Details screen. These new templates have been designed to provide a smoother user interface and improve WCAG compliance. These changes will not take effect until the domain is published.
Changes to the Preference Center CSS code mean that pages with custom CSS code may not function as expected. The Preference Center template can be reverted if problems occur. The changes are described in the View CSS Changes link.
To manage Preference Center 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 Preference Center 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 .
Only out-of-the-box OneTrust Preference Center 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.
In your Preference Center script, you can define language codes using underscores or hyphens.
Example: en-US or en_US.