| Server IP : 80.211.21.168 / Your IP : 216.73.217.33 Web Server : Apache System : Linux alex-webdesign.it 3.10.0-1160.119.1.el7.tuxcare.els22.x86_64 #1 SMP Mon Aug 18 06:07:12 UTC 2025 x86_64 User : admin_japan ( 10003) PHP Version : 8.2.32 Disable Function : opcache_get_status MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/vhosts/cerchijapan.it/test.ai4dealers.com/ |
Upload File : |
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Chat WhatsApp</title>
<style>
/* --- Launcher circolare --- */
#gc-chat-launcher {
position: fixed;
bottom: 20px;
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: #25d366;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
z-index: 9998;
transition: transform .2s ease, opacity .2s ease;
}
#gc-chat-launcher.gc-hidden {
opacity: 0;
pointer-events: none;
}
/* Effetto "brilla" / pulse */
#gc-chat-launcher.gc-attention {
animation: gc-pulse 1s ease-out infinite;
}
@keyframes gc-pulse {
0% {
transform: scale(1);
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
50% {
transform: scale(1.12);
box-shadow: 0 0 18px rgba(37,211,102,0.9);
}
100% {
transform: scale(1);
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
}
/* --- Finestra chat --- */
#gc-chat-widget {
position: fixed;
bottom: 90px;
right: 20px;
width: 340px;
max-width: 95vw;
background: #f5f5f5;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0,0,0,0.25);
display: flex;
flex-direction: column;
overflow: hidden;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
z-index: 9999;
opacity: 0;
pointer-events: none;
transform: translateY(20px);
transition: opacity .25s ease, transform .25s ease;
}
#gc-chat-widget.gc-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
#gc-chat-widget.gc-hidden {
opacity: 0;
pointer-events: none;
}
/* --- Header stile WhatsApp --- */
.gc-chat-header {
background: #075e54;
color: #fff;
padding: 10px;
display: flex;
align-items: center;
}
.gc-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #ece5dd;
color: #075e54;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin-right: 8px;
flex-shrink: 0;
}
.gc-header-info {
flex: 1;
}
.gc-name {
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
.gc-status {
font-size: 11px;
opacity: 0.85;
}
.gc-close-btn {
cursor: pointer;
font-size: 22px;
line-height: 1;
}
/* --- Corpo chat --- */
.gc-chat-body {
background: #e5ddd5;
padding: 10px;
min-height: 70px;
}
.gc-message {
display: flex;
flex-direction: column;
max-width: 90%;
}
.gc-incoming .gc-bubble {
align-self: flex-start;
background: #fff;
border-radius: 8px 8px 8px 0;
}
.gc-bubble {
padding: 8px 10px;
font-size: 13px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.gc-time {
font-size: 10px;
opacity: .7;
margin-top: 2px;
align-self: flex-end;
}
/* --- Footer --- */
.gc-chat-footer {
background: #f0f0f0;
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
border-top: 1px solid #ddd;
}
.gc-footer-note {
font-size: 11px;
color: #777;
}
#gc-whatsapp-btn {
border: none;
background: #25d366;
color: #fff;
padding: 8px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
#gc-whatsapp-btn:hover {
filter: brightness(1.05);
}
/* MOBILE */
@media (max-width: 480px) {
#gc-chat-widget {
right: 10px;
left: 10px;
bottom: 80px;
width: auto;
}
#gc-chat-launcher {
bottom: 15px;
right: 15px;
}
.gc-bubble {
font-size: 12px;
}
#gc-whatsapp-btn {
font-size: 12px;
padding: 7px 10px;
}
}
</style>
</head>
<body>
<h1 style="padding:20px;font-family:sans-serif;">Pagina di test</h1>
<!-- Launcher -->
<div id="gc-chat-launcher" class="gc-hidden">
๐ฌ
</div>
<!-- Widget -->
<div id="gc-chat-widget" class="gc-hidden">
<div class="gc-chat-header">
<div class="gc-avatar">M</div>
<div class="gc-header-info">
<div class="gc-name">Mario - Consulente</div>
<div class="gc-status">online</div>
</div>
<div class="gc-close-btn" id="gc-chat-close">×</div>
</div>
<div class="gc-chat-body">
<div class="gc-message gc-incoming">
<div class="gc-bubble">
Benvenuto in Guidi Car Srl, come posso aiutarla?
</div>
<!-- Orario dinamico -->
<div class="gc-time" id="gc-chat-time"></div>
</div>
</div>
<div class="gc-chat-footer">
<div class="gc-footer-note">
Tempo di attesa: 1 minuto
</div>
<button id="gc-whatsapp-btn">Continua su WhatsApp</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// ๐ Metti qui il numero WhatsApp (senza +, con prefisso internazionale)
const whatsappNumber = "393480192366";
const launcher = document.getElementById('gc-chat-launcher');
const widget = document.getElementById('gc-chat-widget');
const closeBtn = document.getElementById('gc-chat-close');
const waBtn = document.getElementById('gc-whatsapp-btn');
const timeEl = document.getElementById('gc-chat-time');
// Apertura automatica dopo 5 secondi
const OPEN_DELAY_MS = 5000;
if (!launcher || !widget || !closeBtn || !waBtn) {
console.error('Widget chat: elementi non trovati nel DOM');
return;
}
// Imposto l'orario corrente nel messaggio (formato HH:MM)
if (timeEl) {
const now = new Date();
const hh = String(now.getHours()).padStart(2, '0');
const mm = String(now.getMinutes()).padStart(2, '0');
timeEl.textContent = hh + ':' + mm;
}
// Mostro il pallino subito
launcher.classList.remove('gc-hidden');
// Apertura automatica dopo il delay
setTimeout(function () {
widget.classList.add('gc-visible');
widget.classList.remove('gc-hidden');
}, OPEN_DELAY_MS);
// Clic sul pallino: apre/chiude la chat
launcher.addEventListener('click', function () {
const isVisible = widget.classList.contains('gc-visible');
if (isVisible) {
widget.classList.remove('gc-visible');
widget.classList.add('gc-hidden');
} else {
widget.classList.add('gc-visible');
widget.classList.remove('gc-hidden');
}
});
// Clic sulla X: chiude la finestra, ma l'exit intent resta attivo
closeBtn.addEventListener('click', function () {
widget.classList.remove('gc-visible');
widget.classList.add('gc-hidden');
});
// Funzione per aprire WhatsApp con messaggio precompilato
function openWhatsApp() {
const currentUrl = window.location.href;
const text = "Buongiorno, ero interessato a questo: " + currentUrl;
const encodedText = encodeURIComponent(text);
const waUrl = "https://wa.me/" + whatsappNumber + "?text=" + encodedText;
window.open(waUrl, "_blank");
}
waBtn.addEventListener('click', openWhatsApp);
// --- EXIT INTENT: SEMPRE attivo, anche dopo la chiusura ---
function handleExitIntent() {
// solo desktop (niente touch)
if ('ontouchstart' in window) return;
// se la chat non รจ visibile, la apro e faccio pulsare il bottone
if (!widget.classList.contains('gc-visible')) {
launcher.classList.add('gc-attention');
widget.classList.add('gc-visible');
widget.classList.remove('gc-hidden');
setTimeout(function () {
launcher.classList.remove('gc-attention');
}, 3000);
}
}
// Rileva il mouse che va verso l'alto (intenzione di cambiare/chiudere scheda)
document.addEventListener('mousemove', function (e) {
if (e.clientY <= 10) {
handleExitIntent();
}
});
// Fallback extra: mouseleave dall'html verso l'alto
document.addEventListener('mouseleave', function (e) {
if (e.clientY <= 0) {
handleExitIntent();
}
});
});
</script>
</body>
</html>