How to Create a Popup in Webflow That Shows Once a Day.

Popups are an effective way to engage users, promote offers, or capture leads. However, showing a popup too frequently can annoy visitors and negatively impact user experience. In this guide, we’ll walk you through how to create a popup in Webflow that displays only once a day per visitor using custom JavaScript and cookies.

Step 1: Create Your Popup in Webflow

  1. Design Your Popup:
    • In Webflow, create a div block that will serve as your popup container.
    • Add text, images, or a call-to-action (CTA) button.
    • Style the popup to match your website’s branding.
  2. Set Initial Visibility:
    • Set the popup’s display property to none so it doesn’t appear immediately.
    • Use the Webflow interaction settings to control its visibility.

Step 2: Add a Close Button

  1. Create a Close Button:
    • Add a button inside the popup and label it as “Close.”
    • Assign it an id, such as close-popup.
  2. Apply Interactions:
    • Use Webflow interactions to set the popup’s visibility when the button is clicked.

Step 3: Use JavaScript and Cookies to Show the Popup Once a Day

To make sure the popup appears only once per day, we will use JavaScript and cookies. Open Webflow’s Custom Code Section: Go to your Webflow project settings. Navigate to the Custom Code section and paste the following script inside the <body> tag:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    let popup = document.getElementById("your-popup-id"); // Replace with your popup's ID
    let closeButton = document.getElementById("close-popup");
    let cookieName = "popup_shown";
    let oneDay = 24 * 60 * 60 * 1000;
    
    // Function to check if cookie exists
    function getCookie(name) {
      let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
      return match ? match[2] : null;
    }
    
    // Function to set a cookie
    function setCookie(name, value, expiresInMs) {
      let date = new Date();
      date.setTime(date.getTime() + expiresInMs);
      document.cookie = name + "=" + value + "; expires=" + date.toUTCString() + "; path=/";
    }
    
    // Show popup only if cookie is not set
    if (!getCookie(cookieName)) {
      popup.style.display = "block";
      setCookie(cookieName, "true", oneDay);
    }
    
    // Close popup and hide it
    closeButton.addEventListener("click", function() {
      popup.style.display = "none";
    });
  });
</script>

Step 4: Publish and Test

  • Publish your Webflow website.
  • Open the site in an incognito window to test if the popup appears once per day.
  • Clear cookies and refresh the page to simulate a new visitor.

Conclusion

By implementing this method, you can display a popup once per day to each visitor, enhancing user experience while still leveraging the benefits of popups. This approach is great for limited-time promotions, newsletter sign-ups, or important announcements. Make sure to optimize your popup content for SEO by including relevant keywords and a compelling CTA.

Need help optimizing your Webflow site further? Explore our other guides or get in touch with a Webflow expert today!

Related Posts