html5 Popup triggered by inactitvity?

Question

Is there a way to trigger a popup by inactivity time and then have it close by any touch of the screen? A page navigation triggered by inactivity would also be great, but I imagine that that once I understand how the code could be entered for export then it would be pretty easy to trigger either or both. I am looking to do something along the lines of a "Try Our Touchscreen" popup message and / or a return to the top page containing that message between kiosk users.

Maybe something like this code wise? https://www.cssscript.com/detect-user-activity-idle-time/

Answer 1

Yes, I think heading back to the first page is the simplest approach. I've created some code for you below.

You can attach the following as a .js file in the Resources section of the full export dialog:

$(function(){
	var inactivityTime = 60000; /*in milliseconds*/
	var inactivityInterval = setTimeout(function(){ resetExperience(); }, inactivityTime);
	
	/*start timer over after any of these gestures*/
	$(document).on('touchstart pointerdown vmousedown vmousemove touchmove pointermove', function(e){
		clearTimeout(inactivityInterval);
		inactivityInterval = setTimeout(function(){ resetExperience(); }, inactivityTime);
	});
	
	function resetExperience(){
		clearTimeout(inactivityInterval);
		if(nav.current !== 1) nav.to(1);
		inactivityInterval = setTimeout(function(){ resetExperience(); }, inactivityTime);
	}
});

Comments

Works great! With the new "go to previous view" button option, I can have people start over or jump back to where they were if they were still exploring. Thanks!

---

Exactly, that's a great idea! Sounds like a really friendly user experience. :-)

---

I had only done a quick test that the timeout navigation functioned without activity. Unfortunately, it seems to activate that timeout function even if there is regular mouse movement and button activity. Then after the timeout navigates to page 1, it does not allow you to leave and continues to re-navigate to page 1. I am trying some adjustment, but no luck so far. Any ideas?

This export is being used in full screen presentation mode.

---

Sorry about that. I've corrected the code above and it should now work as expected.