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:
- 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.
- 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>
- Customize the code to match your elements:
- Replace
popup-wrapper
with the class or ID of your popup wrapper element. - Replace
yes-button
andno-button
with the classes or IDs of your "Yes" and "No" buttons.
- 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?