diff --git a/visualize/index.html b/visualize/index.html index 8cfa569..9d4da32 100644 --- a/visualize/index.html +++ b/visualize/index.html @@ -63,6 +63,9 @@

Visualize WhatsApp Widget on your Website

+
diff --git a/visualize/script.js b/visualize/script.js index 97ee2a1..b7534ff 100644 --- a/visualize/script.js +++ b/visualize/script.js @@ -35,3 +35,15 @@ document.addEventListener('DOMContentLoaded', function () { document.getElementById('bottom').style.height = isFullScreen ? 'calc(100vh - 10px)' : 'calc(100vh - 200px - 10px)'; // 40px for button }); }); + +window.addEventListener('DOMContentLoaded', () => { + const promoBtn = document.getElementById('promo-btn'); + setTimeout(() => { + promoBtn.style.transform = 'translateX(0)'; + promoBtn.style.opacity = '1'; + }, 3000); + + promoBtn.addEventListener('click', () => { + window.open('https://iframeweb.com/tools/free-whatsapp-chat-widget-for-website/', '_blank'); + }); +}); \ No newline at end of file diff --git a/visualize/styles.css b/visualize/styles.css index 78704a3..dd78285 100644 --- a/visualize/styles.css +++ b/visualize/styles.css @@ -151,6 +151,31 @@ button#fullscreen-btn:hover { height: 100vh !important; } +.promo-btn { + position: absolute; + top: 5em; + right: 2em; + padding: 12px 20px; + font-size: 1em; + background-color: #28a745; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 8px; + opacity: 0; + transform: translateX(100%); + transition: transform 0.6s ease, opacity 0.6s ease; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.promo-btn:hover { + background-color: #218838; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); +} + @media only screen and (max-width: 600px) { .form-section { padding: 10px;