Test CSS of Consent Preferences Dialog

[pascalreder]

Hey,

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?

[steve_lake]

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

utag.gdpr.showConsentPreferences();

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

[kathleen_jo · Accepted solution]

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

• Tutorial: Designing a Different Consent Preferences Manager Box

Let us know if this helps or not. 

Regards,

Kathleen 

[pascalreder]

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>
				</ul>
				<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>
		    	</div>
			</div>
		</div>
	</div>
</div>

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);
}());

Best,

Pascal

[steve_lake]

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