You can use the codes below to add cookie consent like “Cookies are used to ensure you get the best experience on our website.” to your site.
Add Cookie Consent to Website
Open your site’s header.php file.
Add the following codes before the <head> tag.
<link rel="stylesheet" type="text/css" media="all" href="https://oguzturk.net/labs/demo/cookie/cookie.css" /> <script type='text/javascript' src='https://oguzturk.net/labs/demo/cookie/cookie.js'></script>
Save the file and proceed to the following step.
Open your site’s footer.php file.
Add the following javascript code before the </html> or </body> tag.
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#646478", // stripe background color
"text": "#ffffff" // stripe font color
},
"button": {
"background": "#8ec760", // button background color
//"border": "#14a7d0", //You can use frames by making the background color transparent.
"text": "#ffffff" // button text color
}
},
"theme": "classic", // Themes you can use are block, edgeless, classic
"type": "opt-out", //to activate the hide button
// "position": "top", //If you activate it, the warning will appear at the top.
// "position": "top", // "static": true, If you activate it, the warning will appear fixed at the top.
// "position": "bottom-left", // If you activate it, the warning will appear on the left.
"position": "bottom-right", // If you activate it, the warning will appear on the right.
"content": {
"message": "We use cookies to enhance your browsing experience, serve personalised ads or content, and analyse our traffic. By clicking \"Accept All\", you consent to our use of cookies.",
"dismiss": "Accept All",
"link": "Oguzturk",
"href": "https://oguzturk.net"
}
})});
</script>Save the file and check your site. Your cookie consent box will appear.
If it doesn’t appear, clear the cache on your site and check again. If that doesn’t work, try the alternative method below.
Add Cookie Policy to Your Site
Find the <head> tag in your site’s header file and add the following code one line before it.
<link rel="stylesheet" type="text/css" media="all" href="https://oguzturk.net/labs/demo/cookie/cookie.css" />
<script type='text/javascript' src='https://oguzturk.net/labs/demo/cookie/cookie.js'></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#646478", // stripe background color
"text": "#ffffff" // stripe font color
},
"button": {
"background": "#8ec760", // button background color
//"border": "#14a7d0", //You can use frames by making the background color transparent.
"text": "#ffffff" // button text color
}
},
"theme": "classic", // Themes you can use are block, edgeless, classic
"type": "opt-out", // To activate the hide button
// "position": "top", // If you activate it, the warning will appear at the top.
// "position": "static", // If you activate it, the warning will appear fixed at the top.
// "static": true, // If you activate it, the warning will appear fixed at the top.
// "position": "bottom-left", // If you activate it, the warning will appear on the left.
"position": "bottom-right", // If you activate it, the warning will appear on the right.
"content": {
"message": "We use cookies to enhance your browsing experience, serve personalised ads or content, and analyse our traffic. By clicking \"Accept All\", you consent to our use of cookies.",
"dismiss": "Accept All",
"link": "Oguzturk",
"href": "https://oguzturk.net"
}
})});
</script>If you are using a caching plugin on your site, you can check by clearing the cache.
Customize Cookie Consent Box
“background”: “#646478”, // Stripe background color
“text”: “#ffffff” // Stripe font color
“background”: “#8ec760”, // Button background color
“border”: “#14a7d0”, // You can use frames by making the background color transparent.
“text”: “#ffffff” // Button text color
“theme”: “classic”, // Themes you can use are block, edgeless, classic
“type”: “opt-out”, // To activate the hide button
“position”: “top”, // If you activate it, the warning will appear at the top.
“position”: “static”, // If you activate it, the warning will appear fixed at the top.
“static”: true, // If you activate it, the warning will appear fixed at the top.
“position”: “bottom-left”, // If you activate it, the warning will appear on the left.
“position”: “bottom-right”, // If you activate it, the warning will appear on the right.
“message”: “We use cookies to enhance your browsing experience, serve personalised ads or content, and analyse our traffic. By clicking \”Accept All\”, you consent to our use of cookies.”, // Change the cookie warning message.
“dismiss”: “Accept All”, // Change the Confirmation Message
“link”: “Oguzturk”, // Title of your cookie policy page
“href”: “https://oguzturk.net” // Cookie policy page link
Cookie Consent Text Examples
- We process your personal information to measure and improve our sites and service, to assist our marketing campaigns and to provide personalised content and advertising. By clicking the “More Options” button, you can exercise your privacy rights. For more information see our Privacy Policy.
- This website uses cookies
We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services. - We value your privacy
We use cookies to enhance your browsing experience, serve personalised ads or content, and analyse our traffic. By clicking “Accept All”, you consent to our use of cookies. Cookie Policy. - We use cookies
This website uses cookies and other tracking technologies to improve your browsing experience for the following purposes: to enable basic functionality of the website, to provide a better experience on the website, to measure your interest in our products and services and to personalize marketing interactions, to deliver ads that are more relevant to you. - We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies. Learn More.
Cookie Consent Code Features
- It is mobile compatible (Responsive).
- You can change the background, button and text colors.
- You can use one of 3 different themes.
- You can change the position of the cookie checkbox.
- The cookie checkbox is shown once per user.
- You can link to your cookie policy or privacy policy page.
If you have problems with the codes, you can freely use the open source codes in the demo.
Demo: Cookie Consent Demo
Github: View via Github
GitHub CLI
gh repo clone oguzturk/cookie-consent