Faydalı WhatsApp Üslubunda Canlı Dəstək Vidceti – Pulsuz HTML Skript

İlqar Ramizoğlu · 3 Avqust 2025

Veb saytınıza müasir, estetik və mobil uyğun canlı dəstək qutusu əlavə etmək istəyirsiniz?

Heç bir sətir kod yazmadan, öz WhatsApp bənzəri dəstək vidcetinizi saytınıza inteqrasiya edə bilərsiniz. Forumlarda, şəxsi layihələrdə və ya korporativ saytlar üçün uyğundur!

Əsas Xüsusiyyətlər:

WhatsApp Üslubunda İnterfeys

Gerçək WhatsApp hissi verən müasir dizayn və istifadəçi təcrübəsi

Sürətli Mesaj Düymələri

“İş saatlarınız necədir?” kimi 5 fərqli hazır sual – bir kliklə tez cavab

Cavablara Xüsusi Düymələr

Zəng et /

WhatsApp-la yaz /

E-poçt göndər seçimləri hər cavabda yer alır

Responsive Dizayn (Uyğunlaşan Görünüş)

Mobil cihazlarda tam ekran – masaüstündə qutu şəklində görünür

Zərif Animasiya Effektləri

Hover, shimmer, mesaj keçidi və avatar animasiyaları ilə canlı görünüş

Şirkət Məlumatları Sahəsi

Şirkət adı, ünvan, telefon və e-poçt məlumatları üçün xüsusi sahə

Sürüşən (Kayan) Düymə

Sağ altda sabit düymə – kliklədikdə vidcet açılır / bağlanır

Necə İstifadə Etməli?

Skript faylını HTML səhifənizin <body> hissəsinə yerləşdirin

Telefon nömrənizi və

e-poçt ünvanınızı PHONE_NUMBER və handleEmail() hissələrində dəyişin

Şirkət adı, ünvan və digər məlumatları tənzimləyin

Yayınlayın və dərhal işləməyə başlasın!

🛠 Fərdiləşdirilə bilərmi?

Bəli! Rənglər, ikonlar, suallar, cavablar və animasiyalar asanlıqla HTML və CSS vasitəsilə dəyişdirilə bilər. Kod tamamilə açıq mənbəli və sadə yazılıb.

Qeyd:

Bu sadəcə demo interfeys nümunəsidir. Gerçək süni intellekt və ya çat motoru daxil deyil, əvvəlcədən təyin olunmuş cavablara əsaslanır. Lakin WhatsApp yönləndirməsi və zəng / e-poçt funksiyaları aktivdir.

Paylaş, istifadə et, inkişaf etdirmək istəyənlərlə böyüt!

Əgər sən də geliştiricisənsə, töhfə verməyə dəvətlisən.

KODLAR:

HTML:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canlı Destek</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
 
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
 
.chat-widget {
position: relative;
width: 400px;
max-width: 100%;
background: #f0f2f5;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
overflow: hidden;
transform: translateY(0);
transition: all 0.3s ease;
}
 
.chat-widget:hover {
transform: translateY(-5px);
box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}
 
.chat-header {
background: linear-gradient(135deg, #25d366, #128c7e);
color: white;
padding: 20px;
position: relative;
overflow: hidden;
}
 
.chat-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
transform: rotate(45deg);
animation: shimmer 3s infinite;
}
 
@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
 
.header-content {
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
 
.avatar {
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 24px;
color: #25d366;
animation: pulse 2s infinite;
}
 
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
 
.company-info h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 4px;
}
 
.status {
font-size: 14px;
opacity: 0.9;
display: flex;
align-items: center;
}
 
.status::before {
content: '●';
color: #4ade80;
margin-right: 5px;
animation: blink 1.5s infinite;
}
 
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0.5; }
}
 
.close-btn {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255,255,255,0.2);
border: none;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
}
 
.close-btn:hover {
background: rgba(255,255,255,0.3);
transform: rotate(90deg);
}
 
.chat-body {
padding: 25px;
background: #fff;
display: flex;
flex-direction: column;
height: calc(100% - 80px);
}
 
.company-details {
background: #f8fafc;
border-radius: 15px;
padding: 20px;
margin-bottom: 20px;
border-left: 4px solid #25d366;
}
 
