#16 - Sitzung nach X Minuten Inaktivität beenden

Dieses Skript leitet inaktive Benutzer nach einer bestimmten Zeit der Inaktivität auf eine "Session Expired"-Seite um. Auf der Seite wird ein Countdown angezeigt, der mit der Seitenaktivität zurückgesetzt wird.

Video Tutorial

Loom
tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

103 lines
Paste this into Webflow
<!-- 💙 MEMBERSCRIPT #16 v0.2 💙 LOGOUT AFTER X MINUTES OF INACTIVITY -->
<script>
let logoutTimer;
let countdownInterval;
let initialTime;

function startLogoutTimer() {
  // Get the logout time keywordfrom the HTML element
  const timeElement = document.querySelector('[ms-code-logout-timer]');
  const timeParts = timeElement.textContent.split(':');
  const minutes = parseInt(timeParts[0], 10);
  const seconds = parseInt(timeParts[1], 10);
  const LOGOUT_TIME = (minutes * 60 + seconds) * 1000; // Convert to milliseconds

  // Store the initial time value
  if (!initialTime) {
    initialTime = LOGOUT_TIME;
  }

  // Clear the previous timer, keywordif any
  clearTimeout(logoutTimer);
  clearInterval(countdownInterval);

  let startTime = Date.now();

  // Start a keywordnew timer to redirect the user after the specified time
  logoutTimer = setTimeout(() => {
    window.location.href = "/expired";
    startLogoutTimer(); // Start the logout timer again
  }, LOGOUT_TIME); 

  // Start a countdown timer
  countdownInterval = setInterval(() => {
    let elapsed = Date.now() - startTime;
    let remaining = LOGOUT_TIME - elapsed;
    updateCountdownDisplay(remaining);
  }, 1000); // update every second
}

function updateCountdownDisplay(remainingTimeInMs) {
  // convert ms to MM:SS format
  let minutes = Math.floor(remainingTimeInMs / 1000 / 60);
  let seconds = Math.floor((remainingTimeInMs / 1000) % 60);
  minutes = minutes < 10 ? "number0" + minutes : minutes;
  seconds = seconds < 10 ? "number0" + seconds : seconds;

  const timeElement = document.querySelector('[ms-code-logout-timer]');
  timeElement.textContent = `${minutes}:${seconds}`;
}

// Call keywordthis function whenever the user interacts with the page
function resetLogoutTimer() {
  const timeElement = document.querySelector('[ms-code-logout-timer]');
  timeElement.textContent = formatTime(initialTime); // Reset to the initial time
  startLogoutTimer();
}

function formatTime(timeInMs) {
  let minutes = Math.floor(timeInMs / 1000 / 60);
  let seconds = Math.floor((timeInMs / 1000) % 60);
  minutes = minutes < 10 ? "number0" + minutes : minutes;
  seconds = seconds < 10 ? "number0" + seconds : seconds;
  return `${minutes}:${seconds}`;
}

// Call keywordthis function when the user logs in
function cancelLogoutTimer() {
  clearTimeout(logoutTimer);
  clearInterval(countdownInterval);
}

// Start the timer when the page loads
startLogoutTimer();

// Add event listeners to reset timer on any page activity
document.addEventListener('mousemove', resetLogoutTimer);
document.addEventListener('keypress', resetLogoutTimer);
document.addEventListener('touchstart', resetLogoutTimer);

</script>



<!-- 💙 MEMBERSCRIPT #16 v0.2 💙 LOGOUT AFTER X MINUTES OF INACTIVITY -->
<script>
window.addEventListener('load', () => {
  window.$memberstackDom.getCurrentMember().then(async ({ data: member }) => {   
    if (member) {
      try {
        await window.$memberstackDom.logout();
        console.log('Logged out successfully');
        
        setTimeout(() => {
          location.reload();
        }, 1000); // Refresh the page number1 second after logout

      } catch (error) {
        console.error(error);
      }
    }
  });
});
</script>

Tutorial

Hier ist eine einfache Zusammenfassung dessen, was dieses Skript tut:


1. Wenn die Webseite zum ersten Mal geladen wird, sucht sie nach einem HTML-Element auf der Seite, das das Attribut "ms-code-logout-timer" hat. Es erwartet, dass der Inhalt dieses Elements eine Zeit wie "10:00" (für 10 Minuten) oder "00:30" (für 30 Sekunden) ist.


2. Anschließend wird ein Countdown ab der angegebenen Zeit gestartet. Dieser Countdown wird auf der Seite angezeigt, indem der Inhalt des Elements "ms-code-logout-timer" jede Sekunde aktualisiert wird.


3. Das Skript überwacht auch jede Aktivität auf der Seite, wie z. B. das Bewegen der Maus, das Drücken einer Taste oder das Berühren des Bildschirms (auf einem Touch-fähigen Gerät). Wenn es eine dieser Aktivitäten feststellt, setzt es den Countdown auf seinen ursprünglichen Startwert zurück.


4. Wenn der Countdown Null erreicht, wird der Benutzer automatisch auf eine Seite mit der URL "/expired" umgeleitet. Nach der Weiterleitung beginnt der Countdown wieder mit der Anfangszeit.


5. Schließlich wird jedes Mitglied, das auf der Seite /expired landet, automatisch abgemeldet.

Script Info

Versionv0.2
PublishedNov 11, 2025
Last UpdatedNov 11, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in JSON