Create a flashing browser tab displaying a message when a user clicks over to a different tab

Rishi Rawat was talking about this tactic on LinkedIn. The idea is to showcase a flashing messaging within the browser tab when a user clicks on a different tab, encouraging the user to pop back. It's very similar to what happens when a live chat displays a notification in the browser tab with new messages — except there's no message. It's just utilizing the same code.

Rishi's post was all about asking whether it's a good strategy or a bad strategy — and whatever the answer — the good news is that there's no need to pay for a Shopify app or WordPress plugin to accomplish this simple trick.

Here's the code. You can paste this into the <head> section of your entire website, or just into the <head> of specific pages. Likewise, you can technically create different messages on various pages if you really love the strategy and want to go all out with it.

<script>
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                startFlashing();
            } else {
                stopFlashing();
            }
        });

        let originalTitle = document.title;
        let flashTitle = "Come back!";
        let flashInterval;

        function startFlashing() {
            flashInterval = setInterval(function() {
                document.title = document.title === originalTitle ? flashTitle : originalTitle;
            }, 1000); // Change the interval time as needed
        }

        function stopFlashing() {
            clearInterval(flashInterval);
            document.title = originalTitle;
        }
    </script>

That's it! Simply paste that code and replace the “Come back!” message with whatever you'd like your tab to say.

Note that the code above will alternate between the Original Title and the Flash Title. If you'd like it to replace the original title altogether with two different flashing titles, you can use this code below:

<script>
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                startFlashing();
            } else {
                stopFlashing();
            }
        });

        let originalTitle = document.title;
        let flashTitle1 = "Come back!";
        let flashTitle2 = "We miss you!";
        let flashInterval;

        function startFlashing() {
            flashInterval = setInterval(function() {
                document.title = document.title === flashTitle1 ? flashTitle2 : flashTitle1;
            }, 1000); // Change the interval time as needed
        }

        function stopFlashing() {
            clearInterval(flashInterval);
            document.title = originalTitle;
        }
    </script>

Create a flashing browser tab displaying a message when a user clicks over to a different tab2 min read

Submit a Comment Cancel reply