How to load external script on click (after page load) when in Cookiebot's auto-blocking mode

605 views Asked by At

I am using Cookiebot in auto blocking mode.

For one particular case (an embedded twitter timeline) I need to do things "by hand". I would like to do the following regardless of the user's choice in the Cookiebot banner:

  1. show an "allow twitter" button in a placeholder div
  2. upon click, load the twitter script & initialize the timeline widget

If I accept marketing and preferences cookies in the CB banner the following works fine, but if not, the getScript call is blocked.

<div class="twitter-wrap">twitter anchor element</div>

<script data-cookieconsent="ignore">
  // append a button to allow user to accept cookies
  $(".twitter-wrap").append('<div class="twitter-consent"><button class="twitter-consent-btn">Accept</button></div>');
  $(".twitter-consent-btn").on("click", function(){ 
    $(".twitter-consent").hide();
    $.getScript( "https://platform.twitter.com/widgets.js", function( data, textStatus, jqxhr ) {
      console.log( jqxhr.status ); // This is never executed
      twttr.widgets.load().then(function () {
        console.log('Embedded timeline.')
      });
    });
  });
</script>

I have also tried to replace the getScript call with what is suggested at twitter where I also added the ignore flag in the dynamically generated script) but with no success:

function append_twttrScript() {
    window.twttr = (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
            t = window.twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.setAttribute("data-cookieconsent", "ignore"); // Here I add an extra attribute
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
        t._e = [];
        t.ready = function(f) {
            t._e.push(f);
            twttr.widgets.load().then(function (el) {
              console.log('Embedded a timeline.')
            });
        };
        return t;
        }(document, "script", "twitter-wjs"));
}

From what I understand, how data-cookieconsent="ignore" works is that it executes scripts with that flag once first and then blocks everything?!

Is what I need to do possible or do I need to resort to manual configuration for cookiebot?

0

There are 0 answers