Is there a code in Webflow that can automatically redirect an idle page back to the Home page after a certain period of time?

TL;DR

Yes, it is possible to automatically redirect an idle page back to the Home page in Webflow using JavaScript code. Here's an example of how you can achieve this:

​

1. Open your Webflow project and go to the page where you want to add this functionality.

​

2. Add an HTML embed element to the page. You can find it in the "Add" panel on the left side of the Webflow Designer.

​

3. Double-click the HTML embed element to open its settings.

​

4. In the HTML embed settings, switch to the "Custom Code" tab.

​

5. Paste the following JavaScript code into the `<script>` tag:

​

```javascript

<script>

  // Set the idle time limit in milliseconds (e.g., 5 minutes)

  var idleTimeLimit = 5 * 60 * 1000;

​

  // Track the last interaction time

  var lastInteractionTime = Date.now();

​

  // Function to redirect to the Home page

  function redirectHome() {

    window.location.href = '/'; // Replace '/' with the actual path of your Home page

  }

​

  // Event listeners for user interactions

  window.addEventListener('mousemove', resetTimer);

  window.addEventListener('keydown', resetTimer);

​

  // Function to reset the timer

  function resetTimer() {

    lastInteractionTime = Date.now();

  }

​

  // Check if the idle time limit has been exceeded

  function checkIdleTime() {

    var currentTime = Date.now();

    var idleTime = currentTime - lastInteractionTime;

​

    if (idleTime >= idleTimeLimit) {

      redirectHome();

    }

  }

​

  // Set an interval to periodically check the idle time

  setInterval(checkIdleTime, 1000); // Adjust the interval duration as needed

</script>

```

​

6. Customize the `idleTimeLimit` variable to set the desired period of idle time (in milliseconds) before the redirect occurs. In the example code, it is set to 5 minutes (5 * 60 * 1000 milliseconds).

​

7. Replace `window.location.href = '/';` with the actual path of your Home page. The `/` in the example code represents the root directory of your website.

​

8. Save the changes and publish the website for the code to take effect.

​

With this code, any user interaction like moving the mouse or pressing a key will reset the idle timer. If no interaction occurs within the specified time limit, the page will automatically redirect back to the Home page.

​

Note: It's important to test this functionality thoroughly to ensure it doesn't interfere with any other desired behaviors on your website.

Rate this answer

Other Webflow Questions