Adding an 'Accept Cookies' policy and 'GDPR' policy popup to all pages or a specific landing page

Adding an 'Accept Cookies' policy and 'GDPR' policy popup to all pages or a specific landing page

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.

    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.

    1. <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 containerconst 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 textconst policy_message = document.createElement('span');policy_message.textContent = 'This website uses cookies to ensure you get the best experience.';// Create the accept buttonconst 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 buttonpolicy_AcceptButton.addEventListener('click', () => {// Remove the footer on clickpolicy_footer.style.display = 'none';// Optionally, save the consent to localStoragelocalStorage.setItem('policyAccepted', 'true');});// Append the message and button to the footerpolicy_footer.appendChild(policy_message);policy_footer.appendChild(policy_AcceptButton);// Append the footer to the bodydocument.body.appendChild(policy_footer);// Check localStorage for previous acceptanceif (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.

    1.  <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 containerconst 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 textconst policy_message = document.createElement('span');policy_message.textContent = 'This website uses cookies to ensure you get the best experience.';// Create the accept buttonconst 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 buttonpolicy_AcceptButton.addEventListener('click', () => {// Remove the footer on clickpolicy_footer.style.display = 'none';// Optionally, save the consent to localStoragelocalStorage.setItem('policyAccepted', 'true');});// Append the message and button to the footerpolicy_footer.appendChild(policy_message);policy_footer.appendChild(policy_AcceptButton);// Append the footer to the bodydocument.body.appendChild(policy_footer);// Check localStorage for previous acceptanceif (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' Notification

    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.


      • Related Articles

      • Create FOMO with notifications on your landing page

        Knorish provides the flexibility to customize your site exactly as you want. It allows you to write plain JavaScript code to implement any custom functionality you need. In this post, we will demonstrate how to create FOMO signals for your users ...

      • How to generate, create or design Images for landing pages and website pages using Knorish AI

        Learn how to create images for your landing pages and site pages using the Knorish AI In this concise guide, we'll walk you through the simple steps of using the Knorish AI Assistant. Learn how to effortlessly generate and manage stunning AI-created ...

      • Manage Knorish Site Pages: Add, delete and edit pages

        Every Knorish account gets a site to build and manage that helps course publishers sell online courses. Whether you have an on-page site or a site with multiple pages and courses, they are areas that are accessible to all the users who visit your ...

      • Create course, website or landing pages using the old page builder

        This article covers details on how to build new course, site or landing pages using the old Knorish page builder. For using the new page builder which is the default page builder, refer to the Article: Create A Page Using The New Page Builder Using A ...

      • How to switch off the menu or footer on a landing page

        As a creator on Knorish, you have the option to easily switch on & off the menu on a specific page. This is usually done on landing pages where the site traffic is coming from an ad and only 1 specific action is required to be done on the page. As ...