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:
- show an "allow twitter" button in a placeholder div
- 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?