Current settings allow you to track user inactivity and launch a warning dialog in a fixed amount of time after latest user activity. In this demo warning dialog appears after 5 seconds of latest user activity.
Idle Timeout
Plugin overview

After a set amount of idle time, a Bootstrap warning dialog is shown to the user with the option to either log out, or stay connected. If "Logout" button is selected, the page is redirected to a logout URL. If "Stay Connected" is selected, the dialog closes and the session is kept alive. If no option is selected after another set amount of idle time, the page is automatically redirected to a set timeout URL.

Idle time is defined as no mouse, keyboard or touch event activity registered by the browser.

As long as the user is active, the (optional) keep-alive URL keeps getting pinged and the session stays alive. If you have no need to keep the server-side session alive via the keep-alive URL, you can also use this plugin as a simple lock mechanism that redirects to your lock-session or log-out URL after a set amount of idle time.

Plugin usage
  1. Include jQuery library
  2. Include bootstrap.js and bootstrap.css (to support the modal dialog, unless you plan on using your own callback)
  3. Include the minified session_timeout.min.js plugin file
  4. Call $.sessionTimeout(); after document ready and set necessary options
Option Default Description
heading 'h6' This is the HTML heading for .modal-title class shown in Bootstrap modal heading.
title 'Session timeout notification' If you need to specify custom Bootstrap warning dialog title, you can use this option.
message 'Your session is about to expire.' This is the text shown to user via Bootstrap warning dialog after warning period.
keepAliveUrl '/keep-alive' URL to ping via AJAX POST to keep the session alive. This resource should do something innocuous that would keep the session alive, which will depend on your server-side platform.
keepAlive 'true' If true, the plugin keeps pinging the keepAliveUrl for as long as the user is active. The time between two pings is set by the keepAliveInterval option. If you have no server-side session timeout to worry about, feel free to set this one to false to prevent unnecessary network activity.
keepAliveInterval 5000 (5 seconds) Time in milliseconds between two keep-alive pings.
ajaxData '' If you need to send some data via AJAX POST to your keepAliveUrl, you can use this option.
redirUrl '/timed-out' URL to take browser to if no action is take after the warning.
logoutUrl '/log-out' URL to take browser to if user clicks "Logout" on the Bootstrap warning dialog.
warnAfter 900000 (15 minutes) Time in milliseconds after page is opened until warning dialog is opened.
redirAfter 1200000 (20 minutes) Time in milliseconds after page is opened until browser is redirected to redirUrl.
keepBtnClass 'btn btn-primary' This is the default "Stay connected!" button style, use this option if you need to change the button color by changing button classes.
keepBtnText 'Stay connected' If you need to change default Stay connectedbutton text to the custom one or translate to different language, use this option
logoutBtnClass 'btn btn-danger' This is the default "Logout" button style, use this option if you need to change the button color by changing button classes.
logoutBtnText 'Logout' If you need to change default Logoutbutton text to the custom one or translate to different language, use this option
ignoreUserActivity false If true, this will launch the Bootstrap warning dialog / redirect (or callback functions) in a set amounts of time regardless of user activity.
onWarn false Custom callback you can use instead of showing the Bootstrap warning dialog. Redirect action will still occur unless you also add the onRedir callback.
onRedir false Custom callback you can use instead of redirectiong the user to redirUrl.
Timeout examples
Basic usage

Shows the warning dialog after one minute. The dialog is visible for another minute. If user takes no action (interacts with the page in any way), browser is redirected to redirUrl. On any user action (mouse, keyboard or touch) the timeout timer is reset. Of course, you will still need to close the dialog.

									
										$.sessionTimeout({
											message: 'Your session will be locked in one minute.',
											keepAliveUrl: 'keep-alive.html',
											logoutUrl: 'login.html',
											redirUrl: 'locked.html',
											warnAfter: 60000,
											redirAfter: 120000
										});
									
								
With onWarn Callback

Shows the "Warning!" alert after one minute. If user takes no action (interacts with the page in any way), after one more minute the browser is redirected to redirUrl. On any user action (mouse, keyboard or touch) the timeout timer is reset.

									
										$.sessionTimeout({
											redirUrl: 'locked.html',
											warnAfter: 60000,
											redirAfter: 120000,
											onWarn: function{
											    alert('Warning!');
											}
										});
									
								
With both onWarn and onRedir Callback

Console logs the "Your session will soon expire!" text after one minute. If user takes no action (interacts with the page in any way), after two more minutes the "Your session has expired!" alert gets shown. No redirection occurs. On any user action (mouse, keyboard or touch) the timeout timer is reset.

									
										$.sessionTimeout({
											warnAfter: 60000,
											redirAfter: 180000,
											onWarn: function{
											    console.log('Your session will soon expire!');
											},
											onRedir: function{
											    alert('Your session has expired!');
											}
										});
									
								
Full featured example

Demonstrates advanced example with all possible options. The plugin can be used as a session timeout warning or as a user idle timeout, ignoreUserActivity options makes the difference. If option is set to true, as long as the user is doing something on the page, he will never get a timeout. Otherwise he'll get a warning message without user interaction dependency.

									
										$.sessionTimeout({
											heading: 'h5',
											title: 'Session expiration',
											message: 'Your session is about to expire. Do you want to stay connected and extend your session?',
											keepAliveUrl: '/',
											keepAlive: true,
											keepAliveInterval: 5000,
											redirUrl: 'logoff.html',
											logoutUrl: 'login.html',
											warnAfter: 600000, //10 minutes
											redirAfter: 900000, //15 minutes
											keepBtnClass: 'btn btn-success',
											keepBtnText: 'Extend session',
											logoutBtnClass: 'btn btn-light',
											logoutBtnText: 'Log me out',
											ignoreUserActivity: false,
											onWarn: function{
											    console.log('Your session will soon expire!');
											},
											onRedir: function{
											    alert('Your session has expired!');
											}
										});
									
								
Activity
New notifications
James has completed the task Submit documents from Onboarding list
2 hours ago
Margo has added 4 users to Customer enablement channel
3 hours ago
Subscription #466573 from 10.12.2021 has been cancelled. Refund case #4492 created
4 hours ago
Older notifications
Nick requested your feedback and approval in support request #458
3 days ago
Mike added 1 new file(s) to Product management project
new_contract.pdf
112KB
1 day ago
All hands meeting will take place coming Thursday at 13:45.
2 days ago
Christine commented on your community post from 10.12.2021
2 days ago
HR department requested you to complete internal survey by Friday
3 days ago
Loading...
Demo configuration
Color mode
Direction
Layouts
Purchase Limitless