Ambiera Forum

Discussions, Help and Support.

Ambiera Forum > RocketCake
Cookie agreement box

printuv
Registered User
Quote
2021-03-26 16:06:31

What would you use to create a Cookie agreement box for visitor to agree to cookie settings etc. I cannot seem to think straight today. One the same as you have for this site would be perfect.

I managed to find this on the forum.

function hideCookieOverlay()
{
var slotname = "cookieOverlay";

try
{
localStorage.setItem(slotname, "hidden");
} catch(e) { }

var b = document.getElementById("cookiearea51");
if (b != null)
b.parentNode.removeChild(b);
}

function showCookieOverlay()
{
var slotname = "cookieOverlay";
var content = '';

try
{
content = localStorage.getItem(slotname);
} catch(e) {}

if (content == 'hidden')
return;

var tdiv = document.createElement('div');
tdiv.innerHTML = "<div style=\"text-align: center; position: fixed; bottom: 20px; width: 300px; right: 10px; background-color: rgb(221, 221, 221); border: 1px solid rgb(195, 195, 195); padding: 15px; font-size: 14px; font-family: Arial, Helvetica, sans-serif; opacity: 1;\" id=\"cookiearea51\">This website uses cookies to make it work. <br>See here for more details. <br/><br/><div style=\"vertical-align: bottom; border-radius: 5px; position:relative; display: inline-block; width:150px; height:40px; background-color:808080; color:ffffff;\"><div =\"hideCookieOverlay()\" style=\"cursor: pointer; display: table; width: 100%; height: 100%;\"><div style=\"display: table-cell; vertical-align: middle;\">I am OK with this.</div></div></div>";
var elem = tdiv.firstChild;
document.body.appendChild(elem);

var cookieAreaSetAlpha=function(a,c){c.style.filter="Alpha(Opacity="+a*100+")";c.style.MozOpacity=a;c.style.opacity=a};

var b=document.getElementById("cookiearea51");
d=(new Date).getTime();
e=0;
if(b!=0)
{
cookieAreaSetAlpha(0,b);
e=setInterval(
function()
{var a=((new Date).getTime()-d)/3E3;
if(a>1)
{
cookieAreaSetAlpha(1,b);
clearInterval(e);
}
else
cookieAreaSetAlpha(a,b)
},100);
};

}

showCookieOverlay();

And have inserted the above into a javascript container. Position etc is ok however how do I edit the script so as to create a link from the word (here) within the script to a GDPR page on the website. And also to be able to click on the (I am ok with this) within the script to close the box. Will this work in site preview, or do I need to publish for it to work correcly. It would also be great if I could also have a darker box around the (I am ok with this) just like the one on this site.


erik
Registered User
Quote
2021-03-27 06:52:21

Where it says "See here for more details", change this to

See <ahref="linktoyourpage">here</a> for more details


Update: Put a space between "a" and "href", I had to write it that way otherwise it wouldn't get through the forums spam filter

And no, this won't show up in the editor, only in the preview.


printuv
Registered User
Quote
2021-03-27 09:53:07

Erik

This is what I now have. Up until the point of adding what you suggested it showed up in preview, but now it does not show in preview ??

function hideCookieOverlay()
{
var slotname = "cookieOverlay";

try
{
localStorage.setItem(slotname, "hidden");
} catch(e) { }

var b = document.getElementById("cookiearea51");
if (b != null)
b.parentNode.removeChild(b);
}

function showCookieOverlay()
{
var slotname = "cookieOverlay";
var content = '';

try
{
content = localStorage.getItem(slotname);
} catch(e) {}

if (content == 'hidden')
return;

var tdiv = document.createElement('div');
tdiv.innerHTML = "<div style=\"text-align: center; position: fixed; bottom: 20px; width: 300px; right: 10px; background-color: rgb(221, 221, 221); border: 1px solid rgb(195, 195, 195); padding: 15px; font-size: 14px; font-family: Arial, Helvetica, sans-serif; opacity: 1;\" id=\"cookiearea51\">Note: This website uses cookies to make it work.<br>See <ahref="gdpr_page.html">here</a> for more details.<br/><br/><div style=\"vertical-align: bottom; border-radius: 5px; position:relative; display: inline-block; width:150px; height:40px; background-color:808080; color:ffffff;\"><div =\"hideCookieOverlay()\" style=\"cursor: pointer; display: table; width: 100%; height: 100%;\"><div style=\"display: table-cell; vertical-align: middle;\">I agree to cookies.</div></div></div>";
var elem = tdiv.firstChild;
document.body.appendChild(elem);

var cookieAreaSetAlpha=function(a,c){c.style.filter="Alpha(Opacity="+a*100+")";c.style.MozOpacity=a;c.style.opacity=a};

var b=document.getElementById("cookiearea51");
d=(new Date).getTime();
e=0;
if(b!=0)
{
cookieAreaSetAlpha(0,b);
e=setInterval(
function()
{var a=((new Date).getTime()-d)/3E3;
if(a>1)
{
cookieAreaSetAlpha(1,b);
clearInterval(e);
}
else
cookieAreaSetAlpha(a,b)
},100);
};

}

showCookieOverlay();

I had to remove the space as you did to get it on the forum.


erik
Registered User
Quote
2021-03-27 12:40:31

You probably have some syntax error somewhere in there. You can see it by pressing CTRL+Shift+I in the browser (which opens the dev tools). But if you can't figure it out, best is to just send you .rcd file to support and they will usually help you quickly.


printuv
Registered User
Quote
2021-03-28 17:35:46

All sorted now and once again many thanks Nikolaus, and you too Eric of course.

This maybe a feature that could be added to RC in the future as I am pretty sure that most website's are supposed to have this on the site in law.


g4hdu
Registered User
Quote
2022-09-20 18:50:56

wrote:
This maybe a feature that could be added to RC in the future as I am pretty sure that most website's are supposed to have this on the site in law.


Certainly is in the EU and UK


niko
Moderator
Quote
2023-02-10 07:00:42

The code posted is finished, but the forum maybe deletes some characters, so here is the code again via pastecode:

https://pastecode.io/s/v7244h9g


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "Inte?national" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact