Modify the appearance of the consent dialog

The consent dialog is located in folder ~/App_Data/Sitefinity/TrackingConsent/. By default, Sitefinity CMS has one default template called consentDialog.html.

Following are two examples of consent dialogs, which you can use and customize.

EXAMPLE: blueDialog.html - consent dialog styled in blue. This example shows how you can apply custom CSS styles to tracking consent dialog.

HTML

<style>.consent-container { 	border: 1px solid rgb(51, 102, 153);	line-height: 1.5;	padding: 5px 20px 10px;	font-family: Verdana,Arial,Helvetica,DejaVu Sans,sans-serif;	max-width: 750px;	min-width: 200px;	color: black;	text-align: left;	background: none repeat scroll 0% 0% rgb(241, 251, 255);		position: absolute;	bottom: 8px;	right: 8px;}.consent-title {	margin: 0; 	padding: 0; 	color: #336699; 	font-size: 150%; 	font-weight: normal;}.consent-description {	color: #000000;}
.consent-accept-container {	margin-right:20px;	float:left;	margin-bottom:5px;	padding:10px 0;}.consent-accept {	white-space: nowrap; 	text-decoration: none; 	background: #B9DDEE; 	padding: 10px 15px; 	border-bottom: 1px solid #86B3C6; 	border-right: 1px solid #86B3C6; 	color: #000000;}	.consent-reject-container{	float: left; 	margin-bottom: 5px; 	padding: 10px 0;}.consent-reject {	white-space: nowrap; 	text-decoration: none; 	background: #B9DDEE; 	padding: 10px 15px; 	border-bottom: 1px solid #86B3C6; 	border-right: 1px solid #86B3C6; 	color: #000000;}

</style>

<div class="consent-container"> <h2 class="consent-title" >@(Res.Get<Labels>().TrackingConsentDialogTitle)</h2><p class="consent-description">@(Res.Get<Labels>().TrackingConsentDialogDescription)</p><div class='consent-accept-container'>	<a class="consent-accept" href="javascript:TrackingConsentManager.updateUserConsent(true)">@(Res.Get<Labels>().TrackingConsentDialogAccept)</a></div><div class='consent-reject-container'>	<a class="consent-reject" href="javascript:TrackingConsentManager.updateUserConsent(false)">@(Res.Get<Labels>().TrackingConsentDialogReject)</a></div><div></div>
</div>

EXAMPLE: pageReloadDialog.html - consent dialog that reloads the current page, if the user has changed the initial choice for tracking. This example shows how you can use client-side API to reload the current page when the user provides consent.

HTML

<script>(function() {	function OnConsentChanged(consent) {			console.log("Consent change detected.");				if (consent) {			alert("Page will be reloaded.")			window.location.reload();		}	}				function OnBeforeDialogClosed() {			console.log("Clean up consnet dialog event listeners.");			TrackingConsentManager.removeEventListener("ConsentChanged", OnConsentChanged)		TrackingConsentManager.removeEventListener("BeforeDialogClosed", OnBeforeDialogClosed)	}		console.log("Init consnet dialog event listeners.");		TrackingConsentManager.addEventListener("ConsentChanged", OnConsentChanged)	TrackingConsentManager.addEventListener("BeforeDialogClosed", OnBeforeDialogClosed)})();
</script>

<div style="padding:20px;position:relative;z-index:10000000;border:1px solid #ccc;background:#fff;"> 
   <strong>@(Res.Get<Labels>().TrackingConsentDialogTitle)</strong>
   <p>@(Res.Get<Labels>().TrackingConsentDialogDescription)</p>
   <button type="button" onclick="TrackingConsentManager.updateUserConsent(true)" id="tracking-consent-dialog-accept" class="btn btn-default">@(Res.Get<Labels>().TrackingConsentDialogAccept)</button>
   <button type="button" onclick="TrackingConsentManager.updateUserConsent(false)" id="tracking-consent-dialog-reject" class="btn btn-default">@(Res.Get<Labels>().TrackingConsentDialogReject)</button>
</div>

Want to learn more?

Enhance your Sitefinity skills by enrolling in free training sessions. Become Sitefinity certified through Progress Education Community to strengthen your professional credentials.

Get started with Integration Hub | Sitefinity Cloud

This free lesson teaches administrators, marketers, and other business professionals how to use Sitefinity Integration Hub to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting your Sitefinity instance and your sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity ASP.NET Core and take advantage of its decoupled architecture and modern development model.