With the help of this example, you can create a cookie consent query for your own site. With the query you can gather active approval from the users to set up cookies and to collect data for targeted advertising as well as providing the users with additional information and opportunities to effect. The following query should be on all pages of the site.

Add the following style code to the <HEAD> section of your site. By editing the attached CSS definition, you can make the cookie query box to fit better your site. However, please note that the query box should stand out clearly and be big enough so it gets noticed.

/* Cookie Consent */

#cookie-consent {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(50,50,50,0.95);
color: #fafafa;
border-top: 1px solid rgba(150,150,150,0.9);
z-index: 10000;
font-size: 15px;

#cookie-consent:empty {
display: none;

@media screen and (min-width: 500px) {

#cookie-consent > div {
display: table;
margin: 0 auto;

#cookie-consent > div > div {
display: table-row;
overflow: hidden;

#cookie-consent > div > div > div {
display: table-cell;

#cookie-consent > div > div > div + div {
margin: 0 !important;
padding-left: 20px;


#cookie-consent > div {
padding: 50px 20px 50px 20px;

#cookie-consent > div > div > div {
vertical-align: middle;
text-align: center;

#cookie-consent > div > div > div + div {
margin: 20px 0 0 0;

#cookie-consent a {
color: #e00 !important;

#cookie-consent button {
color: #fafafa !important;
background: #d00;
border-radius: 2px;
border-width: 0 0 5px 0;
border-color: #900;
border-style: solid;
white-space: nowrap;
padding: 10px 15px;
cursor: pointer;
font-size: 1em;

#cookie-consent button:hover,
#cookie-consent button:active {
border-bottom-width: 2px;
margin-top: 3px;


You can add the following code on the part of the site you want inside  <BODY> tag, for instance just before </BODY> tag:

<div id="cookie-consent"></div>

(function() {

var text = 'To ensure that the use of the site is smooth and the ads are interesting, we use cookies on this site together with our partners. If you continue to use the site, you accept the cookies. If you don’t accept the cookies, change the settings of your browser.  <a href="[INSERT THE LINK TO YOUR COOKIE POLICY HERE]">More info about the cookies policy</a>.';
var button = 'I accept the cookies';
var ccCookieName = 'cConsent';
var cc = document.getElementById('cookie-consent');

if(cc && document.cookie.indexOf(ccCookieName + '=accepted') == -1) {

cc.innerHTML = '<div><div><div>' + text + '</div><div><button>' + button + '</button></div></div></div></div>';
cc.onclick = function(){
var d = new Date();
d.setDate(d.getDate() + 180);
this.innerHTML = '';
document.cookie = ccCookieName + "=accepted; expires=" + d.toUTCString() + "; path=/";



Ota yhteyttä!