Tiny “Please Come Back” Tab Title Flip

This is a tiny “please come back” micro-interaction for your browser tab. When the visitor switches away, the script flips the page title between two short messages. As soon as they return, your original title is restored. It’s a small, playful reminder that there’s still content waiting in that tab.

There are no analytics, no network requests, and no layout changes involved. The whole effect is driven by document.visibilityState and a couple of short title strings, so it stays lightweight and easy to drop into existing pages.

Copy-paste snippet

The block below includes a placeholder <style> tag (to match other snippets) and the full JavaScript needed to power the effect:

<style>
  /* No CSS required for this one, but you can keep this block
     so the snippet matches your usual pattern. */
</style>

<script>
  (function () {
    // Messages to flip between when the tab is hidden
    var MESSAGE_1 = 'Hey, come back 👋';
    var MESSAGE_2 = 'We saved your spot ✨';

    var originalTitle = document.title;
    var timerId = null;
    var step = 0;

    function startFlipping() {
      if (timerId !== null) {
        return; // already running
      }

      timerId = window.setInterval(function () {
        step++;

        if (step % 2 === 1) {
          document.title = MESSAGE_1;
        } else {
          document.title = MESSAGE_2;
        }
      }, 2000); // flip every 2 seconds
    }

    function stopFlipping() {
      if (timerId !== null) {
        window.clearInterval(timerId);
        timerId = null;
      }
      document.title = originalTitle;
    }

    function handleVisibility() {
      if (document.hidden) {
        // User left the tab
        originalTitle = document.title || originalTitle;
        startFlipping();
      } else {
        // User came back
        stopFlipping();
      }
    }

    // Run once for the current state
    handleVisibility();

    // Listen for tab visibility changes
    document.addEventListener('visibilitychange', handleVisibility);
  })();
</script>

How to use it

1. Paste the snippet into a layout or template that runs on the pages you care about, usually just before the closing </body> tag.
2. Customize MESSAGE_1 and MESSAGE_2 so they sound like your site. For example, “Still crunching numbers 📊” or “New scripts waiting for you”.
3. Deploy and open the page in a browser. Switch to a different tab and glance at the tab title to see the messages alternate every couple of seconds.
4. Click back into the tab. The script stops the flipping interval and restores your original document.title automatically.

Behind the scenes, the script uses document.hidden and the visibilitychange event so it can tell when the page is visible or hidden. When the page is hidden it starts an interval; when the page is visible again, it clears that interval and resets the title.

Customizing timing and behavior

You can tune a couple of simple settings:

• Flip speed: change the 2000 in setInterval to a different value in milliseconds (for example, 1500 for a slightly faster swap or 3000 for a slower one).
• Messages: update MESSAGE_1 and MESSAGE_2 to anything that fits your brand voice, including or excluding emojis.
• Single message mode: if you only want one line, you can remove the second message and the step logic and simply set document.title to a single string when the tab is hidden.

Where this works well (and when to skip it)

This pattern works best on pages where visitors tend to tab away but might return:

• Dashboards or tools people leave open while working in other tabs.
• Long-form docs or guides that users reference while multitasking.
• Landing pages where a gentle reminder is helpful but shouldn’t be intrusive.

It’s also worth using it sparingly. Too many flashing or attention-grabbing titles can feel noisy. Treat this as a small personality touch rather than something that runs on every single page of your site.

Because this snippet only touches the document.title and uses the standard visibility API, it stays simple to add and simple to remove. If you ever decide you no longer want the effect, you can just remove the script block from your layout and your titles will go back to normal.