Text
This article outlines how users may use the text property to overwrite Cookie Control text content with specific wording that better compliments the language and tone of your website.
Cookie Control expects the text property to be a JavaScript Object, with at least one child property.
The number of child properties you wish to add is entirely up to you, as Cookie Control will use sensible defaults for any property not present in your configuration - so you only need to include those that you wish to overwrite.
Anchor point for Main Preference Panels
title | The main heading (h2) that appears first within the main preference panel and, depending on other settings, may become fixed to the top of the panel as the user scrolls. |
intro | The main introductory text that appears after the title and above all other controls. |
acceptSettings | The text used within the general, affirmative button for opting into all available options. |
rejectSettings | The text used within the general, negative button for objecting to all available options. |
necessaryTitle | The heading (h3) text used to announce manual user actions for third party cookies. |
necessaryDescription | The main body text used to describe manual user actions for third party cookies. |
closeLabel | The text used to describe the control button to dismiss Cookie Control. Depending on closeStyle this property may only be read by screen readers. |
cornerButton | The text used as an aria-label to describe the corner control button to toggle Cookie Control's main preference panel. |
Anchor point for Main Preference Panel Controls
on | The descriptive text use on the preference control to indicate the user has consented. |
off | The descriptive text use on the preference control to indicate the user has not consented. |
thirdPartyTitle | The heading (h3) text used to introduce the category for fundamental cookies, which the user cannot object to. |
thirdPartyDescription | The text used within the general, negative button for objecting to all available options. |
Anchor point for Notification Panels
notifyTitle | The heading (h1) text used to announce the use of cookies for initial displays such as notify . |
notifyDescription | The main body text used to describe the use of cookies for initial displays such as notify . |
accept | The text used within the general, affirmative button for opting into all available options. |
reject | The text used within the general, negative button for objecting to all available options. |
settings | The text used within the control button to open the main preference panel. |
Anchor point for Default Values
For convenience, you may extend your configuration with all of the properties discussed on this page and their default values by adding the following snippet:
const config = {
// apiKey and other settings...
text : {
// main preference panels
title: 'This site uses cookies to store information on your computer.',
intro: 'Some of these cookies are essential, while others help us to ' +
'improve your experience by providing insights into how ' +
'the site is being used.',
acceptSettings: 'I Accept',
rejectSettings: 'I Do Not Accept',
necessaryTitle : 'Necessary Cookies',
necessaryDescription : 'Necessary cookies enable core functionality ' +
'such as page navigation and access to secure areas. '+
'The website cannot function properly without '+
'these cookies, and can only be disabled by changing '+
'your browser preferences.',
closeLabel: 'Close Cookie Control',
cornerButton: 'Set cookie preferences',
// main preference panel controls
on: 'On',
off : 'Off',
thirdPartyTitle : 'Some cookies require your attention',
thirdPartyDescription : 'Consent for the following cookies could not be '+
'automatically revoked. Please follow the link(s) '+
'below to opt out manually.',
// notification panels (only accessible for pro licences)
notifyTitle : 'Your choice regarding cookies on this site',
notifyDescription : 'We use cookies to optimise site functionality and '+
'give you the best possible experience.',
accept : 'I Accept',
reject: 'I Do Not Accept',
settings : 'Settings',
}
};
Anchor point for Locale based translations - Pro
Users with a pro licence may use the locales property to offer alternative text options depending on your user's locale, or preferences.
The locales property expects an array of JavaScript objects. Each object represents a new translation that you wish to use and may consist of:
locale | Defines who the contained language settings would be appropriate for. |
mode | Determines the mode Cookie Control will run in for a certain locale. |
location | An array holding the ISO 3166 two letter country code, or ISO code for states, for which this locale is valid. |
optionalCookies | The optionalCookies array mirrors that of the default optionalCookies array, though only expects each object to contain a localised value for label and description |
text | The text object mirrors that of the default text object discussed above. |
The above array works in conjunction with the locale property defined within your main configuration object to determine which locale object should be selected.
The locale property defaults to the user's window.navigator.language
, i.e. the user's browser language so we recommend using ISO language code as the locale property for each object created within the locales array.
An example of how you may configure your locales objects is below: