### npm installation Source: https://github.com/amauric/tarteaucitron.js/wiki/Set-up-npm-EN Command to install tarteaucitron.js using npm. ```bash npm i tarteaucitronjs ``` -------------------------------- ### Script Inclusion (CDN) Source: https://github.com/amauric/tarteaucitron.js/wiki/Initialization-EN Example of how to include the tarteaucitron.js and tarteaucitronInit.js files when using the CDN. ```html ``` -------------------------------- ### yarn installation Source: https://github.com/amauric/tarteaucitron.js/wiki/Set-up-npm-EN Command to install tarteaucitron.js using yarn. ```bash yarn add tarteaucitronjs ``` -------------------------------- ### Script Inclusion (GitHub) Source: https://github.com/amauric/tarteaucitron.js/wiki/Initialization-EN Example of how to include the tarteaucitron.js and tarteaucitronInit.js files when using GitHub. ```html ``` -------------------------------- ### Google Fonts integration example Source: https://github.com/amauric/tarteaucitron.js/wiki/Adding-integrated-service-EN Example of the JavaScript code required to integrate Google Fonts using tarteaucitron.js. ```javascript ``` -------------------------------- ### Create custom service Source: https://github.com/amauric/tarteaucitron.js/blob/master/README.md Example of how to define a custom service in tarteaucitron.js. ```javascript tarteaucitron.services.mycustomservice = { "key": "mycustomservice", "type": "ads|analytic|api|comment|other|social|support|video", "name": "MyCustomService", "needConsent": true, "cookies": ['cookie', 'cookie2'], "readmoreLink": "/custom_read_more", // If you want to change readmore link "js": function () { "use strict"; // When user allow cookie }, "fallback": function () { "use strict"; // when use deny cookie } }; ``` -------------------------------- ### Fallback function example Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-deny-EN This is a basic example of the fallback function that is automatically executed when a user refuses cookies. ```javascript "fallback": function () { "use strict"; // when user deny cookie } ``` -------------------------------- ### CDN Script Tag Source: https://github.com/amauric/tarteaucitron.js/wiki/Set-up-CDN-EN This is the script tag to be added to the section of your HTML file to include the tarteaucitron.js library from a CDN. ```html ``` -------------------------------- ### Loading a script with tarteaucitron.addScript() Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-allow-EN Example of loading the Google AdSense script when the user accepts cookies. ```javascript "js": function () { "use strict"; tarteaucitron.addScript('//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'); } ``` -------------------------------- ### Customize text Source: https://github.com/amauric/tarteaucitron.js/blob/master/README.md Example of how to customize the text translations for tarteaucitron.js. ```javascript tarteaucitronCustomText = { 'support': { 'title': 'Support client', }, 'close': 'Enregistrer et fermer', }; tarteaucitron.init(...); ``` -------------------------------- ### Customize engagement text Source: https://github.com/amauric/tarteaucitron.js/blob/master/README.md Example of how to customize the engagement text for a specific service. ```javascript tarteaucitronCustomText = { 'engage-twitter': 'Follow us on Twitter!' }; ``` -------------------------------- ### Loading a separate JS file after an API Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-allow-EN This example shows how to load a personal script ('useapi.js') only after an API ('urlofyourapi.js') has been loaded and its value is accessible. ```javascript "js": function () { "use strict"; tarteaucitron.addScript('urlofyourapi.js', '', function () { // Here the value returned by the script is available ! :D // and we call our personal script ! tarteaucitron.addScript('/assets/js/useapi.js'); }); } ``` -------------------------------- ### Fallback function with tarteaucitron.fallback() Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-deny-EN This example shows how to use tarteaucitron.fallback() within a service's fallback function to display a message and an 'Allowed' button when cookies are refused. ```javascript "fallback": function () { "use strict"; var id = 'mycustomservice'; tarteaucitron.fallback(['myServiceError'], tarteaucitron.engage(id)); } ``` -------------------------------- ### Handling script return values Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-allow-EN Example of using an anonymous function as the third parameter of tarteaucitron.addScript() to access the value returned by the script. ```javascript "js": function () { "use strict"; tarteaucitron.addScript('urlofyourapi.js', '', function () { // Here the value returned by the script is available ! :D }); } ``` -------------------------------- ### Setting tarteaucitronForceCDN Source: https://github.com/amauric/tarteaucitron.js/wiki/Set-up-GitHub-FR This snippet demonstrates how to set the tarteaucitronForceCDN variable in tarteaucitron.js to specify the path to the tarteaucitron.js-(folder) directory, which is useful if the script is moved or if you encounter path errors. ```javascript tarteaucitronForceCDN = 'votrechemin/tarteaucitron.js-(folder)' ``` -------------------------------- ### Accessing stored API value in useapi.js Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-allow-EN Example of how to access the API value stored in the tarteaucitron.user object within the 'useapi.js' file. ```javascript var yourapi = tarteaucitron.user.yourapi; console.log(yourapi); // It's work, i have access to the api ! ``` -------------------------------- ### Storing API data in tarteaucitron.user object Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-allow-FR This example shows how to store the value returned by an API script into the tarteaucitron.user object if it's not directly accessible in the custom script. This allows the custom script to access the API data. ```javascript "js": function () { "use strict"; tarteaucitron.addScript('urlofyourapi.js', '', function () { // Ici la valeur retourner par le script est disponible ! :D // on stocke la valeur retourner par le script dans l'objet user de tarteaucitron // en imaginant que le script urlofyourapi.js nous donne l'objet yourapi tarteaucitron.user.yourapi = yourapi; // et on appel notre script personnel ! tarteaucitron.addScript('/assets/js/useapi.js'); }); } ``` -------------------------------- ### HTML structure for fallback message Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-deny-EN An example of an HTML div element that can be used to display an error message when a service is disabled due to cookie refusal. ```html

