Test CSS of Consent Preferences Dialog

Gold Contributor
Gold Contributor


we are currently implementing the consent prompt manager and the consent preferences dialog. 

To test how the CSS looks like, we use a dev URL. 

When opening the dev URL, you perfectly see the way the prompt manager looks like. 

However, we do not find the consent preferences dialog "window" to see how it looks like in our actual website and how we could adjust it to better integrate it visually.

Any idea guys?


Test CSS of Consent Preferences Dialog

Tealium Employee

Hi @pascalreder

If you use the web companion to switch to the dev environment on your live website, then open the javascript console in development tools and type



Then press enter.  This will launch the consent preferences dialog directly. 

Connecting data systems since the 1980s.

Test CSS of Consent Preferences Dialog

Employee Emeritus

Hello @pascalreder. There is also this amazing post by @amarkic.

Let us know if this helps or not. 



Remember to give me a kudo if you like my post! Accepting my post as a solution is even better! Also remember that search is your friend.

Test CSS of Consent Preferences Dialog

Gold Contributor
Gold Contributor

Hey @steve_lake

Do you also have a solution to the following problem? We implemented the boxes according to the way kathleen/amarkic proposed.

When testing the boxes, the click function (event listener) didn't work, meaning clicks on the two buttons in the prompt box didn't bring us to remove the box (in case of "accept") and we were not brought to the preference box (in case of click on "decline").

I didn't change the id of the boxes, hence no mistake should happen here. I haven't implemented the JQuery part yet, but this shouldn't cause the issue. 

This is my HTML code:

<div id="sdgdpr_modal_wrapper">
	<div id="sdgdpr_modal">
		<div id="sdgdpr_modal2">
			<div id="sdgdpr_modal_inner">
				<div id="sdgdpr_modal-headline">{{title}}</div>
				<div class="sdgdpradv_imgwrapper1"><img src=https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/GORE-TEX%C2%AE_Logo.jpg/220px-GORE-TEX%C2%AE_Logo.jpg height="75" width="75" class="logo"></div>
				<div id="sdgdpr_modal-body">{{message}}</div>
				<ul id="sdgdpr_modal_buttons">
					<li id="sdgdpr_modal_buttons-agree">{{confirmation_button}}</li>
					<li id="sdgdpr_modal_buttons-complex">{{advanced_settings}}</li>
				<div class="privacy_prompt_link">
				    <a class="sdprivacy_action" href="https://www.gore-tex.com/content/privacy-policy" target="_blank">Hier zur Privacy Policy</a>

And this is the JS code:

(function constent_prompt(){
//actionable html elements as vars
	var btn_agree = document.getElementById("sdgdpr_modal_buttons-agree");
	var btn_advncd = document.getElementById("sdgdpr_modal_buttons-complex");
	var wrapper = document.getElementById("sdgdpr_modal_wrapper");

//function for agreeing
	var eventAgree = function(){		utag.gdpr.setConsentValue(1); //set value to 1    utag.gdpr.setCookieValue('decl','true'); //write in the cookie that user has said yes (check out the tutorial for further explanation)		closePrompt(); //run "hide modalbox function"		location.reload(); //reload page
  //function for going advanced
	var eventAdvanced = function(){		utag.gdpr.setConsentValue(0); //pass the values as 0 to advanced box (check out the tutorial for further explanation)		utag.gdpr.showConsentPreferences(); //trigger the advanced box		closePrompt(); //hide this box
  //function for closing (hiding) the modal box
	var closePrompt = function(){		wrapper.style.display = "none";
  //add event listener to events 	btn_agree.addEventListener("click", eventAgree, false);	btn_advncd.addEventListener("click", eventAdvanced, false);



Test CSS of Consent Preferences Dialog

Tealium Employee

Hi @pascalreder -  That's often due to something not quite right in the CSS, HTML or Javascript. 

Please can you log a support ticket for it and we'll take a look. 

Many thanks

Steve Lake 

Connecting data systems since the 1980s.