Can someone help me with custom code in Webflow to create a yes/no popup that only shows once every 30 days depending on the user's answer?

Published on
September 22, 2023

To create a custom code in Webflow that creates a yes/no popup and shows it once every 30 days depending on the user's answer, you can follow the steps below:

  1. Create the popup elements:
  • Design and build the popup window using Webflow's visual designer.
  • Add a "Yes" button and a "No" button inside the popup window.
  1. Add custom code to your project:
  • Go to the Project Settings in your Webflow dashboard.
  • Select the Custom Code tab.
  • In the Footer Code section, add the following JavaScript code:
<!-- Add jQuery library --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>  $(document).ready(function() {    // Check if cookie exists    if (document.cookie.indexOf('popupClosed=true') === -1 ) {      // Display the popup      $('.popup-wrapper').fadeIn();      // Attach event listener to "Yes" button      $('.yes-button').click(function() {        // Set cookie to remember user's choice        var currentDate = new Date();        var expirationDate = new Date(currentDate.getTime() + 30 * 24 * 60 * 60 * 1000); // 30 days        document.cookie = 'popupClosed=true;expires=' + expirationDate.toUTCString();        // Hide the popup        $('.popup-wrapper').fadeOut();      });      // Attach event listener to "No" button      $('.no-button').click(function() {        // Hide the popup        $('.popup-wrapper').fadeOut();      });    }  });</script>
  1. Customize the code to match your elements:
  • Replace popup-wrapper with the class or ID of your popup wrapper element.
  • Replace yes-button and no-button with the classes or IDs of your "Yes" and "No" buttons.
  1. Publish your project:
  • Save the changes in your Webflow project.
  • Publish the site for the changes to take effect.

Now, the popup will only be displayed once every 30 days. If the user clicks the "Yes" button, a cookie will be set to remember their choice, and the popup will be hidden. If the user clicks the "No" button or closes the popup without making a choice, the popup will be hidden without setting the cookie.

Note: This code uses jQuery, so make sure you've added the jQuery library to your project.

Additional Questions:

  • How can I create a popup in Webflow?
  • How can I customize the design of a popup in Webflow?
  • What is the purpose of using cookies in this custom code?