``` -------------------------------- ### Include tarteaucitron.js in HTML Source: https://github.com/amauric/tarteaucitron.js/wiki/Set-up-GitHub-EN This snippet shows how to include the downloaded tarteaucitron.js file in the section of your HTML document. ```html ``` -------------------------------- ### Initialization Script Source: https://github.com/amauric/tarteaucitron.js/blob/master/README.md This script initializes tarteaucitron.js with various configuration options to manage cookie consent. ```html ``` -------------------------------- ### tarteaucitron.js Initialization Configuration Source: https://github.com/amauric/tarteaucitron.js/wiki/Initialization-EN The core initialization configuration object for tarteaucitron.js, defining various settings for cookie consent management. ```javascript tarteaucitron.init({ "privacyUrl": "", /* Privacy policy url */ "hashtag": "#tarteaucitron", /* Open the panel with this hashtag */ "cookieName": "tarteaucitron", /* Cookie name */ "orientation": "middle", /* Banner position (top - bottom) */ "showAlertSmall": true, /* Show the small banner on bottom right */ "cookieslist": true, /* Show the cookie list */ "adblocker": false, /* Show a Warning if an adblocker is detected */ "DenyAllCta" : true, /* Show the deny all button */ "AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */ "highPrivacy": true, /* Disable auto consent */ "handleBrowserDNTRequest": false, /* If Do Not Track == 1, disallow all */ "removeCredit": false, /* Remove credit link */ "moreInfoLink": true, /* Show more info link */ "useExternalCss": false, /* If false, the tarteaucitron.css file will be loaded */ /*"cookieDomain": ".my-multisite-domaine.fr", /* Shared cookie for subdomain website */ "readmoreLink": "/cookiespolicy", /* Change the default readmore link pointing to tarteaucitron.io */ "mandatory": false /* Show a message about mandatory cookies */ }); ``` -------------------------------- ### Force CDN Path in tarteaucitron.js Source: https://github.com/amauric/tarteaucitron.js/wiki/Set-up-GitHub-EN If the tarteaucitron.js file is moved, this line can be added to the beginning of the file to specify the correct path to its associated files. ```javascript tarteaucitronForceCDN = 'yourpath/tarteaucitron.js-(folder)' ``` -------------------------------- ### Using tarteaucitron.addScript() to load an API and a custom script Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-allow-FR This code snippet demonstrates how to use tarteaucitron.addScript() to first load an external API script and then, upon its completion, load a custom JavaScript file. It also shows how to access the returned value from the API. ```javascript "js": function () { "use strict"; tarteaucitron.addScript('urlofyourapi.js', '', function () { // Ici la valeur retourner par le script est disponible ! :D // et on appel notre script personnel ! tarteaucitron.addScript('/assets/js/useapi.js'); }); } ``` -------------------------------- ### Custom Service Declaration Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-init-EN This code block demonstrates how to declare a new custom service within tarteaucitron.js, including its key, type, name, consent requirements, cookies, and associated functions for user consent. ```javascript tarteaucitron.services.mycustomservice = { "key": "mycustomservice", "type": "ads|analytic|api|comment|other|social|support|video", "name": "MyCustomService", "needConsent": true, "cookies": ['cookie', 'cookie2'], "readmoreLink": "/custom_read_more", // If you want to change readmore link "uri": "", // a link to the tool's official web page "js": function () { "use strict"; // When user allow cookie }, "fallback": function () { "use strict"; // when use deny cookie } }; (tarteaucitron.job = tarteaucitron.job || []).push('mycustomservice'); ``` -------------------------------- ### Storing API value in tarteaucitron.user object Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-allow-EN Demonstrates how to store the value returned by an API in the tarteaucitron.user object if it's not directly accessible in the personal script. ```javascript "js": function () { "use strict"; tarteaucitron.addScript('urlofyourapi.js', '', function () { // Here the value returned by the script is available ! :D // we store the value returned by the script in the user object of tarteaucitron // imagining that the urlofyourapi.js script gives us the yourapi object tarteaucitron.user.yourapi = yourapi; // and we call our personal script ! tarteaucitron.addScript('/assets/js/useapi.js'); }); } ``` -------------------------------- ### Accessing API data from the tarteaucitron.user object in a custom script Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-allow-FR This snippet shows how to access the API data that was previously stored in the tarteaucitron.user object within the custom JavaScript file ('useapi.js'). ```javascript var yourapi = tarteaucitron.user.yourapi; console.log(yourapi); // Ça fonctionne, j'ai accès à l'api ! ``` -------------------------------- ### Basic operation Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-allow-EN This is the basic structure of the function that runs automatically when the user accepts cookies. ```javascript "js": function () { "use strict"; } ``` -------------------------------- ### Storing a variable in the user object Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-user-EN Demonstrates how to store an external variable in the tarteaucitron.user object. ```javascript tarteaucitron.user = myVar; ``` -------------------------------- ### Accessing a variable from the user object Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-user-EN Shows how to access a variable stored in the tarteaucitron.user object. ```javascript tarteaucitron.user.myVar ``` -------------------------------- ### Clearing fallback message on cookie acceptance Source: https://github.com/amauric/tarteaucitron.js/wiki/Custom-service-deny-EN This JavaScript code snippet demonstrates how to clear the error message from the parent div when the user accepts cookies, by emptying the innerHTML. ```javascript "js": function () { "use strict"; // When user allow cookie document.getElementByClassName('myServiceError').innerHTML = ''; } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.