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;