Knorish provides the flexibility to customize your site exactly as you want. It allows you to write plain JavaScript code to implement any custom functionality you need. In this post, we will demonstrate how to create FOMO signals for your users (fear of missing out) by displaying pop up notifications, such as a user's name, profile picture, and events like signups or course purchases. Sounds interesting? Let’s get started!
Table of contents
- Where should I use FOMO popups?
- Ethical Considerations: Do I need real data for FOMO popups?
- How to add or write custom code on a landing page?
- How to customize FOMO popups with your user data using AI?
- Sample 1 - FOMO with just text
- Sample 2 - FOMO with text and profile picture
- Sample 3 - FOMO with text, profile picture and mins/hr ago
Where should I use FOMO popups?
FOMO popups are most effective on sales or landing pages where you want to create urgency for users to sign up or purchase. Avoid using them across your entire site, as this may dilute their impact. Focus on pages with clear calls to action, like course purchase or registration pages, to drive conversions.
Ethical Considerations: Do I need real data for FOMO popups?
Yes, using real data is imperative to maintain trust and integrity with your audience. While the feature can technically work without authentic data, displaying fake names or activities undermines credibility and can harm your reputation. Collect and use genuine customer information—names, locations (city or country), and recent actions. Authenticity not only builds trust but also ensures your audience views your brand as reliable and ethical, leading to long-term success. Trust is non-negotiable—always prioritize it.
How to add or write custom code on a landing page?
In the Knorish page builder, you will find the code snippet block below, which allows you to write custom code to achieve anything.
Drag and drop this content block onto your landing page, then click the settings button, which allows you to write custom code. Here's how:
Now, replace the above code with the custom code samples provided below. After replacing the code, click the save button and then the preview button to see the changes.
How to customize FOMO popups with your user data using AI?
Customizing your FOMO popup code is simple with AI tools such as ChatGPT. You can use AI to update the user information, locations, and conversion times based on your specific requirements. For this, you can provide your instructions and attach an Excel sheet with the relevant data (e.g., Name, Location, and/or Time of Conversion). AI will generate the updated JavaScript code for you in one step. Here’s how you can do it:
Steps to Customize the Code:
- Prepare your data: Create an Excel sheet containing the following columns:
- Name
- Location (City or Country)
- (Optional) Time since conversion (in hours or days)
- Copy the original JavaScript code from the sample provided above.
- Open AI Tool such as ChatGPT: Paste the code into the chat and attach your Excel sheet.
- Use one of the prompts below to instruct ChatGPT on how to update the code.
- Copy the updated JavaScript code generated by ChatGPT and paste it back into your landing page’s code block.
- Save and preview the page to ensure everything works as expected.
Prompt Template 1: Change Only The Names And Location Of Real Users
I am attaching an Excel sheet with two columns: "Name" and "Location" (City or Country) of users. The columns contain real data of recent customer conversions. Please update the below JavaScript code to replace the array of user information with the data from my Excel sheet. Ensure the code format remains the same and provide the entire updated code in JavaScript so I can directly copy and paste it onto my site.
Prompt Template 2: Update User Names, Locations, and Time Since Conversion
I am attaching an Excel sheet with three columns: "Name," "Location" (City or Country), and "Time Since Conversion" (in hours or days). The data reflects actual customer conversions. Please update the attached JavaScript code to replace the array of user information with the data from my Excel sheet. The time since conversion should be displayed dynamically in the FOMO popups (e.g., "2 hours ago" or "3 days ago") with the assigned name and location while maintaining the format in the original javascript code. Provide the entire updated code in JavaScript in the same format so I can directly copy and paste it onto my site.
Save the code in a code snippet on your landing page as explained and the data will be updated.
Sample 1 - FOMO with just text
Here's the sample code, copy this code and paste on code content block on landing page. Save the changes and click to preview it.
<script>
// Array of 100 users with Indian names and locations
const users = [{
name: "Aarav",
location: "Mumbai"
},
{
name: "Isha",
location: "Delhi"
},
{
name: "Rohan",
location: "Bengaluru"
},
{
name: "Priya",
location: "Chennai"
},
{
name: "Aditya",
location: "Hyderabad"
},
{
name: "Ananya",
location: "Kolkata"
},
{
name: "Karthik",
location: "Pune"
},
{
name: "Sneha",
location: "Ahmedabad"
},
{
name: "Vikram",
location: "Jaipur"
},
{
name: "Meera",
location: "Lucknow"
},
{
name: "Arjun",
location: "Chandigarh"
},
{
name: "Riya",
location: "Bhopal"
},
{
name: "Varun",
location: "Guwahati"
},
{
name: "Swati",
location: "Surat"
},
{
name: "Nikhil",
location: "Vadodara"
},
{
name: "Pooja",
location: "Nagpur"
},
{
name: "Siddharth",
location: "Coimbatore"
},
{
name: "Tanya",
location: "Vishakhapatnam"
},
{
name: "Manish",
location: "Thiruvananthapuram"
},
{
name: "Deepika",
location: "Mysuru"
},
{
name: "Rahul",
location: "Patna"
},
{
name: "Sonali",
location: "Ranchi"
},
{
name: "Aakash",
location: "Kanpur"
},
{
name: "Neha",
location: "Agra"
},
{
name: "Harish",
location: "Dehradun"
},
{
name: "Payal",
location: "Indore"
},
{
name: "Rajesh",
location: "Amritsar"
},
{
name: "Simran",
location: "Raipur"
},
{
name: "Anil",
location: "Nashik"
},
{
name: "Bhavna",
location: "Meerut"
},
{
name: "Vivek",
location: "Kochi"
},
{
name: "Alok",
location: "Puducherry"
},
{
name: "Divya",
location: "Shimla"
},
{
name: "Kiran",
location: "Panaji"
},
{
name: "Prateek",
location: "Jodhpur"
},
{
name: "Shweta",
location: "Gwalior"
},
{
name: "Rakesh",
location: "Udaipur"
},
{
name: "Ishita",
location: "Varanasi"
},
{
name: "Amit",
location: "Madurai"
},
{
name: "Komal",
location: "Bareilly"
},
{
name: "Ravi",
location: "Jalandhar"
},
{
name: "Anushka",
location: "Cuttack"
},
{
name: "Tarun",
location: "Aurangabad"
},
{
name: "Seema",
location: "Jhansi"
},
{
name: "Mahesh",
location: "Hubballi"
},
{
name: "Nisha",
location: "Vellore"
},
{
name: "Suraj",
location: "Tirupati"
},
{
name: "Pallavi",
location: "Siliguri"
},
{
name: "Arvind",
location: "Aligarh"
},
{
name: "Lavanya",
location: "Moradabad"
},
{
name: "Ganesh",
location: "Guntur"
},
{
name: "Suman",
location: "Bhilai"
},
{
name: "Ajay",
location: "Jammu"
},
{
name: "Radha",
location: "Dharamshala"
},
{
name: "Santosh",
location: "Thrissur"
},
{
name: "Archana",
location: "Rajkot"
},
{
name: "Yash",
location: "Allahabad"
},
{
name: "Snehal",
location: "Erode"
},
{
name: "Bharat",
location: "Kozhikode"
},
{
name: "Veena",
location: "Ludhiana"
},
{
name: "Mukesh",
location: "Imphal"
},
{
name: "Neetu",
location: "Jamshedpur"
},
{
name: "Prakash",
location: "Ajmer"
},
{
name: "Rachna",
location: "Rourkela"
},
{
name: "Vinay",
location: "Nellore"
},
{
name: "Jyoti",
location: "Shirdi"
},
{
name: "Ashish",
location: "Vijayawada"
},
{
name: "Monika",
location: "Kolhapur"
},
{
name: "Chirag",
location: "Panipat"
},
{
name: "Ekta",
location: "Ambala"
},
{
name: "Gopal",
location: "Solapur"
},
{
name: "Anjali",
location: "Bikaner"
},
{
name: "Rohit",
location: "Hisar"
},
{
name: "Kalpana",
location: "Ujjain"
},
{
name: "Shivam",
location: "Rohtak"
},
{
name: "Megha",
location: "Bilaspur"
},
{
name: "Anand",
location: "Bhagalpur"
},
{
name: "Rekha",
location: "Haridwar"
},
{
name: "Chetan",
location: "Saharanpur"
},
{
name: "Priti",
location: "Haldwani"
},
{
name: "Yogesh",
location: "Anantapur"
},
{
name: "Harsha",
location: "Tirunelveli"
},
{
name: "Kunal",
location: "Salem"
},
{
name: "Trisha",
location: "Gaya"
},
{
name: "Lalit",
location: "Warangal"
},
{
name: "Tanvi",
location: "Noida"
},
{
name: "Naveen",
location: "Faridabad"
},
{
name: "Ruchi",
location: "Ghaziabad"
}
];
// Function to create and display notifications
function displayRandomUserActivity() {
const randomUser = users[Math.floor(Math.random() * users.length)];
const activities = [
"purchased a course",
"signed up on the site"
];
const randomActivity = activities[Math.floor(Math.random() * activities.length)];
// Create notification element
const notification = document.createElement("div");
notification.className = "fomo-notification";
notification.innerText = `${randomUser.name} from ${randomUser.location} just ${randomActivity}`;
// Append to the container
const container = document.getElementById("fomo-container");
container.appendChild(notification);
// Remove notification after 5 seconds
setTimeout(() => {
container.removeChild(notification);
}, 5000);
}
// Function to start showing notifications
function startFomoNotifications() {
setInterval(displayRandomUserActivity, 7000); // Display a new notification every 10 seconds
}
// Add styles dynamically for the notification
const style = document.createElement("style");
style.innerText = `
#fomo-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
.fomo-notification {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
margin: 5px 0;
border-radius: 5px;
font-family: Arial, sans-serif;
font-size: 14px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.5s, fadeOut 0.5s 4.5s;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(10px); }
}
`;
document.head.appendChild(style);
// Create the container for notifications
const fomoContainer = document.createElement("div");
fomoContainer.id = "fomo-container";
document.body.appendChild(fomoContainer);
// Start showing FOMO notifications
startFomoNotifications();
</script>Once done, here's what it will look like:
Sample 2 - FOMO with text and profile picture
Here's the sample code, copy this code and paste on code content block on landing page. Save the changes and click to preview it.
<script>
// Array of 100 users with Indian names and locations
const users = [{
name: "Aarav",
location: "Mumbai"
},
{
name: "Isha",
location: "Delhi"
},
{
name: "Rohan",
location: "Bengaluru"
},
{
name: "Priya",
location: "Chennai"
},
{
name: "Aditya",
location: "Hyderabad"
},
{
name: "Ananya",
location: "Kolkata"
},
{
name: "Karthik",
location: "Pune"
},
{
name: "Sneha",
location: "Ahmedabad"
},
{
name: "Vikram",
location: "Jaipur"
},
{
name: "Meera",
location: "Lucknow"
},
{
name: "Arjun",
location: "Chandigarh"
},
{
name: "Riya",
location: "Bhopal"
},
{
name: "Varun",
location: "Guwahati"
},
{
name: "Swati",
location: "Surat"
},
{
name: "Nikhil",
location: "Vadodara"
},
{
name: "Pooja",
location: "Nagpur"
},
{
name: "Siddharth",
location: "Coimbatore"
},
{
name: "Tanya",
location: "Vishakhapatnam"
},
{
name: "Manish",
location: "Thiruvananthapuram"
},
{
name: "Deepika",
location: "Mysuru"
},
{
name: "Rahul",
location: "Patna"
},
{
name: "Sonali",
location: "Ranchi"
},
{
name: "Aakash",
location: "Kanpur"
},
{
name: "Neha",
location: "Agra"
},
{
name: "Harish",
location: "Dehradun"
},
{
name: "Payal",
location: "Indore"
},
{
name: "Rajesh",
location: "Amritsar"
},
{
name: "Simran",
location: "Raipur"
},
{
name: "Anil",
location: "Nashik"
},
{
name: "Bhavna",
location: "Meerut"
},
{
name: "Vivek",
location: "Kochi"
},
{
name: "Alok",
location: "Puducherry"
},
{
name: "Divya",
location: "Shimla"
},
{
name: "Kiran",
location: "Panaji"
},
{
name: "Prateek",
location: "Jodhpur"
},
{
name: "Shweta",
location: "Gwalior"
},
{
name: "Rakesh",
location: "Udaipur"
},
{
name: "Ishita",
location: "Varanasi"
},
{
name: "Amit",
location: "Madurai"
},
{
name: "Komal",
location: "Bareilly"
},
{
name: "Ravi",
location: "Jalandhar"
},
{
name: "Anushka",
location: "Cuttack"
},
{
name: "Tarun",
location: "Aurangabad"
},
{
name: "Seema",
location: "Jhansi"
},
{
name: "Mahesh",
location: "Hubballi"
},
{
name: "Nisha",
location: "Vellore"
},
{
name: "Suraj",
location: "Tirupati"
},
{
name: "Pallavi",
location: "Siliguri"
},
{
name: "Arvind",
location: "Aligarh"
},
{
name: "Lavanya",
location: "Moradabad"
},
{
name: "Ganesh",
location: "Guntur"
},
{
name: "Suman",
location: "Bhilai"
},
{
name: "Ajay",
location: "Jammu"
},
{
name: "Radha",
location: "Dharamshala"
},
{
name: "Santosh",
location: "Thrissur"
},
{
name: "Archana",
location: "Rajkot"
},
{
name: "Yash",
location: "Allahabad"
},
{
name: "Snehal",
location: "Erode"
},
{
name: "Bharat",
location: "Kozhikode"
},
{
name: "Veena",
location: "Ludhiana"
},
{
name: "Mukesh",
location: "Imphal"
},
{
name: "Neetu",
location: "Jamshedpur"
},
{
name: "Prakash",
location: "Ajmer"
},
{
name: "Rachna",
location: "Rourkela"
},
{
name: "Vinay",
location: "Nellore"
},
{
name: "Jyoti",
location: "Shirdi"
},
{
name: "Ashish",
location: "Vijayawada"
},
{
name: "Monika",
location: "Kolhapur"
},
{
name: "Chirag",
location: "Panipat"
},
{
name: "Ekta",
location: "Ambala"
},
{
name: "Gopal",
location: "Solapur"
},
{
name: "Anjali",
location: "Bikaner"
},
{
name: "Rohit",
location: "Hisar"
},
{
name: "Kalpana",
location: "Ujjain"
},
{
name: "Shivam",
location: "Rohtak"
},
{
name: "Megha",
location: "Bilaspur"
},
{
name: "Anand",
location: "Bhagalpur"
},
{
name: "Rekha",
location: "Haridwar"
},
{
name: "Chetan",
location: "Saharanpur"
},
{
name: "Priti",
location: "Haldwani"
},
{
name: "Yogesh",
location: "Anantapur"
},
{
name: "Harsha",
location: "Tirunelveli"
},
{
name: "Kunal",
location: "Salem"
},
{
name: "Trisha",
location: "Gaya"
},
{
name: "Lalit",
location: "Warangal"
},
{
name: "Tanvi",
location: "Noida"
},
{
name: "Naveen",
location: "Faridabad"
},
{
name: "Ruchi",
location: "Ghaziabad"
}
];
// Function to create and display notifications
function displayRandomUserActivity() {
const randomUser = users[Math.floor(Math.random() * users.length)];
const activities = [
"purchased a course",
"signed up on the site"
];
const randomActivity = activities[Math.floor(Math.random() * activities.length)];
// Create notification element
const notification = document.createElement("div");
notification.className = "fomo-notification";
// Create profile picture
const profilePic = document.createElement("div");
profilePic.className = "profile-pic";
profilePic.innerText = randomUser.name.charAt(0).toUpperCase(); // First letter of the name
// Create text content
const textContent = document.createElement("span");
textContent.innerText = `${randomUser.name} from ${randomUser.location} just ${randomActivity}`;
// Append profile picture and text content to notification
notification.appendChild(profilePic);
notification.appendChild(textContent);
// Append to the container
const container = document.getElementById("fomo-container");
container.appendChild(notification);
// Remove notification after 5 seconds
setTimeout(() => {
container.removeChild(notification);
}, 5000);
}
// Function to start showing notifications
function startFomoNotifications() {
setInterval(displayRandomUserActivity, 7000); // Display a new notification every 10 seconds
}
// Add styles dynamically for the notification
const style = document.createElement("style");
style.innerText = `
#fomo-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
.fomo-notification {
display: flex;
align-items: center;
background-color: #007bff;
color: #fff;
padding: 10px 20px;
margin: 5px 0;
border-radius: 5px;
font-family: Arial, sans-serif;
font-size: 14px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.5s, fadeOut 0.5s 4.5s;
}
.profile-pic {
width: 40px;
height: 40px;
background-color: #fff;
color: #007bff;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
border-radius: 50%;
margin-right: 10px;
font-size: 16px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(10px); }
}
`;
document.head.appendChild(style);
// Create the container for notifications
const fomoContainer = document.createElement("div");
fomoContainer.id = "fomo-container";
document.body.appendChild(fomoContainer);
// Start showing FOMO notifications
startFomoNotifications();
</script>Once done, here's what it will look like:
Sample 3 - FOMO with text, profile picture and mins/hr ago
Here's the sample code, copy this code and paste on code content block on landing page. Save the changes and click to preview it.
<script>
// Array of 100 users with Indian names and locations
const users = [{
name: "Aarav",
location: "Mumbai"
},
{
name: "Isha",
location: "Delhi"
},
{
name: "Rohan",
location: "Bengaluru"
},
{
name: "Priya",
location: "Chennai"
},
{
name: "Aditya",
location: "Hyderabad"
},
{
name: "Ananya",
location: "Kolkata"
},
{
name: "Karthik",
location: "Pune"
},
{
name: "Sneha",
location: "Ahmedabad"
},
{
name: "Vikram",
location: "Jaipur"
},
{
name: "Meera",
location: "Lucknow"
},
{
name: "Arjun",
location: "Chandigarh"
},
{
name: "Riya",
location: "Bhopal"
},
{
name: "Varun",
location: "Guwahati"
},
{
name: "Swati",
location: "Surat"
},
{
name: "Nikhil",
location: "Vadodara"
},
{
name: "Pooja",
location: "Nagpur"
},
{
name: "Siddharth",
location: "Coimbatore"
},
{
name: "Tanya",
location: "Vishakhapatnam"
},
{
name: "Manish",
location: "Thiruvananthapuram"
},
{
name: "Deepika",
location: "Mysuru"
},
{
name: "Rahul",
location: "Patna"
},
{
name: "Sonali",
location: "Ranchi"
},
{
name: "Aakash",
location: "Kanpur"
},
{
name: "Neha",
location: "Agra"
},
{
name: "Harish",
location: "Dehradun"
},
{
name: "Payal",
location: "Indore"
},
{
name: "Rajesh",
location: "Amritsar"
},
{
name: "Simran",
location: "Raipur"
},
{
name: "Anil",
location: "Nashik"
},
{
name: "Bhavna",
location: "Meerut"
},
{
name: "Vivek",
location: "Kochi"
},
{
name: "Alok",
location: "Puducherry"
},
{
name: "Divya",
location: "Shimla"
},
{
name: "Kiran",
location: "Panaji"
},
{
name: "Prateek",
location: "Jodhpur"
},
{
name: "Shweta",
location: "Gwalior"
},
{
name: "Rakesh",
location: "Udaipur"
},
{
name: "Ishita",
location: "Varanasi"
},
{
name: "Amit",
location: "Madurai"
},
{
name: "Komal",
location: "Bareilly"
},
{
name: "Ravi",
location: "Jalandhar"
},
{
name: "Anushka",
location: "Cuttack"
},
{
name: "Tarun",
location: "Aurangabad"
},
{
name: "Seema",
location: "Jhansi"
},
{
name: "Mahesh",
location: "Hubballi"
},
{
name: "Nisha",
location: "Vellore"
},
{
name: "Suraj",
location: "Tirupati"
},
{
name: "Pallavi",
location: "Siliguri"
},
{
name: "Arvind",
location: "Aligarh"
},
{
name: "Lavanya",
location: "Moradabad"
},
{
name: "Ganesh",
location: "Guntur"
},
{
name: "Suman",
location: "Bhilai"
},
{
name: "Ajay",
location: "Jammu"
},
{
name: "Radha",
location: "Dharamshala"
},
{
name: "Santosh",
location: "Thrissur"
},
{
name: "Archana",
location: "Rajkot"
},
{
name: "Yash",
location: "Allahabad"
},
{
name: "Snehal",
location: "Erode"
},
{
name: "Bharat",
location: "Kozhikode"
},
{
name: "Veena",
location: "Ludhiana"
},
{
name: "Mukesh",
location: "Imphal"
},
{
name: "Neetu",
location: "Jamshedpur"
},
{
name: "Prakash",
location: "Ajmer"
},
{
name: "Rachna",
location: "Rourkela"
},
{
name: "Vinay",
location: "Nellore"
},
{
name: "Jyoti",
location: "Shirdi"
},
{
name: "Ashish",
location: "Vijayawada"
},
{
name: "Monika",
location: "Kolhapur"
},
{
name: "Chirag",
location: "Panipat"
},
{
name: "Ekta",
location: "Ambala"
},
{
name: "Gopal",
location: "Solapur"
},
{
name: "Anjali",
location: "Bikaner"
},
{
name: "Rohit",
location: "Hisar"
},
{
name: "Kalpana",
location: "Ujjain"
},
{
name: "Shivam",
location: "Rohtak"
},
{
name: "Megha",
location: "Bilaspur"
},
{
name: "Anand",
location: "Bhagalpur"
},
{
name: "Rekha",
location: "Haridwar"
},
{
name: "Chetan",
location: "Saharanpur"
},
{
name: "Priti",
location: "Haldwani"
},
{
name: "Yogesh",
location: "Anantapur"
},
{
name: "Harsha",
location: "Tirunelveli"
},
{
name: "Kunal",
location: "Salem"
},
{
name: "Trisha",
location: "Gaya"
},
{
name: "Lalit",
location: "Warangal"
},
{
name: "Tanvi",
location: "Noida"
},
{
name: "Naveen",
location: "Faridabad"
},
{
name: "Ruchi",
location: "Ghaziabad"
}
];
// Function to generate a random time ago message
function getRandomTimeAgo() {
const timeUnits = [{
unit: "min",
max: 60
},
{
unit: "hr",
max: 24
}
];
const selectedUnit = timeUnits[Math.floor(Math.random() * timeUnits.length)];
const value = Math.floor(Math.random() * selectedUnit.max) + 1; // 1 to max value
return `${value} ${selectedUnit.unit}${value > 1 ? "s" : ""} ago`;
}
// Function to create and display notifications
function displayRandomUserActivity() {
const randomUser = users[Math.floor(Math.random() * users.length)];
const activities = ["purchased a course", "signed up on the site"];
const randomActivity = activities[Math.floor(Math.random() * activities.length)];
const timeAgo = getRandomTimeAgo();
// Create notification element
const notification = document.createElement("div");
notification.className = "fomo-notification";
// Create profile picture
const profilePic = document.createElement("div");
profilePic.className = "profile-pic";
profilePic.innerText = randomUser.name.charAt(0).toUpperCase(); // First letter of the name
// Create text content
const textContent = document.createElement("div");
textContent.className = "notification-text";
const mainMessage = document.createElement("span");
mainMessage.innerText = `${randomUser.name} from ${randomUser.location} just ${randomActivity}`;
const timeMessage = document.createElement("span");
timeMessage.className = "notification-time";
timeMessage.innerText = `\n(${timeAgo})`;
// Append messages to text content
textContent.appendChild(mainMessage);
textContent.appendChild(timeMessage);
// Append profile picture and text content to notification
notification.appendChild(profilePic);
notification.appendChild(textContent);
// Append to the container
const container = document.getElementById("fomo-container");
container.appendChild(notification);
// Remove notification after 5 seconds
setTimeout(() => {
container.removeChild(notification);
}, 5000);
}
// Function to start showing notifications
function startFomoNotifications() {
setInterval(displayRandomUserActivity, 7000); // Display a new notification every 7 seconds
}
// Add styles dynamically for the notification
const style = document.createElement("style");
style.innerText = `
#fomo-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
.fomo-notification {
display: flex;
align-items: center;
background-color: #007bff;
color: #fff;
padding: 10px 20px;
margin: 5px 0;
border-radius: 5px;
font-family: Arial, sans-serif;
font-size: 14px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.5s, fadeOut 0.5s 4.5s;
}
.profile-pic {
width: 40px;
height: 40px;
background-color: #fff;
color: #007bff;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
border-radius: 50%;
margin-right: 10px;
font-size: 16px;
}
.notification-text {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 5px; /* Adds a small gap between the main message and the time */
}
.notification-time {
font-size: 12px;
color: #d0d8e2;
margin-left: 5px; /* Adds a slight margin to separate it visually */
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(10px); }
}
`;
document.head.appendChild(style);
// Create the container for notifications
const fomoContainer = document.createElement("div");
fomoContainer.id = "fomo-container";
document.body.appendChild(fomoContainer);
// Start showing FOMO notifications
startFomoNotifications();
</script>Once done, here's what it will look like:
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article