.company-name {
font-size: 20px;
font-weight: 700;
color: #1f2937;
margin-bottom: 10px;
}
 
.company-address {
color: #6b7280;
font-size: 14px;
margin-bottom: 15px;
line-height: 1.5;
}
 
.contact-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
 
.contact-btn {
padding: 8px 16px;
border-radius: 20px;
border: none;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 5px;
}
 
.btn-call {
background: #3b82f6;
color: white;
}
 
.btn-call:hover {
background: #2563eb;
transform: translateY(-2px);
}
 
.btn-email {
background: #8b5cf6;
color: white;
}
 
.btn-email:hover {
background: #7c3aed;
transform: translateY(-2px);
}
 
.btn-location {
background: #25d366;
color: white;
}
 
.btn-location:hover {
background: #128c7e;
transform: translateY(-2px);
}
 
.welcome-message {
background: #e0f2fe;
padding: 15px;
border-radius: 15px;
margin-bottom: 20px;
color: #0f4c75;
font-size: 14px;
line-height: 1.5;
position: relative;
}
 
.welcome-message::before {
content: '<img draggable="false" role="img" class="emoji" alt="💬" src="https://s.w.org/images/core/emoji/16.0.1/svg/1f4ac.svg">';
position: absolute;
top: -5px;
left: 15px;
font-size: 20px;
}
 
.quick-options {
margin-bottom: 20px;
}
 
.quick-options h4 {
color: #374151;
font-size: 16px;
margin-bottom: 15px;
font-weight: 600;
}
 
.option-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
 
