With GDPR and data privacy being a key concern across the world, your site also needs to comply with the data privacy laws that are applicable across nations. As such, you can enable a cookie policy on your site and a GDPR policy pop up as well.
TABLE OF CONTENTS
Add cookies and GDPR policy on the landing page
Here's a quick video and instructions on how to add cookies and GDPR policy on a page on your site
To do this, login to your Knorish account and in the Dashboard, under Website Builder, access the Custom Footer Code section as shown below:
Here, under the Embed code to the <body> on every pages section, simply add the cookie policy and GDPR code. In case you are not familiar with JavaScript coding, you can simply copy and paste the codes of any of the designs shown below in line 2.
How to add the custom code:
Step 1: Custom JavaScript Code
Access the dashboard and click on the Custom Footer Code button
Under the section - Embed code to the <body> on every pages, you need to simply copy and paste the base code first which is listed below in line 2:
NOTE: The code must be included inside SINGLE INVERTED COMA -- '.........' or inside GRAVE ACCENT SYMBOL .......
BASE CODE
$(document).ready(function() {
if(getParameterByName('edit') !== 'true') {
if(getCookie('AcceptCookie') !== '1'){
var html = 'YOUR_HTML_CODE_HERE';
$('body').append(html);
}
$('.accept-cookie').click(function(){
setCookie('AcceptCookie', 1, 365);
$('.accept-cookie-sec').hide();
});
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = 'expires=' + d.toUTCString();
document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/';
}
function getCookie(cname) {
var name = cname + '=';
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return '';
}
}
});Step 2: Choose the Design of the Cookie Policy Sticky
There are 5 designs that have been created for you to use. You may go ahead and choose one for your site. Simply copy the code of the design you like.
Note: YOUR_HTML_CODE_HERE (refer to the blue box in the image)
You need to replace the text above with the code mentioned below as per the design of your choice.
DESIGN 1:
Check out this design screenshot and its code below, if you like it then copy below code and replace 'YOUR_HTML_CODE_HERE' in above BASE CODE.
<div class="accept-cookie-sec" style="position:fixed;bottom:0;left:0;right:0;color:white;background-color:black;z-index:1;padding:15px 30px;"><p><strong>Review our cookies policy</strong></p><div>We use cookies and similar technologies to recognize your repeat visits and preferences, as well as to measure the effectiveness of campaigns and analyze traffic. To learn more about cookies, including how to disable them, view our <a href="#">Cookies Policy</a>. By clicking "I Accept" on this banner, or using our site, you concent to the use of cookies unless you have disabled them.</div><button type="button" class="btn btn-secondary btn-sm mt-2 accept-cookie" data-dismiss="modal">I Accept</button></div>
DESIGN 2:
Checkout below code and screenshot, if you like this then copy below code and replace 'YOUR_HTML_CODE_HERE' in above BASE CODE.
<div class="accept-cookie-sec" style="position:fixed;bottom: 0;left:0;right:0;color:white;background-color: #3c96ff;z-index: 1000000;padding:15px 30px;"><div style="display: inline-block;float: left;width: calc(100% - 100px);"><p style="margin-bottom: 0;">We use cookies and similar technologies to recognize your repeat visits and preferences, as well as to measure the effectiveness of campaigns and analyze traffic. To learn more about cookies, including how to disable them, view our <a href="#" style="color: #fff;text-decoration: underline;">Cookies Policy</a></p></div><button type="button" class="btn btn-sm mt-2 accept-cookie" data-dismiss="modal" style="color: #3c96ff;background-color: #ffffff;border-color: #ffffff;font-weight: bold;width: 100px;">Ok, Got It</button></div>
DESIGN 3:
Checkout below code and screenshot, if you like this then copy below code and replace 'YOUR_HTML_CODE_HERE' in above BASE CODE.
<div class="accept-cookie-sec" style="position:fixed;bottom: 0;left:0;right:0;color:white;background-color: #ffffff;z-index: 1000000;padding: 30px 10%;"><div style="display: inline-block;width: 100%;"><p style="margin-bottom: 0;color: #26353f;line-height: 1.7;font-weight: normal;">We use cookies and similar technologies to recognize your repeat visits and preferences, as well as to measure the effectiveness of campaigns and analyze traffic. To learn more about cookies, including how to disable them, view our <a href="#" style="color: #00bda5;text-decoration: underline;">Cookies Policy</a></p></div><button type="button" class="btn mt-2 accept-cookie" data-dismiss="modal" style="color: #ffffff;background-color: #00bda5;border-color: #00bda5;font-weight: bold;float: right;padding: 15px;font-size: 12px;font-weight: lighter;">Accept</button></div>
DESIGN 4:
Checkout below code and screenshot, if you like this then copy below code and replace 'YOUR_HTML_CODE_HERE' in above BASE CODE.
<div class="accept-cookie-sec" style="position:fixed;top: 0;left:0;right:0;color:white;background-color: #00a82d;z-index: 1000000;padding: 30px 10%;"><div style="display: inline-block;float: left;width: 75%;"><p style="margin-bottom: 0;">We use cookies and similar technologies to recognize your repeat visits and preferences, as well as to measure the effectiveness of campaigns and analyze traffic. To learn more about cookies, including how to disable them, view our <a href="#" style="color: #fff;text-decoration: underline;">Cookies Policy</a></p></div><div style="width: 24%;display: inline-block;text-align: right;"><button type="button" class="btn btn-sm mt-2 accept-cookie" data-dismiss="modal" style="color: #3c96ff;background-color: #ffffff;border-color: #ffffff;font-weight: bold;width: 100px;">Ok</button></div></div>
DESIGN 5:
Checkout below code and screenshot, if you like this then copy below code and replace 'YOUR_HTML_CODE_HERE' in above BASE CODE.
<div class="accept-cookie-sec" style="position:fixed;bottom: 0;left:0;right:0;color:white;background-color: #ffffff;z-index: 1000000;padding: 15px;max-width: 550px;margin: 0 auto 5px;border-radius: 5px;"><div style="display: inline-block;float: left;width: 75%;"><p style="margin-bottom: 0;color: #666;">By using Help Scout, you agree to our <a href="#" style="color: #007bff;text-decoration: underline;">Cookies Policy</a></p></div><div style="width: 24%;display: inline-block;text-align: right;"><button type="button" class="btn btn-primary btn-sm accept-cookie" data-dismiss="modal">Accept</button></div></div>
Step 3: Pasting The Code
As mentioned previously, simply select the words 'Your HTML Code Here' and paste the code of the chosen design which would replace this text. Then simply click on save and the cookie policy would be enabled not just as a popup but also as functionality on your website.
Step 4: Review changes
Open the website in the incognito/private mode and you will see the pop up show up automatically as shown above.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article