Cookie Control from CIVIC

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.

If you are interested in using IAB Europe's Transparency and Consent Framework, please read the dedicated article Text for TCF v2.0.

Anchor point for Main Preference Panels Main Preference Panels

titleThe 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.
introThe main introductory text that appears after the title and above all other controls.
acceptSettingsThe text used within the general, affirmative button for opting into all available options.
rejectSettingsThe text used within the general, negative button for objecting to all available options.
necessaryTitleThe heading (h3) text used to announce manual user actions for third party cookies.
necessaryDescriptionThe main body text used to describe manual user actions for third party cookies.
closeLabelThe text used to describe the control button to dismiss Cookie Control. Depending on closeStyle this property may only be read by screen readers.
cornerButtonThe 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 Main Preference Panel Controls

onThe descriptive text use on the preference control to indicate the user has consented.
offThe descriptive text use on the preference control to indicate the user has not consented.
thirdPartyTitleThe heading (h3) text used to introduce the category for fundamental cookies, which the user cannot object to.
thirdPartyDescriptionThe text used within the general, negative button for objecting to all available options.

Anchor point for Notification Panels Notification Panels

notifyTitleThe heading (h1) text used to announce the use of cookies for initial displays such as notify .
notifyDescriptionThe main body text used to describe the use of cookies for initial displays such as notify .
acceptThe text used within the general, affirmative button for opting into all available options.
rejectThe text used within the general, negative button for objecting to all available options.
settingsThe text used within the control button to open the main preference panel.

Anchor point for Default Values 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 Locale based translations

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:

localeDefines who the contained language settings would be appropriate for.
modeDetermines the mode Cookie Control will run in for a certain locale.
locationAn array holding the ISO 3166 two letter country code, or ISO code for states, for which this locale is valid.
optionalCookiesThe optionalCookies array mirrors that of the default optionalCookies array, though only expects each object to contain a localised value for label and description
textThe 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: