Change page title on inactive tab

October 09, 2015 | 1 Minute Read

Something I noticed being used on a few blogs is changing page title when it loses focus to place a call to action:

Page title changes from browser window becomes inactive. This got my interest. I figured I'd try to do the same on this website.

There are plenty of Stack Exchange results that show samples of how to get it done. I took a pretty simple one and made it into something that works for me:

  var message = "👉 Don't forget this...";
  var original = document.title;
  window.onblur = function () { document.title = message; }
  window.onfocus = function () { document.title = original; }

Added emoji should make it more attention grabbing. Innovation.

I picked the one that has unicode alternative "☞", it should then work on devices that don't have native emoji support.

This is how inacive tabs of my website look now:

Don't forget to read this - changed text on browser window tab. There are plenty of use cases for this, especially if you introduce some more complex logic.

Alert users about expiring sessions, for example.

Whether or not this actually delivers results is to be seen, but I guess there's no harm to try it out.

Hey! Subscribe to get my posts on growth, digital marketing, great products & everything in between.