UCCC(Universal Cookies Common Confirmation)
Overview:
UCCC(Universal Cookies Common Confirmation) is a simple HTML, JavaScript, and CSS style consent management platform(CMP) alert with a sample code explained in a book style problem, solution way. Steps are simple and even a novice user may find the way of those steps application easy. It works as web page privacy cookie usage client-side user alert for the sake of (ex: GDPR compliance alerting, etc) simple application. It won't work as a PP(privacy policy) page itself. Also, it won't change any settings that's not its own.Problem:
How to apply a free simple HTML, JavaScript, and CSS style consent management platform (CMP) alert with a simple sample code yet professional to my web page? Also, I need a no-javascript and no-old-browser handlers as let's say: addons.Solution:
To solve this problem you should follow few simple steps of copy/edit/paste code to your web page(e.g., index.html, default.aspx, main.php, index.js, etc.) footer. Just read and follow the steps under the "Steps:" header.Steps:
- Copy the HTML code under the header "Code:".
- Change the PP link to yours.
- Paste it after the <body> tag in the targeted web page footer.
- Also can be copied from uccc(universal cookies common confirmation) project here.
- All done!
Code:
<body>
<h1>UCCC</h1>
<h1>UCCC</h1>
<!-- UCCC(Universal Cookies Common Confirmation) -->
<style type="text/css">
.uccc {
top: 8%;
left: 8%;
width: auto;
height: auto;
margin: 4px;
padding: auto;
overflow: auto;
position: absolute;
display: none;
z-index: 31999;
text-decoration: none;
border-radius: 14pt;
border: 1pt solid orange;
& * {
text-align: left;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 12pt;
color: #5c5c5c;
background: none !important;
}
}
.uccc div {
background: #ffffcc !important;
background: linear-gradient(to right, #ffffff, #ffffcc) !important;
}
.uccc p, .uccc-content p {
margin: auto;
padding: auto;
}
.uccc-content {
margin: auto;
padding: 14pt;
border: 2pt solid yellow;
border-radius: 12pt;
}
.ulist li {
margin: 0;
padding: 0;
list-style: square;
list-style-type: square;
list-style-position: inside;
}
.ulist li:before, .ulist li:after { content: ''; }
.ulnk {
margin: 0;
padding: 0;
margin-right: 4px;
padding-right: 4px;
float: right;
text-align: right;
font-weight: bold;
color: #aaa;
}
.ulnk:hover,
.ulnk:focus,
.ulnk:active {
color: #888;
cursor: pointer;
}
.ulnk:visited { color: #aaa; }
.no-js {
font-size: 14pt;
font-family: "Courier New", Courier, monospace;
color: #000;
background: #fff;
white-space: pre-wrap;
}
</style>
<!--[if IE 6 | IE 7 | IE 8 | IE 9]>
<br>
Old Browser Found!
<br>
Kindly, upgrade your browser!
<br>
<![else]-->
<script type="text/javascript">document.getElementById("nojsdiv").style.display="block";</script>
<![endif]-->
<noscript class="no-js">
Kindly, enable JavaScript!
This site will not function!
This site uses cookies!
There is cookies JavaScript alert that should be displayed!
</noscript>
<div id="UCCC" class="uccc">
<div class="uccc-content">
<p><b>Privacy & Cookies Alert!</b></p>
<p>This site uses cookies.
By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here:
<a rel="noopener noreferrer nofollow" title="PP" href="//ulike123.com/en/support/privacy.php">Privacy Policy</a></p>
<p> </p><span id="ulnkS" class="ulnk">Stop alerting me</span><p> </p>
<p> </p><span id="ulnkK" class="ulnk">Keep alerting me</span><p> </p>
<p> </p><span id="ulnkI" class="ulnk">Keep alerting me in detail</span><p> </p>
<br />
<p><b>Cookies settings change when you</b>:</p>
<ul class="ulist">
<li>Delete your cookies</li>
<li>Block cookies, including third party cookies</li>
<li>Switch internet browsers</li>
<li>Change computers</li>
<li>Upgrade your web browser</li>
</ul>
<br />
<p><b>Browsers settings change tips</b>:</p>
<ul class="ulist">
<li>
<a rel="noopener noreferrer nofollow" title="Cookie settings in Internet Explorer" href="//support.microsoft.com/en-us/help/278835/how-to-delete-cookie-files-in-internet-explorer" target="_blank">
Cookie settings in Internet Explorer</a></li>
<li>
<a rel="noopener noreferrer nofollow" title="Cookie settings in Edge" href="//privacy.microsoft.com/en-us/windows-10-microsoft-edge-and-privacy" target="_blank">
Cookie settings in Edge</a></li>
<li>
<a rel="noopener noreferrer nofollow" title="Cookie settings in Firefox" href="//support.mozilla.org/en-US/kb/cookies-information-websites-store-on-your-computer?redirectlocale=en-US&redirectslug=Cookies" target="_blank">
Cookie settings in Firefox</a></li>
<li>
<a rel="noopener noreferrer nofollow" title="Cookie settings in Chrome" href="//support.google.com/chrome/bin/answer.py?hl=en&answer=95647" target="_blank">
Cookie settings in Chrome</a></li>
<li>
<a rel="noopener noreferrer nofollow" title="Cookie settings in Safari" href="//support.apple.com/kb/HT1677" target="_blank">
Cookie settings in Safari</a></li>
</ul>
<br />
<p><b>Note</b>:</p>
<ul class="ulist">
<li>You may clear and\or stop cookies under this web name manually.</li>
<li>Kindly, revise your browser's cookies settings and\or history and...</li>
<li>Close all this web related tab(s) and\or window(s) if necessary.</li>
</ul>
<br />
<hr style="margin: 0; padding: 0;" />
<p><b>DISCLAIMER</b>: THIS IS JUST A STANDALONE ALERT. IT WON'T CHANGE ANY COOKIE SETTINGS EXCEPT ITS OWN, IF ALLOWED BY BROWSER'S USER.</p>
</div>
</div>
<script type="text/javascript">
/* Functions */
function setUCCC(name, value)
{
const date = new Date();
date.setFullYear(date.getFullYear() + 1);
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + "; " + expires + "; SameSite=Strict; Secure; path=/;";
}
function getUCCC(name)
{
let res = "";
const duc = decodeURIComponent(document.cookie);
const arr = duc.split(';');
for (let i = 0; i < arr.length; i++)
{
const cok = arr[i].trim();
const [key, value] = cok.split("=");
if(key==name){ res = value; break; }
}
return(res);
}
function delUCCC(name)
{
let this_web = location.hostname;
this_web = this_web.trim();
const date = new Date();
date.setFullYear(date.getFullYear() - 1);
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=; " + expires + "; path=/;";
document.cookie = name + "=; domain=" +this_web+ "; " + expires + "; path=/;";
document.cookie = name + "=; domain=." +this_web+ "; " + expires + "; path=/;";
}
function IsCookiesEnabled()
{
setUCCC("UCCC_TEST_IS_COOKIES_ENABLED", "1");
if(getUCCC("UCCC_TEST_IS_COOKIES_ENABLED")=="1")
{
delUCCC("UCCC_TEST_IS_COOKIES_ENABLED");
return(true);
}
return(false);
}
function TryKeepingCookiesDisclosedForVisitor()
{
let res = "\r\n";
const duc = decodeURIComponent(document.cookie);
const arr = duc.split(';');
for (let i = 0; i < arr.length; i++)
{
const cok = arr[i].trim();
const [name, value] = cok.split("=");
if(name)
res += i+1 + ". Found cookie: " + name + "\r\n";
}
return(arr.length ? res : "");
}
function ShowCookies()
{
let res = TryKeepingCookiesDisclosedForVisitor();
setTimeout(() =>
{
setUCCC("UCCC", "2");
if(getUCCC("UCCC")=="2")
{
if(res==""){ res = "\r\nNo cookie(s) found!\r\n"; }
res = "UCCC cookie option saved successfully!\r\n\r\nResult:\r\n" + res + "\r\nNote: \r\n - Refer to this website's Privacy Policy to read more... \r\n - Clear this web cookies history using browser's \r\n settings manually if necessary. \r\n - Some cookie type isn't showable due to(e.g., technical, security, etc.) reason including 3rd parties' that may be identified as XSS. \r\n - Dismiss this alert by pressing(ex: Yes, OK, etc.) or... \r\n - Press(ex: No, Cancel, etc.) for continuing alerting!";
if(confirm(res))
{ setUCCC("UCCC", "3"); }
}
else{ alert("Warning: couldn't save this web alert's cookie value as \"UCCC\" cookie name!"); }
}, 3000);
}
function CookiesBye()
{
alert("Due to cookies being not enabled by your browser's settings: \r\n - Couldn't read this web alert's cookie value named \"UCCC\". \r\n - You may find it in browser's history by this web name \r\n and delete it manually if necessary.");
}
/* Clicks */
var uccc = document.getElementById("UCCC");
const spanS = document.getElementById("ulnkS");
const spanK = document.getElementById("ulnkK");
const spanI = document.getElementById("ulnkI");
spanS.onclick = function()
{
if(IsCookiesEnabled())
{ setUCCC("UCCC", "1"); }
else{ CookiesBye(); }
uccc.style.display = "none";
}
spanK.onclick = function()
{
if(IsCookiesEnabled())
{ delUCCC("UCCC"); }
else{ CookiesBye(); }
uccc.style.display = "none";
}
spanI.onclick = function()
{
if(IsCookiesEnabled())
{ ShowCookies(); }
else{ CookiesBye(); }
uccc.style.display = "none";
}
/* UCCC Cookie
ucccCookie=="" New/No and general prompt is active
ucccCookie=="1" Yes and general prompt is dismissed
ucccCookie=="2" Yes and ShowCookies prompt is active
ucccCookie=="3" Yes and ShowCookies prompt is dismissed */
const ucccCookie = getUCCC("UCCC");
if(ucccCookie=="") { uccc.style.display = "block"; }
if(ucccCookie=="2"){ ShowCookies(); }
</script>
<!-- UCCC(Universal Cookies Common Confirmation) -->
Note:
Only copy the code between the separator lines!The alert background should be a little bit transparent or just solid in case of a backward compatibility.
For the "Secure;" cookie's attribute to work, your website should support SSL connection. Otherwise, just remove it, but that's not recommended.
Concerning option "Keep alerting me in detail", some cookie type isn't showable due to(e.g., technical, security, etc.) reason including 3rd parties' that may be identified as XSS.
The sample code result can be seen under the "Result:" header.
The page where the code will be placed should be fitting in size, otherwise, a flow scrolls will often appear. Sometimes, too, if the size is too small, the pop up may even look like a glitch.
For no-javascript and no-old-browser handlers, enclose your content with:
<div id="nojsdiv">your content</div>
Additionally, UCCC style has the !important css directive which is often used for overlapping styles as a solution.
I prefer reusing the !important css directive in such case if additional style forcing is required.
The sample code result can be seen under the "Result:" header.