In Webflow, how can I make a modal window appear 5 minutes after a visitor lands on my page?

Published on
September 22, 2023

To make a modal window appear 5 minutes after a visitor lands on your page in Webflow, you can use a combination of interactions and custom code. Here's a step-by-step guide on how to achieve this:

  1. Add a modal element to your page: Start by adding a modal element to your page design. You can do this by dragging and dropping a modal component from the Webflow UI elements panel onto your page.

  2. Set the modal to initially hidden: By default, the modal will be set as visible. You need to set the modal to initially hidden, so it does not show up when the page loads.

  3. Add a custom code embed: To trigger the modal to appear 5 minutes after the visitor lands on your page, you'll need to add a custom code snippet. Click on the body of your page, then go to the settings panel on the right-hand side. Click on the "Custom Code" tab, and under the "Footer Code" section, paste the following JavaScript code:

<script>    setTimeout(function(){        $('.modal-class-name').addClass('modal-show');    }, 300000);</script>

Make sure to replace 'modal-class-name' with the actual class name of your modal element. This code will set a timeout of 5 minutes (300,000 milliseconds) and then apply the modal-show class to your modal element, making it visible.

  1. Create an interaction: To create a smooth transition for the modal window, you can use Webflow's interactions. Select your modal element and click on the "Interactions" panel in the right-hand sidebar. Create a new interaction and set it to trigger on page load.

  2. Set up the interaction: In the interaction settings, choose the "Affect different element(s)" option and select your modal element. Add an initial appearance animation to the modal, such as fade in or slide in from the top. Adjust the duration and easing of the animation to your liking.

  3. Test and publish: Preview your site in Webflow to see if the modal appears after 5 minutes of landing on the page. If everything looks good, publish your site to make the modal appear for all visitors.

By following these steps, you can make a modal window appear 5 minutes after a visitor lands on your page in Webflow.

Additional questions:

  1. How do I add a modal element in Webflow?
  2. Can I customize the design of the modal window in Webflow?
  3. What other types of interactions can I create in Webflow?