This site makes use of third-party cookies. Read more in our\n privacy policy.
`,\n // Policy link or `learn more` link can be eaither par of the description html or standalone link bellow description with the use of configuration bellow\n policyLink: {\n href: '#', \n text: 'More info'\n },\n \n // Button labels based on state and preferences.\n button: {\n // The default button label.\n default: 'Save preferences',\n // Shown when `acceptAllButton` is set, and no option is selected.\n acceptAll: 'Accept all',\n },\n // ARIA labels to improve accessibility.\n aria: {\n button: 'Confirm cookie settings',\n tabList: 'List with cookie types',\n tabToggle: 'Toggle cookie tab',\n },\n },\n}\n```\n\n## API\n\n- [CookieConsentDialog()](#cookieconsentoptions-object)\n- [getDialog()](#getdialog)\n- [showDialog()](#showdialog)\n- [hideDialog()](#hidedialog)\n- [isAccepted()](#isacceptedid-string)\n- [getPreferences()](#getpreferences)\n- [on()](#on)\n\n### CookieConsent(options: object)\n\nWill create a new instance.\n\n```js\nconst cookieConsent = CookieConsentDialog({\n cookies: [\n // ...\n ]\n});\n```\n\nTo make the instance globally available (for instance to add event listeners elsewhere), add it as a global after the instance has been created:\n\n```js\nwindow.CookieConsentDialog = CookieConsentDialog();\n```\n\n### getDialog()\n\nWill fetch the dialog element, for example to append it at a custom DOM position.\n\n```js\ndocument.body.insertBefore(cookieConsent.getDialog(), document.body.firstElementChild);\n```\n\n### showDialog()\n\nWill show the dialog element, for example to show it when triggered to change settings.\n\n```js\nel.addEventListener('click', e => {\n e.preventDefault();\n cookieConsent.showDialog();\n});\n```\n\n### hideDialog()\n\nWill hide the dialog element.\n\n```js\nel.addEventListener('click', e => {\n e.preventDefault();\n cookieConsent.hideDialog();\n});\n```\n\n### isAccepted(id: string)\n\nCheck if a certain cookie type has been accepted. Will return `true` when accepted, `false` when denied, and `undefined` when no action has been taken.\n\n```js\nconst acceptedMarketing = cookieConsent.isAccepted('marketing'); // => true, false, undefined\n```\n\n### getPreferences()\n\nWill return an array with preferences per cookie type.\n\n```js\nconst preferences = cookieConsent.getPreferences(); \n\n// [\n// {\n// \"id\": \"analytical\",\n// \"accepted\": true\n// },\n// {\n// \"id\": \"marketing\",\n// \"accepted\": false\n// }\n// ]\n```\n\n### on(event: string)\n\nAdd listeners for events. Will fire when the event is dispatched from the CookieConsent module.\nSee available [events](#events).\n\n```js\ncookieConsent.on('event', eventHandler);\n```\n\n## Events\n\nEvents are bound by the [on](#onevent-string) method.\n\n- [update](#update)\n\n### update\n\nWill fire whenever the cookie settings are updated, or when the instance is constructed and stored preferences are found. It returns the array with cookie preferences, identical to the `getPreferences()` method.\n\nThis event can be used to fire tag triggers for each cookie type, for example via Google Tag Manager (GTM). In the following example trackers are loaded via a trigger added in GTM. Each cookie type has it's own trigger, based on the `cookieType` variable, and the trigger itself is invoked by the `cookieConsent` event.\n\nExample:\n\n```js\ncookieConsent.on('update', cookies => {\n const accepted = cookies.filter(cookie => cookie.accepted);\n const dataLayer = window.dataLayer || [];\n accepted.forEach(cookie => dataLayer.push({ \n event: 'cookieConsent', \n cookieType: cookie.id,\n }));\n});\n```\n\n## Styling\n\nNo styling is being applied by the JavaScript module. However, there is a default stylesheet in the form of a [Sass](https://sass-lang.com/) module which can easily be added and customized to your project and its needs.\n\n### Stylesheet\n\nView the [base stylesheet](https://https://github.com/brackets/cookie-consent-dialog/blob/master/src/scss/styles.scss). \n\nNote: no vendor prefixes are applied. We recommend using something like [Autoprefixer](https://github.com/postcss/autoprefixer) to do that automatically.\n\n### Customization\n\nDefault SCSS variables are listed bellow:\n\n```scss\n$cookie-consent-breakpoint: 40em !default;\n$cookie-consent-text: #000000 !default;\n$cookie-consent-bg: #fff !default;\n$cookie-consent-btn-text: #fff !default;\n$cookie-consent-btn-bg: #f5a816 !default;\n$cookie-consent-horizontal-padding: 24px !default;\n$cookie-consent-border-radius: 4px !default;\n```\n\nThese can be edited by defining them before importing base stylesheet file. For example like this:\n\n```scss\n$cookie-consent-btn-text: #000;\n$cookie-consent-btn-bg: #bada55;\n\n@import \"~@brackets/cookie-consent-dialog/src/scss/index\";\n```\n","readmeFilename":"README.md"}