Boost Engagement with Flashing Tab Notifications

Flashing Tab Notifications are an innovative technique in web design that targets users who have navigated away from your tab but still have it open. By dynamically changing the browser tab title, you can effectively draw users' attention back to your site, ensuring they stay informed and engaged.

Prerequisites

• URL for the original Favicon

• URL for the new Favicon

• Text content for a message

How it works

1. User enters the website

2. User.com sends the code to the browser

3. Browser starts monitoring for a tab becoming inactive

4. When tab becomes inactive, it starts flashing predefined message

5. When a User comes back, tab stops flashing

How to build it

1. Create an automation

2. Configure given code

3. Test and deploy

Create an automation

Let's start with an Automation. It starts with a Page Visit trigger, followed by a Send Code module. You can also put a Filter before a Send Code, to make sure the process works only for a selected Segment.

1. Go to Automations -> Create new

2. Select Page Visit from the panel on the right and place it on canvas

   

   

3. Choose Filter module.

   

4. Configure module according to your business needs.

   

5. Select Send Code from the panel, use search on the top to make it more convenient

   

6. Paste the code and provide configuration data

   

7. Connect Page Visit with Send Code

8. Save the automation choosing Each time condition is met timing and turn in on

Configure code

1. In src="{{global.code_pixel}}" insert URL to a blank pixel that will be loaded on your website. You can read more about it here.

2. In const flashTitle = 'Comeback, get rewarded!'; define your phrase to get the attention back.

3. In const originalFavicon = 'https://example.com/uploads/favicon.png'; insert URL to your original favicon file.

4. In const flashFavicon = 'https://example.com/uploads/fav_new.png'; insert URL to your flash favicon file.

5. In const intervalDuration = 1000; you can modify flash interval, default is 1 second.

<img src="{{global.code_pixel}}" onload="(function() {
const originalTitle = document.title;
const flashTitle = 'Comeback, get rewarded!';
const originalFavicon = 'https://example.com/uploads/favicon.png';
const flashFavicon = 'https://example.com/uploads/fav_new.png';
const intervalDuration = 1000;
let interval = null;
let isOriginal = true;
function changeFaviconAndTitle(src, title) {
document.title = title;    
let link = document.querySelector('link[rel*=icon]') || document.createElement('link');  
link.type = 'image/x-icon';  
link.rel = 'shortcut icon';  
link.href = src;  
document.head.appendChild(link);
}  
document.addEventListener('visibilitychange', function() {      
if (document.hidden) {             
interval = setInterval(() => {       
userengage('event.Flashing tab popup');       
changeFaviconAndTitle(isOriginal ? flashFavicon : originalFavicon, isOriginal ? flashTitle : originalTitle);  isOriginal = !isOriginal;          
}, intervalDuration); 
} else {          
clearInterval(interval);          
changeFaviconAndTitle(originalFavicon, originalTitle);      
}  
});})();"/>

Make sure to switch On Append to HTML option and save the module.