How to blink browser tab

Have you ever wished to blink browser tab on certain activity to get user’s attention?

Here is a scenario: Suppose there is a chat application installed on your website. Now what if the user of your website has multiple tabs opened in his browser and there is an incoming message in your website? How will you make your user realize that there is an unread message? Of course you can play some music, but it has some limitations. For instance, user may be listening to some songs or speakers could be muted. If none of them is applicable then also he has to go through each and every single tab in his browser and find out the one which is playing that music.

Visual blinking is the best way to get user’s attention and the easiest way to achieve that is to keep blinking the title of your website until user returns.

Here’s a JavaScript function to do so:

var blinkTab = function(message) {
  var oldTitle = document.title,                                                           /* save original title */
      blink = function() { document.title = document.title == message ? ' ' : message; },  /* function to BLINK browser tab */
      clear = function() {                                                                 /* function to set title back to original */
        document.title = oldTitle;
        window.onmousemove = null;
        timeoutId = null;

  if (!timeoutId) {
    timeoutId = setInterval(blink, 1000);
    window.onmousemove = clear;                                                            /* stop changing title on moving the mouse */

Just execute the function like below and browser tab will start blinking:

blinkTab("your message");

Leave a Reply

Your email address will not be published. Required fields are marked *