Code Examples

Changing banner language programmatically​

If you want to change the banner language programmatically, i.e. via a JS function, you can do so by calling bigidcmp.setLanguage() once the script has already been loaded. Here is an example:

Changing language by calling a function

window.addEventListener(
  'bigidcmp:widget_ready',
  (event) => {
    if (event.detail.uiSettings.language !== 'de') {
      bigidcmp.setLanguage('de'); // The corresponding iso language code must be included within the function. In this example case 'German'
    }
  }
);

You can also add it to a button:

Change language when clicking on button

<button onclick="bigidcmp.setLanguage('de')">German</button>

Opening the banner programmatically​

If you want to open the banner programmatically, i.e. through a JS function, you can do it by calling bigidcmp.showWidget() once the script has already loaded. Here is an example:

Open banner by calling a function

window.addEventListener(
  'bigidcmp:widget_ready',
  () => bigidcmp.showWidget(),
);

You can also add it to a button:

Open banner when clicking on button

<button onclick="bigidcmp.showWidget()">Open Banner</button>

Listening to changes in the consent

If you want to listen to any changes in the consent, you can do it by listening to the bigidcmp:consent_set event:

const addScript = (src) => {
  const script = document.createElement('script');
  script.setAttribute('src', src);
  document.head.appendChild(script);
};
window.addEventListener(
  'bigidcmp:consent_set',
  (event) => {
    const consent = event.detail;
    // how to check the entire category
    if (consent.marketing.value) {
      addScript('http://example.com/marketing-tool.js');
    }
    // how to check a specific vendor/service inside a category
    const targetService = 'Google' // exact same name as it is shown in the banner.
    const consentGranted = consent.marketing.services.some((v) => v.id === targetService && v.value);
    // consent is granted when the `value` for a specific service is true
    if (consentGranted) {
      addScript('http://example.com/google-tool.js');
    }
  }
);