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
For All Pages
To display the across all pages navigate to Website Builder > Custom Code > Body End Code, as shown in the screenshot below.
On this page, select the page version, paste the code below, and click 'Save'. Make sure the checkbox is enabled to apply it on entire site.
<script>
// IMPORTANT - To test this, save the changes and open the URL in incognito mode. Clicking on the 'Accept' button will create an accepted cookie to prevent it from opening again.
// Create the sticky footer container
const policy_footer = document.createElement('div');
policy_footer.style.position = 'fixed';
policy_footer.style.bottom = '0';
policy_footer.style.left = '0';
policy_footer.style.width = '100%';
policy_footer.style.backgroundColor = '#333';
policy_footer.style.color = '#fff';
policy_footer.style.padding = '10px 20px';
policy_footer.style.textAlign = 'center';
policy_footer.style.fontFamily = 'Arial, sans-serif';
policy_footer.style.boxShadow = '0 -2px 5px rgba(0, 0, 0, 0.2)';
policy_footer.style.zIndex = '1000';
// Create the message text
const policy_message = document.createElement('span');
policy_message.textContent = 'This website uses cookies to ensure you get the best experience.';
// Create the accept button
const policy_AcceptButton = document.createElement('button');
policy_AcceptButton.textContent = 'Accept';
policy_AcceptButton.style.marginLeft = '20px';
policy_AcceptButton.style.padding = '5px 10px';
policy_AcceptButton.style.border = 'none';
policy_AcceptButton.style.backgroundColor = '#28a745';
policy_AcceptButton.style.color = '#fff';
policy_AcceptButton.style.borderRadius = '4px';
policy_AcceptButton.style.cursor = 'pointer';
policy_AcceptButton.style.fontFamily = 'Arial, sans-serif';
// Add a click event listener to the button
policy_AcceptButton.addEventListener('click', () => {
// Remove the footer on click
policy_footer.style.display = 'none';
// Optionally, save the consent to localStorage
localStorage.setItem('policyAccepted', 'true');
});
// Append the message and button to the footer
policy_footer.appendChild(policy_message);
policy_footer.appendChild(policy_AcceptButton);
// Append the footer to the body
document.body.appendChild(policy_footer);
// Check localStorage for previous acceptance
if (localStorage.getItem('policyAccepted') === 'true') {
policy_footer.style.display = 'none';
}
</script>And that's it! You should now see the WhatsApp chat icon available for site visitors.
For Specific Pages
If you prefer it to appear only on certain pages, you can manually embed the code into the HTML of those specific pages. This approach ensures the icon is visible only where you want it.
Knorish provides a dedicated snippet type for this use case. Refer to the screenshot below and add this snippet to your landing pages. Then, click on the settings icon and paste the code provided.
Here's the code you should use; it is identical to the code above.
<script>
// IMPORTANT - To test this, save the changes and open the URL in incognito mode. Clicking on the 'Accept' button will create an accepted cookie to prevent it from opening again.
// Create the sticky footer container
const policy_footer = document.createElement('div');
policy_footer.style.position = 'fixed';
policy_footer.style.bottom = '0';
policy_footer.style.left = '0';
policy_footer.style.width = '100%';
policy_footer.style.backgroundColor = '#333';
policy_footer.style.color = '#fff';
policy_footer.style.padding = '10px 20px';
policy_footer.style.textAlign = 'center';
policy_footer.style.fontFamily = 'Arial, sans-serif';
policy_footer.style.boxShadow = '0 -2px 5px rgba(0, 0, 0, 0.2)';
policy_footer.style.zIndex = '1000';
// Create the message text
const policy_message = document.createElement('span');
policy_message.textContent = 'This website uses cookies to ensure you get the best experience.';
// Create the accept button
const policy_AcceptButton = document.createElement('button');
policy_AcceptButton.textContent = 'Accept';
policy_AcceptButton.style.marginLeft = '20px';
policy_AcceptButton.style.padding = '5px 10px';
policy_AcceptButton.style.border = 'none';
policy_AcceptButton.style.backgroundColor = '#28a745';
policy_AcceptButton.style.color = '#fff';
policy_AcceptButton.style.borderRadius = '4px';
policy_AcceptButton.style.cursor = 'pointer';
policy_AcceptButton.style.fontFamily = 'Arial, sans-serif';
// Add a click event listener to the button
policy_AcceptButton.addEventListener('click', () => {
// Remove the footer on click
policy_footer.style.display = 'none';
// Optionally, save the consent to localStorage
localStorage.setItem('policyAccepted', 'true');
});
// Append the message and button to the footer
policy_footer.appendChild(policy_message);
policy_footer.appendChild(policy_AcceptButton);
// Append the footer to the body
document.body.appendChild(policy_footer);
// Check localStorage for previous acceptance
if (localStorage.getItem('policyAccepted') === 'true') {
policy_footer.style.display = 'none';
}
</script>And that's it! You should now see the it available for site visitors.
Preview of accept policy
Now, here's what your site visitors will see.
Always use incognito mode to test it
This code snippet utilizes your browser's local storage, so once the 'Accept' button is clicked, it will not open again. Therefore, we recommend reviewing these changes in incognito mode.
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