Create FOMO with notifications on your landing page

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!

Tutorial Video

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 user 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 Prompts?

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>
JavaScript

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.Once done, here's what it will look like:

<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>

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:

Related Articles
Create FOMO with countdown timers and animated 'buy now' buttons as a sticky button on your landing page
Knorish gives you the flexibility to customize your site exactly the way you want. This allows you to write plain JavaScript code to achieve any custom functionality you desire. In this post, we will show you how to create FOMO with an animated "Buy ...
Create course, website or landing pages using the old page builder
This article covers details on how to build new course, site or landing pages using the old Knorish page builder. For using the new page builder which is the default page builder, refer to the Article: Create A Page Using The New Page Builder Using A ...
How to design or create a page using the new Page Builder?
Create stunning web and landing pages with animations, AI and tons of different designs effortlessly. No coding skills needed. The Knorish page builder offers a wide variety of options for quickly designing and launching your web pages for your ...
How to change the video on the banner on your website's landing page?
The landing page video snippet allows the video to be played automatically without the need to create a play button. Additionally, the video will play on all devices irrespective of the OS. This means that whether the OS is windows, Mac, android or ...
How to generate, create or design Images for landing pages and website pages using Knorish AI
Learn how to create images for your landing pages and site pages using the Knorish AI In this concise guide, we'll walk you through the simple steps of using the Knorish AI Assistant. Learn how to effortlessly generate and manage stunning AI-created ...

Create FOMO with notifications on your landing page

Create FOMO with notifications on your landing page

Tutorial Video

Where should I use FOMO popups?

Ethical Considerations: Do I need real user 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 Prompts?

Prompt Template 1: Change Only The Names And Location Of Real Users

Prompt Template 2: Update User Names, Locations, and Time Since Conversion

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

Related Articles

Create FOMO with countdown timers and animated 'buy now' buttons as a sticky button on your landing page

Create course, website or landing pages using the old page builder

How to design or create a page using the new Page Builder?

How to change the video on the banner on your website's landing page?

How to generate, create or design Images for landing pages and website pages using Knorish AI