.webp)
Info
Overview
This script changes the tab title when a user switches away. It briefly replaces the original title with a custom message after a short delay, syncs it across open tabs, and restores the original title once the user returns.
Setup
Copy & paste the scripts before the </body> tag of your project. If you added them before for another setup, skip this step.
Right-click in Elementor, choose “Paste from another site,” and while the popup is open, press cmd/ctrl + v to insert the layout.
Place the code in an HTML widget or add it through Elementor → Custom Code (before the closing </body> tag) either globally or only on selected pages.
Paste the code through the page or site settings, or add it via Elementor → Custom Code (before </body>) for broader use.
Paste the script through Elementor → Custom Code (set to load after </body>) for site-wide or page-specific loading.
(function () {
const originalTitle = document.title;
const awayMessage = "👀 Oh… so we’re done?"; // title when tab is inactive
function handleVisibility() {
document.title = document.hidden ? awayMessage : originalTitle;
}
document.addEventListener("visibilitychange", handleVisibility);
})();Place the PHP snippet inside your theme’s functions.php or using any code snippet to enable logic.
Implementation
You can customize this snippet by changing the awayMessage value. This controls the exact text or emoji shown when the tab becomes inactive.
To limit the message to a specific page, paste the code into an HTML widget and adjust the message only for that page.
For broader control, use Elementor’s Custom Code feature or a WordPress code snippet plugin. This lets you enable or disable the feature on selected pages or page types.