Boost Engagement with Flashing Tab Notifications
Capture user attention by using dynamic flashing tab notifications to highlight new messages, updates, or urgent information.
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
User enters the website
User.com sends the code to the browser
Browser starts monitoring for a tab becoming inactive
When tab becomes inactive, it starts flashing predefined message
When a User comes back, tab stops flashing
How to build it
Create an automation
Configure given code
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.
Go to Automations -> Create new
Select Page Visit from the panel on the right and place it on canvas
Choose Filter module.
Configure module according to your business needs.
Select Send Code from the panel, use search on the top to make it more convenient
Paste the code and provide configuration data
Connect Page Visit with Send Code
Save the automation choosing Each time condition is met timing and turn in on
Configure code
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.
In const flashTitle = 'Comeback, get rewarded!'; define your phrase to get the attention back.
In const originalFavicon = 'https://example.com/uploads/favicon.png'; insert URL to your original favicon file.
In const flashFavicon = 'https://example.com/uploads/fav_new.png'; insert URL to your flash favicon file.
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.
Use Case
You will build a process that recognizes when User leaves a tab, displays flashing tab notification and sends an event to User.com. You can use this event as a trigger for different actions. In this Use Case automation will show a thank you Pop Up with a discount code.
First, start with building a flashing tab notification notification as explained above.
When the process is ready, configure an Event Trigger module to react on the event with a chosen name.
Configure Show a Pop-Up module to make use of a chosen creation. You can use predefine Pop Up, build one yourself or outsource build process to our CS Tech Team.
Make sure to configure this module, using the same URL rule as the trigger. This will enhance User experience and make your onsite marketing more targeted.
From now on, when a User comes back to the website after flashing tab notification was show, they will be greeted with a thank you message.
It is advised to create a separate automation for showing a Pop Up and save it with timing Max once per day. This way you make sure to show a Pop Up in a non intrusive way.