Pricing

/* Basic body styling */ body { font-family: Arial, sans-serif; margin: 20px; overflow-x: auto; /* Allows horizontal scrolling if content overflows */ } /* Container styling */ .container { max-width: 1200px; margin: auto; overflow: hidden; } /* Header and toggle button styles */ .header { display: flex; align-items: center; justify-content: space-between; padding: 10px; } /* Currency dropdown styling */ .currency-dropdown { padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 10px; background-color: #ffffff; color: #333; transition: border 0.3s; } .currency-dropdown:hover { border-color: #4172f3; /* Change border color on hover */ } /* Toggle button group styling */ .toggle-buttons { display: flex; width: 100%; max-width: 600px; /* Adjust as needed for your layout */ margin: auto; border: 1px solid #ccc; border-radius: 30px; /* Curved edges around the entire toggle */ overflow: hidden; } /* Hide radio buttons */ .toggle-buttons input { display: none; } /* Default label styling */ .toggle-buttons label { flex: 1; cursor: pointer; display: flex; justify-content: center; align-items: center; padding: 10px 0; background: white; color: #4172f3; /* Default color */ font-weight: bold; font-size: 16px; transition: background 0.3s, color 0.3s; } /* Hover effect for labels */ .toggle-buttons label:hover { background-color: #e6f0ff; } /* Styling for the selected (checked) options */ #duration-monthly:checked + label[for="duration-monthly"] { background: #4172f3; color: white; border-radius: 30px 0 0 30px; /* Rounded left side for Monthly */ } #duration-quarterly:checked + label[for="duration-quarterly"] { background: #4172f3; color: white; border-radius: 0; /* Rectangle for Quarterly */ } #duration-yearly:checked + label[for="duration-yearly"] { background: #4172f3; color: white; border-radius: 0 30px 30px 0; /* Rounded right side for Yearly */ } /* Table styling */ table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: center; } th { background-color: #f1f1f1; } /* Table row styles for features */ .left-align { text-align: left; background-color: #f1f1f1; font-weight: bold; } .left-alignfeature { text-align: left; overflow: hidden; white-space: nowrap; /* Prevent line breaks */ } /* Price styling */ .price { font-weight: bold; font-size: 1.2em; } /* Subscription button styles */ .subscribe-btn { background-color: white; color: black; padding: 10px 40px; border: 2px solid #ccc; border-radius: 30px; cursor: pointer; text-decoration: none; margin: 5px; transition: background-color 0.3s, color 0.3s; } .subscribe-btn:hover { background-color: #4172f3; color: white; border-color: #4172f3; } /* Feature availability colors */ .available { color: black; } .unavailable { color: red; } /* Popular label style */ .popular-label { background-color: #f39c12; color: white; font-size: 12px; font-weight: bold; text-align: center; padding: 3px 5px; border-radius: 5px; margin-bottom: 5px; display: inline-block; } async function setDefaultCurrency() { try { const response = await fetch("https://ipapi.co/json/"); const data = await response.json(); const country = data.country; let defaultCurrency; switch (country) { case "IN": defaultCurrency = "INR"; break; case "SG": defaultCurrency = "SGD"; break; case "MY": defaultCurrency = "MYR"; break; case "DE": case "FR": case "ES": // You can add more countries here if needed defaultCurrency = "EUR"; break; default: defaultCurrency = "INR"; // Default to USD if no match } // Set the default currency in the dropdown const currencyDropdown = document.getElementById("currency"); currencyDropdown.value = defaultCurrency; // Set default currency based on location // Update the pricing for the default currency await updatePricing(); // Ensure pricing is updated after setting the currency } catch (error) { console.error("Error fetching user location:", error); document.getElementById("currency").value = "INR"; // Fallback to USD if error occurs await updatePricing(); // Update pricing with fallback } } // Fetch exchange rate for the selected currency async function fetchExchangeRate(currency) { try { const response = await fetch(`https://api.exchangerate-api.com/v4/latest/INR`); const data = await response.json(); return data.rates[currency] || 1; // Return 1 if currency is not found } catch (error) { console.error("Error fetching exchange rates:", error); return 1; // Fallback to 1 if API fails } } // Format price to nearest integer function formatPrice(price) { return Math.round(price); } // Update pricing based on selected duration and currency async function updatePricing() { const duration = document.querySelector('input[name="duration-switch"]:checked').value; const currency = document.getElementById("currency").value; let priceMultiplier; if (duration === "monthly") { priceMultiplier = 1; } else if (duration === "quarterly") { priceMultiplier = 3 * 0.9; // Quarterly with 10% discount } else if (duration === "yearly") { priceMultiplier = 12 * 0.8; // Yearly with 20% discount } const basePrices = { free: 0, enterprise: 300, pro: 500, ultimate: 800 }; let conversionRate = 1; if (currency !== "INR") { conversionRate = await fetchExchangeRate(currency); } const currencySymbols = { INR: "₹", USD: "$", MYR: "RM", SGD: "S$", EUR: "€" }; const currencySymbol = currencySymbols[currency] || "$"; // Default to "$" if not found document.getElementById("free-monthly").innerText = `${currencySymbol} ${formatPrice(basePrices.free * priceMultiplier * conversionRate)}`; document.getElementById("enterprise-monthly").innerText = `${currencySymbol} ${formatPrice(basePrices.enterprise * priceMultiplier * conversionRate)}`; document.getElementById("pro-monthly").innerText = `${currencySymbol} ${formatPrice(basePrices.pro * priceMultiplier * conversionRate)}`; document.getElementById("ultimate-monthly").innerText = `${currencySymbol} ${formatPrice(basePrices.ultimate * priceMultiplier * conversionRate)}`; const urls = { monthly: { free: 'https://xpressbot.org/users/register', enterprise: 'https://xpressbot.org/users/?add-to-cart=31120', pro: 'https://xpressbot.org/users/?add-to-cart=31126', ultimate: 'https://xpressbot.org/users/?add-to-cart=31127', }, quarterly: { free: 'https://xpressbot.org/users/register', enterprise: 'https://xpressbot.org/users/?add-to-cart=31455', pro: 'https://xpressbot.org/users/?add-to-cart=31457', ultimate: 'https://xpressbot.org/users/?add-to-cart=31456', }, yearly: { free: 'https://xpressbot.org/users/register', enterprise: 'https://xpressbot.org/users/?add-to-cart=31464', pro: 'https://xpressbot.org/users/?add-to-cart=31466', ultimate: 'https://xpressbot.org/users/?add-to-cart=31465', } }; document.getElementById('free-url').setAttribute('onclick', `window.open('${urls[duration].free}', '_blank');`); document.getElementById('enterprise-url').setAttribute('onclick', `window.open('${urls[duration].enterprise}', '_blank');`); document.getElementById('pro-url').setAttribute('onclick', `window.open('${urls[duration].pro}', '_blank');`); document.getElementById('ultimate-url').setAttribute('onclick', `window.open('${urls[duration].ultimate}', '_blank');`); } document.addEventListener('DOMContentLoaded', async function () { await setDefaultCurrency(); // Ensure currency is set before updating pricing }); window.addEventListener('DOMContentLoaded', function () { // Calculate the height of the content (you can use scrollHeight or offsetHeight) var height = document.documentElement.scrollHeight; // Log the height to check if it’s correct console.log("Iframe content height: " + height); // Send the height to the parent window (WordPress) window.parent.postMessage(height, "*"); }); // Tawk.to script var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date(); (function () { var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0]; s1.async = true; s1.src = 'https://embed.tawk.to/65305618f2439e1631e5e9b1/1hd2d0k20'; s1.charset = 'UTF-8'; s1.setAttribute('crossorigin', '*'); s0.parentNode.insertBefore(s1, s0); })();