Add WishMo on your Mobile, Tablet Or PC

// constants const MODAL_STYLE = ` .wepp-modal-overlay * { box-sizing: border-box; } .wepp-modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); justify-content: center; align-items: center; z-index: 99999; } .wepp-modal-content { min-width: 300px; max-width:340px; background: #fff; border-radius: 10px; position: relative; } .wepp-modal-content h1 { font-size: 18px; } .wepp-modal-body { display: flex; flex-direction: column; align-items: center; gap: 10px; } #wepp-logo { border-radius: 8px; } #wepp-install-button { width: 100%; background: #007bff; color: #fff; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; font-weight: 700; transition: .3s; } #wepp-install-button:hover { background: #0056b3; } #wepp-install-button:active { transform: scale(.98); } #wepp-install-button:disabled { opacity:0.7; cursor: not-allowed; } #wepp-skip-button { all: initial; font:inherit; width: 100%; text-align: center; cursor: pointer; color: #a0a0a0; font-size: 14px; text-decoration: underline; } `; const IOS_MODAL_CONTENT = ` `; const DEFAULT_MODAL_CONTENT = ` ` // functions /** * Function that identifies the favicon as the default logo * and gets the address */ function getFaviconHref() { const linkElements = document.getElementsByTagName('link'); for (let i = 0; i { return isIOS ? IOS_MODAL_CONTENT : DEFAULT_MODAL_CONTENT; }; function createContainer() { const container = document.createElement('div'); container.id = 'wepp-install-modal'; container.className = 'wepp-modal-overlay'; document.body.appendChild(container); return container; } const handleHashChange = () => { const hash = window.location.hash; const isValidHash = hash.startsWith('#wepp-install-modal'); const modal = document.getElementById('wepp-install-modal'); modal.style.display = isValidHash ? 'flex' : 'none'; }; const initializePWAInfo = () => { const nameElement = document.getElementById('wepp-name'); const logoElement = document.getElementById('wepp-logo'); const name = document.title; const logo = getFaviconHref(); nameElement.textContent = name; logoElement.src = logo; } function handleModalClose() { window.location.hash = ''; const modal = document.getElementById('wepp-install-modal'); modal.style.display = 'none'; } function preventModalContentClick(event) { event.stopPropagation(); } function initializeModalEvents() { const modal = document.getElementById('wepp-install-modal'); const skipButton = document.getElementById('wepp-skip-button'); const modalContent = modal.querySelector('.wepp-modal-content'); // Close Modal on Background Click modal.addEventListener('click', handleModalClose); modalContent.addEventListener('click', preventModalContentClick); skipButton.addEventListener('click', handleModalClose); } const showPrompt = (deferredPrompt) => { try { deferredPrompt.prompt(); // Show the install prompt // Wait for the user to respond to the prompt deferredPrompt.userChoice.then((choiceResult) => { if (choiceResult.outcome === 'accepted') { // User accepted the install prompt handleModalClose(); } else { // User dismissed the install prompt } // Clear the deferredPrompt variable deferredPrompt = null; }); } catch (error) { console.log('Error: ', error); } } function main() { const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent); appendStyles(); // Create Modal containers and add them to dom const container = createContainer(); container.innerHTML = getModalContent(isIOS); // initializeModal handleHashChange(); initializePWAInfo(); initializeModalEvents(); // initialize hash change event window.addEventListener('hashchange', handleHashChange); // --------------------------------------------------------- const state = createProxy(); if (!isIOS) { window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); const deferredPrompt = e; const installButton = document.getElementById('wepp-install-button'); installButton.addEventListener('click', () => showPrompt(deferredPrompt), { once: true }) installButton.innerText = 'Install as an app'; installButton.disabled = false; state.isInstalled = false; }); } window.addEventListener('appinstalled', () => { state.isInstalled = true; console.log('PWA was installed'); }); } if (document.readyState === "loading") { // Loading hasn't finished yet document.addEventListener("DOMContentLoaded", main); } else { // `DOMContentLoaded` has already fired main(); } .add-btn{ margin-top: 50px; margin: 20px; padding: 10px 30px; font-size:18px; } @media screen and (max-width: 767px) { .bh4{ font-size: 1.1rem; } .add-btn{ font-size:16px; } }