.option-btn {
background: #f3f4f6;
border: 2px solid transparent;
padding: 12px 16px;
border-radius: 12px;
text-align: left;
cursor: pointer;
font-size: 14px;
color: #374151;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
 
.option-btn:hover {
background: #e5f3ff;
border-color: #3b82f6;
transform: translateX(5px);
}
 
.option-btn::after {
content: '→';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: all 0.3s ease;
}
 
.option-btn:hover::after {
opacity: 1;
right: 12px;
}
 
.chat-messages {
margin-bottom: 20px;
max-height: 300px;
overflow-y: auto;
min-height: 100px;
flex: 1;
}
 
.message {
margin-bottom: 15px;
animation: slideIn 0.5s ease;
}
 
@keyframes slideIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
 
.message.user {
text-align: right;
}
 
.message.bot {
text-align: left;
}
 
.message-bubble {
display: inline-block;
padding: 12px 16px;
border-radius: 18px;
max-width: 80%;
font-size: 14px;
line-height: 1.4;
}
 
.message.user .message-bubble {
background: #25d366;
color: white;
border-bottom-right-radius: 6px;
}
 
.message.bot .message-bubble {
background: #f1f3f4;
color: #333;
border-bottom-left-radius: 6px;
}
 
.message-time {
font-size: 11px;
color: #9ca3af;
margin-top: 4px;
}
 
.action-buttons {
display: flex;
gap: 10px;
margin-top: 12px;
}
 
.action-btn {
padding: 10px 20px;
border-radius: 25px;
border: none;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
 
.whatsapp-btn {
background: #25d366;
color: white;
}
 
.whatsapp-btn:hover {
background: #128c7e;
transform: translateY(-2px);
}
 
.call-btn {
background: #3b82f6;
color: white;
}
 
.call-btn:hover {
background: #2563eb;
transform: translateY(-2px);
}
 
.floating-chat-btn {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
background: #25d366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
cursor: pointer;
box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
z-index: 1000;
transition: all 0.3s ease;
animation: float 3s ease-in-out infinite;
}
 
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
 
.floating-chat-btn:hover {
transform: scale(1.1);
box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4);
}
 
.demo-note {
position: fixed;
top: 20px;
left: 20px;
background: rgba(0,0,0,0.8);
color: white;
padding: 10px 15px;
border-radius: 8px;
font-size: 14px;
z-index: 1000;
}
 
@media (max-width: 480px) {
.chat-widget {
width: 100%;
height: 100vh;
border-radius: 0;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
 
.chat-body {
height: calc(100vh - 80px);
overflow-y: auto;
display: flex;
flex-direction: column;
}
 
.quick-options {
height: auto;
overflow-y: auto;
margin-bottom: 10px;
min-height: 250px; /* 5 sorunun görünmesi için */
}
 
.chat-messages {
max-height: none; /* Yüksekliği serbest bırak */
height: auto; /* İçeriğe göre genişle */
flex: 1; /* Kalan alanı doldur */
overflow-y: auto; /* Kaydırma çubuğu ekle */
}
 
.company-details {
margin-bottom: 15px;
}
 
.option-btn {
padding: 15px 16px;
font-size: 15px;
}
}
</style>
</head>
<body>
<div class="demo-note">
<img draggable="false" role="img" class="emoji" alt="💡" src="https://s.w.org/images/core/emoji/16.0.1/svg/1f4a1.svg"> Demo: Web siteniz için WhatsApp tarzı canlı destek widget'ı
</div>
 
<div class="chat-widget" id="chatWidget" style="display: none;">
<div class="chat-header">
<div class="header-content">
<div class="avatar">
<img draggable="false" role="img" class="emoji" alt="📱" src="https://s.w.org/images/core/emoji/16.0.1/svg/1f4f1.svg">
</div>
<div class="company-info">
<h3>Firma İsmi</h3>
<div class="status">Çevrimiçi | Genellikle 5 dakika içinde yanıt verir</div>
</div>
</div>
<button class="close-btn" onclick="toggleChat()">×</button>
</div>
 
<div class="chat-body">
<div class="company-details">
<div class="company-name">Firma İsmi</div>
<div class="company-address">
<img draggable="false" role="img" class="emoji" alt="📍" src="https://s.w.org/images/core/emoji/16.0.1/svg/1f4cd.svg"> Örnek Mahallesi, Örnek Caddesi No:123, İstanbul<br>
<img draggable="false" role="img" class="emoji" alt="📞" src="https://s.w.org/images/core/emoji/16.0.1/svg/1f4de.svg"> +90 539 999 99 99<br>
<img draggable="false" role="img" class="emoji" alt="✉️" src="https://s.w.org/images/core/emoji/16.0.1/svg/2709.svg"> info@firmaismi.com
</div>
<div class="contact-buttons">
<button class="contact-btn btn-call" onclick="handleCall()">
<img draggable="false" role="img" class="emoji" alt="📞" src="https://s.w.org/images/core/emoji/16.0.1/svg/1f4de.svg"> Ara
</button>
<button class="contact-btn btn-email" onclick="handleEmail()">
<img draggable="false" role="img" class="emoji" alt="✉️" src="https://s.w.org/images/core/emoji/16.0.1/svg/2709.svg"> E-posta
</button>
<button class="contact-btn btn-location" onclick="openWhatsApp()">
<img draggable="false" role="img" class="emoji" alt="💬" src="https://s.w.org/images/core/emoji/16.0.1/svg/1f4ac.svg"> WhatsApp
</button>
</div>
</div>
 
<div class="welcome-message">
Merhaba! Firma İsmi'e hoş geldiniz. Size nasıl yardımcı olabiliriz?
</div>
 
<div class="quick-options" id="quickOptions">
<h4>Hızlı Seçenekler:</h4>
<div class="option-buttons">
<button class="option-btn" onclick="selectOption('Çalışma saatleriniz nedir?')">
Çalışma saatleriniz nedir?
</button>
<button class="option-btn" onclick="selectOption('Fiyat bilgisi alabilir miyim?')">
Fiyat bilgisi alabilir miyim?
</button>
<button class="option-btn" onclick="selectOption('Adresiniz nerede?')">
Adresiniz nerede?
</button>
<button class="option-btn" onclick="selectOption('Nasıl rezervasyon yapabilirim?')">
Nasıl rezervasyon yapabilirim?
</button>
<button class="option-btn" onclick="selectOption('Hangi hizmetleri veriyorsunuz?')">
Hangi hizmetleri veriyorsunuz?
</button>
</div>
</div>
 
<div class="chat-messages" id="chatMessages">
<!-- Mesajlar buraya eklenecek -->
</div>
</div>
</div>
 
<div class="floating-chat-btn" id="floatingBtn" onclick="toggleChat()">
<img draggable="false" role="img" class="emoji" alt="💬" src="https://s.w.org/images/core/emoji/16.0.1/svg/1f4ac.svg">
</div>
 
<script>
let chatOpen = false;
let chatStarted = false;
const PHONE_NUMBER = "905399999999"; // Telefon numaranızı buraya yazın (90 ile başlayarak)
 
const responses = {
'Çalışma saatleriniz nedir?': 'Çalışma saatlerimiz Pazartesi-Cuma 09:00-18:00, Cumartesi 10:00-16:00 arası. Pazar günü kapalıyız.',
'Fiyat bilgisi alabilir miyim?': 'Ürün/hizmet fiyatlarımızla ilgili detaylı bilgi almak için lütfen telefon numaramızdan bizi arayın veya e-posta gönderin.',
'Adresiniz nerede?': 'Adresimiz Anadolu yakasındadır. Tam adresimiz: Örnek Mahallesi, Örnek Caddesi No:123, İstanbul',
'Nasıl rezervasyon yapabilirim?': 'Rezervasyon için +90 539 999 99 99 numarasını arayabilir veya info@firmaismi.com adresine e-posta gönderebilirsiniz.',
'Hangi hizmetleri veriyorsunuz?': 'Web tasarım, e-ticaret, mobil uygulama geliştirme ve dijital pazarlama hizmetleri sunuyoruz.'
};
 
function toggleChat() {
const widget = document.getElementById('chatWidget');
const floatingBtn = document.getElementById('floatingBtn');
 
if (chatOpen) {
widget.style.display = 'none';
floatingBtn.style.display = 'flex';
chatOpen = false;
} else {
widget.style.display = 'block';
floatingBtn.style.display = 'none';
chatOpen = true;
}
}
 
function selectOption(question) {
// Hızlı seçenekleri gizle
document.getElementById('quickOptions').style.display = 'none';
 
// Kullanıcı sorusunu ekle
addMessage(question, 'user');
 
setTimeout(() => {
const response = responses[question] || 'Bu konuda size yardımcı olmak için ekibimizle iletişime geçin.';
addBotMessageWithButtons(response);
}, 1000);
 
chatStarted = true;
}
 
function addMessage(text, sender) {
const messagesContainer = document.getElementById('chatMessages');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${sender}`;
 
const now = new Date();
const time = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
 
messageDiv.innerHTML = `
<div class="message-bubble">${text}</div>
<div class="message-time">${time}</div>
`;
 
messagesContainer.appendChild(messageDiv);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
 
function addBotMessageWithButtons(response) {
const messagesContainer = document.getElementById('chatMessages');
const messageDiv = document.createElement('div');
messageDiv.className = 'message bot';
 
const now = new Date();
const time = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
 
messageDiv.innerHTML = `
<div class="message-bubble">
${response}
<div class="action-buttons">
<button class="action-btn whatsapp-btn" onclick="openWhatsApp()"><img draggable="false" role="img" class="emoji" alt="💬" src="https://s.w.org/images/core/emoji/16.0.1/svg/1f4ac.svg"> WhatsApp</button>
<button class="action-btn call-btn" onclick="handleCall()"><img draggable="false" role="img" class="emoji" alt="📞" src="https://s.w.org/images/core/emoji/16.0.1/svg/1f4de.svg"> Ara</button>
</div>
<div style="margin-top: 10px; font-size: 13px; color: #555;">
WhatsApp'tan yazabilir veya arama yapabilirsiniz.
</div>
</div>
<div class="message-time">${time}</div>
`;
 
messagesContainer.appendChild(messageDiv);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
 
function handleCall() {
window.open('tel:+905399999999');
}
 
function handleEmail() {
window.open('mailto:info@firmaismi.com');
}
 
function openWhatsApp() {
const whatsappURL = `https://wa.me/${PHONE_NUMBER}`;
window.open(whatsappURL, '_blank');
}
</script>
</body>
</html>

Faydalı WhatsApp Üslubunda Canlı Dəstək Vidceti – Pulsuz HTML Skript

İlqar Ramizoğlu

Əlavələr