{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"redocly_category":"Products","product_name":"Integration Hub","type":"markdown"},"seo":{"title":"Using the TD JavaScript Consent UI Add on","description":"Treasure Data Product Documentation · Collect and Unify · Segment and Activate · Experiment and Analyze · Decisioning Automate with AI Scale and Trust.","siteUrl":"https://docs.treasuredata.com","lang":"en-US","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"using-the-td-javascript-consent-ui-add-on","__idx":0},"children":["Using the TD JavaScript Consent UI Add on"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This add-on provides an example of how you can use TD JavaScript SDK Consent Extension APIs with your UI to build fully customizable consent management. It enables you to create a cookie banner and a web form for managing consent preferences, as shown in the following examples."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#banner"},"children":["Banner"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#form"},"children":["Form"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#supported-browsers"},"children":["Supported Browsers"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#installing-the-add-on"},"children":["Installing the Add-On"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#polyfill"},"children":["Polyfill"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#npm"},"children":["npm"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#configuring-the-ui"},"children":["Configuring the UI"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#showbanner"},"children":["showBanner()"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#openconsentmanager"},"children":["openConsentManager"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#full-example"},"children":["Full example"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"banner","__idx":1},"children":["Banner"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A small overlay displays at the top of your website to let users know that the website is using cookies (and other similar technologies) to collect data for improving user experiences. Users can choose to adjust their preferences as they want."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/banner.fc29920901be8ceb7238a80204a71894d84f4bc8191317c884b038e7c7a30325.ad50cbca.png","alt":""},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"form","__idx":2},"children":["Form"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A web form for managing consent preferences"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/form.659f4a56e5575c85b1ac62b7cd783ddcb33004db52f560fe712c95c8b19dccf1.ad50cbca.png","alt":""},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"supported-browsers","__idx":3},"children":["Supported Browsers"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"IE/Edge"},"children":["IE/Edge"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Chrome"},"children":["Chrome"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Firefox"},"children":["Firefox"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Safari"},"children":["Safari"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["IE11Edge 15 and higher"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["60 and higher"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["60 and higher"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["9 and higher"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"installing-the-add-on","__idx":4},"children":["Installing the Add-On"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This add-on depends on ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://github.com/treasure-data/td-js-sdk"},"children":["Treasure Data JavaScript SDK"]}," to work properly, you need to load Treasure Data JavaScript SDK into your website first. For more information, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://github.com/treasure-data/td-js-sdk#installing"},"children":["how to install td-js-sdk"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the following JavaScript snippet to your website. We recommend putting it at the end of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["body"]}," tag."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<script src=\"link to js file\"></script>  \n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When the script finishes loading, an object ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TDConsentManager"]}," is available in the browser’s global context. You can use that object to set up your configurations accordingly."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"polyfill","__idx":5},"children":["Polyfill"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The add-on uses Web Component to build the UIs and includes the following script snippet in your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<head>"]}," tag."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<script src=\"<https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0\"></script>>  \n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Some features might not be available in legacy browsers such as Internet Explorer 11. This loader dynamically loads the minimum polyfill bundle, using feature detection."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"},"children":["Web Component loader"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"npm","__idx":6},"children":["npm"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This NPM package works in ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["browser only."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"npm install --save td-consent-ui  \n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Yarn"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"yarn add td-consent-ui  \n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"import TDConsentManager from 'td-consent-ui'\n// or\nconst TDConsentManager = require('td-consent-ui')  \n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuring-the-ui","__idx":7},"children":["Configuring the UI"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When the scripts are ready, you can start configuring the UIs."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"    TDConsentManager.setConfig({\n      sdk: td, // Treasure Data JavaScript SDK instance\n      container: 'selector',\n      bannerContent: 'banner content',\n      bannerSubContent: 'banner sub content',\n      dialogTitle: 'dialog title',\n      dialogDescription: 'description',\n      cancelButtonText: 'Cancel',\n      saveButtonText: 'Save'\n    })  \n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Parameter"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Type"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]}]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["sdk"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object (required)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Treasure Data JavaScript SDK instance"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["container"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String/Object (optional)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Element selector or DOM object.Default ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["document.body"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["bannerContent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String (required)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The banner's content"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["bannerSubContent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String (required)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Text of the link to the web form"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["dialogTitle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String (optional)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Form's title"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["dialogDescription"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String (optional)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Form's description"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["cancelButtonText"]}," :"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String (optional)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Cancelling button's text.Default ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Cancel"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["saveButtonText"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String (optional)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Saving button's text.Default ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Save Settings"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After finishing the setup, you can use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showBanner"]}," to show the banner or you can use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["openConsentManager"]}," to show the web form and let users adjust their preferences"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"showbanner","__idx":8},"children":["showBanner()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Show a small overlay on top of the website to let users know that you are collecting their data to improve performance and user experience."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"TDConsentManager.showBanner()\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"openconsentmanager","__idx":9},"children":["openConsentManager"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Show a web form for managing consent preferences. You can show the web form with your additional consent preferences."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"TDConsentManager.openConsentManager(options)\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Optionally, you can use the following parameters to customize your consent preferences."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Parameter"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Type"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]}]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["options.customConsents"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object (optional)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object - Additional consents"]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"TDConsentManager.openConsentManager({\n  customConsents: {\n    'marketing': { // <--- purpose\n      description: 'description of consent',\n      datatype: 'Attibutes',\n      status: 'given | refused',\n      expiry_date: 'YYYY-MM-DD',\n      context_id: 'context_id'\n    },\n    'storing': { // <--- purpose\n      description: 'description',\n      datatype: 'datatype',\n      status: 'given | refused',\n      expiry_date: 'YYYY-MM-DD',\n      context_id: 'context_id'\n    },\n    'recommendations': { // <--- purpose\n      description: 'description',\n      datatype: 'datatype',\n      status: 'given | refused',\n      expiry_date: 'YYYY-MM-DD',\n      context_id: 'context_id'\n    }\n  }\n})\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"full-example","__idx":10},"children":["Full example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// ************\n// script.js\n// ************\n!(function () {\n  function successCallback (preferences) {\n    var analytics = preferences['analytics'] || {}\n    if (analytics.status === 'given') {\n      td.setSignedMode()\n      td.unblockEvents()\n    } else if (analytics.status === 'refused') {\n      td.setAnonymousMode()\n      td.blockEvents()\n    }\n\n    td.trackPageview()\n  }\n\n  var td = new Treasure({\n    database: 'database_name',\n    writeKey: '1/xxxxxxxxxx',\n        host: 'in.treasuredata.com',\n        consentManager: {\n          successConsentCallback: successCallback,\n          expiredConsentsCallback: function (consents) {\n            console.log(consents)\n          },\n          failureConsentCallback: function (error) {\n            console.log(error)\n          }\n        }\n      })\n      td.ready(function () {\n        // setup the UIs\n        TDConsentManager.setConfig({\n          sdk: td,\n          bannerContent: 'We use cookies (and other similar technologies) to collect data to improve your experience on our site.',\n          bannerSubContent: 'You can change your preferences at any time'\n        })\n    \n        // check if the preferences exists\n      \t// otherwise don't do the setup again.\n        if (!td.getPreferences()) {\n          var contextId = td.addContext({\n            brand: 'All',\n            domain_name: '',\n            collection_type: 'Whole website',\n            collection_point_id: 'whole_website'\n          })\n    \n          td.addConsents({\n            analytics: {\n              description: 'Consent description',\n              status: td.consentManager.states.GIVEN,\n              datatype: 'Visits',\n              context_id: contextId,\n              expiry_date: '2050-01-01'\n            }\n          })\n    \n          // You might want to save contexts and consents\n          // td.saveContexts()\n          // td.saveConsents()\n    \n          TDConsentManager.showBanner()\n        }\n      })\n    \n      var editPreference = document.querySelector('.edit-preferences')\n      editPreference.addEventListener('click', function (event) {\n        event.preventDefault()\n        TDConsentManager.openConsentManager()\n      })\n    })()\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<!-- ************\nindex.md\n************ -->\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Website Title</title>\n\n  <script src=\"https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>\n  <script type=\"text/javascript\">\n    <!-- Load TD JavaScript SDK here -->\n  </script>\n</head>\n<body>\n  ...\n  <footer>\n    <span><a href=\"#\" class='edit-preferences'>Website Data Collection Preferences</a></span>\n  </footer>\n</div>\n<script src=\"link_to_cdn\"></script>>\n<script src=\"script.js\"></script>\n</body>\n</html>\n","lang":"html"},"children":[]}]},"headings":[{"value":"Using the TD JavaScript Consent UI Add on","id":"using-the-td-javascript-consent-ui-add-on","depth":1},{"value":"Banner","id":"banner","depth":3},{"value":"Form","id":"form","depth":3},{"value":"Supported Browsers","id":"supported-browsers","depth":3},{"value":"Installing the Add-On","id":"installing-the-add-on","depth":1},{"value":"Polyfill","id":"polyfill","depth":3},{"value":"npm","id":"npm","depth":3},{"value":"Configuring the UI","id":"configuring-the-ui","depth":2},{"value":"showBanner()","id":"showbanner","depth":3},{"value":"openConsentManager","id":"openconsentmanager","depth":3},{"value":"Full example","id":"full-example","depth":2}],"frontmatter":{"seo":{"title":"Using the TD JavaScript Consent UI Add on"}},"lastModified":"2026-05-14T07:31:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/using-the-td-javascript-consent-ui-add-on","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}