Çalışma Saatleri :

Pazartesi - Cumartesi, 09:00 - 19:00

05531073849

Home Yazılım WhatsApp Tarzı Canlı Destek Widget’ı – Ücretsiz HTML Script

WhatsApp Tarzı Canlı Destek Widget’ı – Ücretsiz HTML Script

WhatsApp Tarzı Canlı Destek Widget’ı – Ücretsiz HTML Script
  • admin
  • Comments 0
  • 15 Jan 2026

🎯 Web sitenize modern, estetik ve mobil uyumlu canlı destek kutusu eklemek ister misiniz?

📦 Aşağıdaki script ile tek satır kod yazmadan, kendi WhatsApp benzeri destek widget’ınızı sitenize entegre edebilirsiniz. Forumlarda, kişisel projelerde veya kurumsal sitelerde kullanıma uygundur!

🚀 Öne Çıkan Özellikler:

✅ WhatsApp Stili Arayüz
💡 Gerçek WhatsApp hissi veren modern tasarım ve kullanıcı deneyimi

✅ Hızlı Mesaj Butonları
🔘 “Çalışma Saatleriniz nedir?” gibi 5 farklı hazır soru – tek tıkla hızlı yanıt

✅ Cevaplara Özel Butonlar
📞 Arama yap / 💬 WhatsApp’tan yaz / ✉️ E-posta gönder seçenekleri her cevapta yer alır

✅ Responsive Tasarım
📱 Mobil cihazlarda tam ekran – masaüstünde kutu şeklinde görüntülenir

✅ Şık Animasyonlar
✨ Hover, shimmer, mesaj geçiş ve avatar animasyonlarıyla canlı görünüm

✅ Firma Bilgisi Alanı
🏢 Firma adı, adres, telefon, e-posta bilgileri özel alanda yer alır

✅ Kayan Buton
🟢 Sağ altta sabit buton – tıklandığında widget açılır / kapanır

🔧 Nasıl Kullanılır?

  1. 📁 Script dosyasını HTML sayfanın <body> içine yapıştırın

  2. 📞 Telefon numaranızı ve ✉️ e-posta adresinizi PHONE_NUMBER ve handleEmail() kısımlarından düzenleyin

  3. 🎨 Firma ismi, adres gibi bilgileri düzenleyin

  4. ✅ Yayınla, anında çalışsın!

 

Demo

https://trendsis.com.tr/whatsapp/

 

İndir

https://trendsis.com.tr/whatsapp/index.7z

 

Kodlar


<!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: '💬';
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">
💡 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">
📱
</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">
📍 Örnek Mahallesi, Örnek Caddesi No:123, İstanbul<br>
📞 +90 539 999 99 99<br>
✉️ info@firmaismi.com
</div>
<div class="contact-buttons">
<button class="contact-btn btn-call" onclick="handleCall()">
📞 Ara
</button>
<button class="contact-btn btn-email" onclick="handleEmail()">
✉️ E-posta
</button>
<button class="contact-btn btn-location" onclick="openWhatsApp()">
💬 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()">
💬
</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()">💬 WhatsApp</button>
<button class="action-btn call-btn" onclick="handleCall()">📞 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>
Blog Shape Image Blog Shape Image

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir