You want to automatically change the title tag (title) of your web pages if a user leaves your page but keeps the tab open on their Chrome browser | firefox | Safari | Edge | Internet Explorer from your computer or smartphone? Here’s how you can very simply set this up with a few lines of jQuery code and a little inspiration.
Why should you dynamically change the title of a page when it is no longer active in the browser? 5 reasons to do it.
Dynamically modifying the title tag of its inactive pages in a user’s browser can be a good idea for many reasons.
Rather than overwhelming you with many detailed arguments, I’d rather cut to the chase and focus on 5 key wins you can take from this.
Adapting the dynamically replaced title according to the season and your audience can save you:
- in sympathy : from customers, future customers, prospects, curious people lost on your site and colleagues
- sales : if you push a promo code for example
- conversions : by pushing your competitive advantages
- even more loyal customers : linked to the first point which is “sympathy”
- in communication : passing effective marketing messages in 7 characters, it may seem hot, but it is possible!
And if you’re wondering: YES it’s suitable for all audiences and targets (personas), you just have to adapt the message and ask yourself the right questions beforehand.
What browsers is it compatible with?
All major browsers in any version:
- Google Chrome,
- Mozilla Firefox,
- Safari,
- Internet Explorer,
- Microsoft Edge,
- Opera,
- …
Changing the title of inactive tabs on your site: how does it work in practice?
1- Check that jQuery is installed on your website:
For that :
- 1- go to your site
- 2- perform a CTRL + U to display the source code of the page
- 3- perform a CTRl + F then search for jquery.js or jquery.min.js
If it is already present and therefore installed, perfect.
If it is not installed, you can do it very simply by adding this line of code in the head of your site ():
If not bis (second installation method but less optimized for your loading time and therefore less recommended):
- 1- Download jQuery from the official website
- 2- Unzip the package and add it to a directory of your choice on your site via FTP / SSH
- 3- Add this line of code (modifying the path) to all the pages of your website:
If you are lost here, send this article to a developer, he will do it for you in a jiffy.
2- Customize the desired message and add the final jQuery code to your website:
To set up (and online) the dynamic modification of your title, simply add anywhere between the body tags of your site the code below, replacing “Hello you” in the code with any message which tells you to test with your audience:
Concretely, this code retrieves your current title tag then replaces it when the window is not active. As soon as the window becomes active again, the original title is back.
If you want to keep your initial title after your dynamically modified title, here is what you simply need to modify to the previous code (add “+pageTitle” after the quotes that enclose your message):
// Changement dynamique du title $(window).blur(function() { $("title").text("Coucou toi" + pageTitle); });This can be useful if the Internet user has many tabs of your site open and they can’t find their way around because of your Title, which will be identical on all the tabs (pay attention to this because it could serve you better than anything else in this specific case).
Other codes if the previous one does not work for you (which should not be the case):
$(document).ready(function() { document.title = 'Nouveau titre'; });Yet another possibility in jQuery compatible with Internet Explorer:
$(function(){ $(document).attr("title", "Nouveau titre"); });Concrete examples of the message to use to replace the title tag of the inactive tab:
Do you lack inspiration? Before showing you some concrete examples of replacement titles when your page ends up like a common inactive tab on any browser, here are 4 tips before you start head down :
- Be brief and add an emoticon first : this is what will catch the eye and make the user want to come back (or close your tab;).
- In general, it is the first 8 – 9 characters of your dynamically changed title that will be the most important and impactful : they will be the most visible in most cases (if a user has 10 Chrome tabs open on a computer equipped with a 15-inch screen, he will be able to see the first 8-9 for example).
- Avoid all capital letters (and capital letters in general) : it will take up more space and you will therefore be able to pass less information.
- Frequently surprise your visitors : the ideal is to replace the automatic message as often as possible to avoid boring your returning visitors. Play on the element of surprise.
Here are some ideas to attract the eye of the Internet user according to your site and your objective:
- Come back ↩️ quickly 😉
- Click me ▶️
- Click here ⬇️
- This is where it’s happening ↩️
- Solution here ⬇️
- Hello 😋
- here ⬇️, it’s better 😂
- With us, it’s better 😉
Some ideas for webmarketing agencies and freelancers:
- 📈 Do you want traffic? 📈
- Do you want to boost your turnover? 📈
- Want to 🚀?
- Service 🌟🌟🌟🌟🌟
- Need help ❓
- Do you want to see your CA ↗️?
Some dynamic title ideas for e-commerce:
- 📦 Free Shipping
- 📦 free
- 🚚 free
- 🚚 & ↩️ free
- 🚚 & ↩️ = 🆓
- 💲 Code “COME BACK” = 5€ discount
- ⚠️ Limited stock!
- 📢 Cheaper here ⬇️
- 📢 Price in ⬇️!
- PRICE IN ⬇️!
- 📢 [PRODUCT] on PROMO!
- Secure payment 🔒
- The [brand] sales are ending soon 😮
- 🎅 is everyday (with us)
- 🔥 it’s hot here!!!
- Products are going fast! 😮
- We’re on-🔥 for you!
Some ideas for dynamic titles that play on emotions and speak directly to the Internet user:
- 💔 Is it over between us already? 😭
- 😥 Already? 💌
- You come back when ? 🕑
- You are curious ? Come back 😉
- Curious ? 😉
- 😲 So fast?
- 🔔 Hey, come back?
- We miss you… 🙄
- Do you miss us? 😭
- You + Us = 💘
- We miss you… ❤️
- Hey BG, come back! 😋
- Would you mind 🍽️?
- Do you want better 🍽️? Come back
- Here… 🌹
- 🏝️ When are we leaving?
- Come back to us soon 🏃
- Want to win 💲?
- 🤔 So fast? 😮
- 😮 Come back soon…
- We 💚 well we
Are there several that you like? Did it give you any ideas? Have fun!
🎁 💡 📢 ✔ 😲 🙄😮 🤔 😋 😭 🔔 ❤️ 🔞 ✔️ 🥦 💚 ❓ 🆘 🏳️🌈 🌟 💰 💲 🆓
This is just an overview of the many emoticons you can add to your title tag when it’s inactive.
Do you like this little hack? Want more like this? Subscribe to our newsletter and/or don’t hesitate to give us a little link from your site or your social networks (the choice to follow us everywhere is also yours 😉).
