Advanced Geo-based FOMO Widget

भारतीय Businesses के लिए Smart Landing Page Optimizer
Live Widget Preview:

Embed Code (Copy & Paste):

<!-- FOMO Widget Embed Code - Start -->
<div id="geo-fomo-widget"></div>
<script>
// FOMO Widget Configuration
const fomoConfig = {
    cities: ['Delhi', 'Mumbai', 'Bangalore', 'Chennai', 'Kolkata', 'Pune', 'Hyderabad', 'Ahmedabad', 'Jaipur', 'Lucknow'],
    offers: [
        'केवल {city} ग्राहकों के लिए 25% छूट!',
        '{city} users के लिए आज फ्री डिलीवरी!',
        'सिर्फ {city} में स्पेशल ऑफर - 40% तक बचाएं!',
        '{city} के लिए एक्सक्लूसिव डील - अभी ऑर्डर करें!',
        'आज {city} में बंपर छूट - 50% OFF!',
        '{city} वालों के लिए स्पेशल प्राइस - केवल आज!'
    ],
    scarcityMessages: [
        'केवल आज तक ⏰',
        'सिर्फ 25 लोगों के लिए 🔥',
        'ऑफर खत्म होने से पहले जल्दी करें ⚡',
        'अभी सिर्फ 10 स्लॉट्स बचे हैं! 🎯',
        'लास्ट चांस - मिडनाइट तक! 🌙',
        'केवल 2 घंटे बचे हैं! 🚨'
    ],
    ctaTexts: [
        'अभी ऑर्डर करें! 🛒',
        'Deal Grab करें! 💰',
        'अभी खरीदें! ⚡',
        'ऑफर क्लेम करें! 🎁'
    ]
};

// Widget HTML Generator
function getFomoWidgetHTML() {
    return `
        <style>
            .fomo-widget { font-family: system-ui, -apple-system, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); position: fixed; bottom: 20px; right: 20px; z-index: 9999; max-width: 350px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); border-radius: 15px; color: white; padding: 16px; animation: pulse-glow 3s ease-in-out infinite alternate; }
            @keyframes pulse-glow { 0% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.4); } 100% { box-shadow: 0 0 40px rgba(118, 75, 162, 0.6); } }
            @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
            .shake-animation { animation: shake 0.5s ease-in-out; }
            .countdown-digit { background: linear-gradient(45deg, #ff6b6b, #ee5a24); color: white; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.3); padding: 4px 8px; border-radius: 4px; text-align: center; min-width: 32px; }
            .offer-badge { background: linear-gradient(45deg, #feca57, #ff9ff3); animation: bounce 2s infinite; padding: 2px 8px; border-radius: 20px; font-size: 12px; }
            @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }
            .scarcity-text { animation: fadeInOut 3s ease-in-out infinite; }
            @keyframes fadeInOut { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
            .city-select { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); width: 100%; padding: 8px 12px; border-radius: 8px; color: #374151; font-weight: 500; outline: none; }
            .cta-button { background: linear-gradient(45deg, #28a745, #20c997); transition: all 0.3s ease; width: 100%; padding: 12px 16px; border-radius: 8px; font-weight: bold; color: white; border: none; cursor: pointer; }
            .cta-button:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(40, 167, 69, 0.4); }
            @media (max-width: 640px) { .fomo-widget { bottom: 10px; right: 10px; left: 10px; max-width: none; } }
        </style>
        <div class="fomo-widget">
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
                <div style="display: flex; align-items: center;">
                    <span style="color: #fb923c; margin-right: 8px;">🔥</span>
                    <span style="font-size: 14px; font-weight: 600;">HOT DEAL</span>
                </div>
                <div class="offer-badge">LIMITED TIME</div>
            </div>
            <div style="margin-bottom: 12px;">
                <select id="city-selector" class="city-select">
                    <option value="">अपना शहर चुनें</option>
                    ${fomoConfig.cities.map(city => `<option value="${city}">${city}</option>`).join('')}
                </select>
            </div>
            <div id="offer-text" style="font-size: 18px; font-weight: bold; margin-bottom: 12px; min-height: 48px; display: flex; align-items: center;">
                <span style="color: #fbbf24; margin-right: 8px;">🎁</span>
                <span>शहर चुनें और अपना ऑफर देखें!</span>
            </div>
            <div class="scarcity-text" style="font-size: 14px; background: rgba(239, 68, 68, 0.8); padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; text-align: center;">
                <span id="scarcity-message">🔥 सीमित समय के लिए उपलब्ध! 🔥</span>
            </div>
            <div style="margin-bottom: 16px;">
                <div style="font-size: 12px; text-align: center; margin-bottom: 8px; color: #e5e7eb;">ऑफर समाप्त होने में:</div>
                <div id="countdown-timer" style="display: flex; justify-content: center; gap: 4px;">
                    <div class="countdown-digit">
                        <div style="font-size: 18px; font-weight: bold;" id="hours">00</div>
                        <div style="font-size: 12px;">घंटे</div>
                    </div>
                    <div class="countdown-digit">
                        <div style="font-size: 18px; font-weight: bold;" id="minutes">00</div>
                        <div style="font-size: 12px;">मिनट</div>
                    </div>
                    <div class="countdown-digit">
                        <div style="font-size: 18px; font-weight: bold;" id="seconds">00</div>
                        <div style="font-size: 12px;">सेकंड</div>
                    </div>
                </div>
            </div>
            <button id="cta-button" class="cta-button" onclick="handleCTAClick()">
                <span>🛒</span>
                <span id="cta-text">अभी ऑर्डर करें! 🛒</span>
            </button>
            <div style="margin-top: 12px; font-size: 12px; text-align: center; color: #e5e7eb;">
                <span>👥</span>
                <span id="social-proof">आज 247+ लोगों ने खरीदा!</span>
            </div>
        </div>
    `;
}

