Funnelish Sales Notification Popups Like Proofy

script.js

(function () {
  const sampleData = [
    { 
      name: "Nola D.", 
      location: "New York", 
      product: "Bundle of 3 Correct & Boost Serums", 
      mapImage: "https://img.funnelish.com/51272/685804/1737272988-3NUWR_1UTUTU-Photoroom.webp"
    },
    { 
      name: "Emma R.", 
      location: "London", 
      product: "Bundle of 6 Correct & Boost Serum", 
      mapImage: "https://img.funnelish.com/51272/615211/1730973969-6NUWR-Photoroom.jpg" 
    },
    { 
      name: "Liam P.", 
      location: "Los Angeles", 
      product: "Bundle of 3 Total Transformation Kits", 
      mapImage: "https://img.funnelish.com/51272/685804/1737273155-TT_%203_bathroon-Photoroom.webp" 
    },
    { 
      name: "Sophia G.", 
      location: "Dallas", 
      product: "Bundle of 6 Correct & Boost Serum", 
      mapImage: "https://img.funnelish.com/51272/615211/1730973969-6NUWR-Photoroom.jpg" 
    },
  ];

  // Generate a random time (e.g., "6 minutes ago")
  function getRandomTime() {
      const minutes = Math.floor(Math.random() * 30) + 1; // Random number between 1 and 30
      return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
  }

  // Function to display a Proofy popup with animations
  function showProofyPopup(data) {
      const popup = document.createElement('div');
      popup.className = 'proofy-popup';
      popup.style.cssText = `
          position: fixed;
          bottom: 10%;
          left: -400px; /* Start off-screen */
          display: flex;
          align-items: center;
          max-width: 350px;
          background: #ffffff;
          padding: 10px 15px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
          border-radius: 10px;
          font-family: Arial, sans-serif;
          font-size: 14px;
          z-index: 9999;
          transition: all 0.5s ease-in-out; /* For sliding effect */
      `;

      popup.innerHTML = `
          <div style="flex-shrink: 0; margin-right: 10px;">
              <img src="${data.mapImage}" alt="Map of ${data.location}" 
                  style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;">
          </div>
          <div>
              <div>
                  <strong style="color: #007bff;">${data.name}</strong> 
                  <span style="color: #6c757d; font-size: 12px;">from ${data.location}</span>
              </div>
              <div>
                  just purchased <strong style="color: #28a745;">${data.product}</strong>! 🎉
              </div>
              <div style="font-size: 12px; color: #6c757d; margin-top: 5px;">
                  ${getRandomTime()} · 
                  <span style="color: #ffc107;">
                      <img src="https://img.funnelish.com/19578/713439/1738650829-material-symbols_verified.svg" 
                           alt="Verified Badge" style="vertical-align: middle; margin-right: 5px; max-width: 12px;">
                      Verified by Proofy
                  </span>
              </div>
          </div>
      `;

      document.body.appendChild(popup);

      // Slide-in effect
      setTimeout(() => {
          popup.style.left = '10%'; // Slide into view
      }, 100);

      // Slide-out and remove after 5 seconds
      setTimeout(() => {
          popup.style.left = '-400px'; // Slide out of view
          setTimeout(() => popup.remove(), 500); // Remove after slide-out
      }, 5000);
  }

  // Function to cycle through sample data
  function simulateProofy() {
      let index = 0;
      setInterval(() => {
          if (index >= sampleData.length) index = 0;
          showProofyPopup(sampleData[index]);
          index++;
      }, 7000); // Adjust interval time as needed
  }

  // Start simulation
  simulateProofy();
})();