Topics

All topics

Setup and maintenance

Modify the appearance of the consent dialog

NEW TO SITEFINITY?

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.

<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>
view raw blueDialog.html hosted with ❤ by GitHub

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.

<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>
view raw pageReloadDialog.html hosted with ❤ by GitHub

Want to learn more?

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

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

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its 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 .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Next article

Integrate third-party Tracking consent manager