How do you change an inactive browser tab title in Webflow?
Learn how to change the tab title when a user leaves the page in Webflow with visibilitychange.
In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to change the tab title when a user leaves the page in Webflow.
| Behavior | Displayed title |
|---|---|
| Active page | Normal page title |
| Inactive page | Alternating messages |
The script
Add this script to the Footer code field. Customize the messages in the messages array.
(function() {
var originalTitle = document.title;
var messages = ['👋 We miss you!', '⚡ We’ve got something new...', originalTitle];
var idx = 0, interval;
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
interval = setInterval(function() {
document.title = messages[idx % messages.length];
idx++;
}, 1500);
} else {
clearInterval(interval);
document.title = originalTitle;
idx = 0;
}
});
})();Conclusion
A memorable little detail that makes people smile when they come back to the tab.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.avif)