// Initialize FOMO Widget
function initializeFomoWidget() {
    let currentScarcityIndex = 0;
    let currentOfferIndex = 0;
    let currentCTAIndex = 0;
    
    // Load saved city
    const savedCity = localStorage.getItem('fomoSelectedCity');
    if (savedCity) {
        document.getElementById('city-selector').value = savedCity;
        updateOfferForCity(savedCity);
    }
    
    // City selector event
    document.getElementById('city-selector').addEventListener('change', function(e) {
        const selectedCity = e.target.value;
        if (selectedCity) {
            localStorage.setItem('fomoSelectedCity', selectedCity);
            updateOfferForCity(selectedCity);
            
            // Add shake animation
            document.querySelector('.fomo-widget').classList.add('shake-animation');
            setTimeout(() => {
                document.querySelector('.fomo-widget').classList.remove('shake-animation');
            }, 500);
        }
    });
    
    // Update offer text based on selected city
    function updateOfferForCity(city) {
        currentOfferIndex = Math.floor(Math.random() * fomoConfig.offers.length);
        const offerText = fomoConfig.offers[currentOfferIndex].replace('{city}', city);
        document.getElementById('offer-text').innerHTML = `
            <span style="color: #fbbf24; margin-right: 8px;">🎁</span>
            <span>${offerText}</span>
        `;
        
        // Update social proof
        const randomCount = Math.floor(Math.random() * 100) + 150;
        document.getElementById('social-proof').textContent = `आज ${randomCount}+ ${city} के लोगों ने खरीदा!`;
    }
    
    // Rotate scarcity messages
    function rotateScarcityMessage() {
        currentScarcityIndex = (currentScarcityIndex + 1) % fomoConfig.scarcityMessages.length;
        document.getElementById('scarcity-message').textContent = fomoConfig.scarcityMessages[currentScarcityIndex];
    }
    
    // Rotate CTA text  
    function rotateCTAText() {
        currentCTAIndex = (currentCTAIndex + 1) % fomoConfig.ctaTexts.length;
        document.getElementById('cta-text').textContent = fomoConfig.ctaTexts[currentCTAIndex];
    }
    
    // Real countdown timer
    function updateCountdown() {
        const now = new Date();
        const midnight = new Date();
        midnight.setHours(23, 59, 59, 999);
        
        const timeLeft = midnight - now;
        
        if (timeLeft <= 0) {
            document.getElementById('countdown-timer').innerHTML = `
                <div style="text-align: center; color: #f87171; font-weight: bold;">
                    ❌ Offer समाप्त हो गया!
                </div>
            `;
            document.getElementById('cta-button').innerHTML = `
                🕒 कल फिर आएं!
            `;
            document.getElementById('cta-button').disabled = true;
            document.getElementById('cta-button').style.opacity = '0.5';
            return;
        }
        
        const hours = Math.floor(timeLeft / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
        
        document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
        document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
        document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
    }
    
    // Start intervals
    setInterval(rotateScarcityMessage, 3000);
    setInterval(rotateCTAText, 5000);
    setInterval(updateCountdown, 1000);
    
    // Initial calls
    updateCountdown();
    rotateScarcityMessage();
}

// CTA Click Handler
function handleCTAClick() {
    const selectedCity = document.getElementById('city-selector').value;
    if (!selectedCity) {
        alert('पहले अपना शहर चुनें!');
        document.getElementById('city-selector').focus();
        return;
    }
    
    // Track conversion (integrate with your analytics)
    console.log('FOMO Conversion:', {
        city: selectedCity,
        timestamp: new Date(),
        offer: document.getElementById('offer-text').textContent
    });
    
    // Replace this alert with your checkout page redirect
    alert(`${selectedCity} से ऑर्डर confirmed! 🎉\n\nThis is demo - integrate with your checkout page.`);
}

// Initialize Widget
(function() {
    document.getElementById('geo-fomo-widget').innerHTML = getFomoWidgetHTML();
    initializeFomoWidget();
})();
</script>
<!-- FOMO Widget Embed Code - End -->
Usage Instructions:
Copy the code above using any copy button
Paste it just before the closing </body> tag of your webpage
The widget will automatically appear on your site
Customize the handleCTAClick() function with your checkout URL
Core Features

✓ Manual City Selection (10+ Indian Cities)
✓ Dynamic Offer Banners
✓ Real Countdown Timer
✓ Rotating Scarcity Messages
✓ Mobile-First Design
Advanced Features

✓ No API Dependency
✓ Lightweight (< 15KB)
✓ LocalStorage Memory
✓ Copy-Paste Embeddable
✓ Conversion Optimized
Advanced Geo-based FOMO Widget

Live Widget Preview:

Embed Code (Copy & Paste):

Core Features

Advanced Features

Expected Performance Impact
