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?

Custom code Published on

Note FlowSuggest is not affiliated with Webflow. For official help, visit the Webflow community.

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?