Genel Özellikler
- Sağ Alt Köşede Sabit WhatsApp Butonu
- Dairesel yeşil buton
- Bildirim sayacı
- Özelleştirilebilir bildirim animasyonu
- Açılır Sohbet Kutusu
- Profesyonel tasarım
- Duyarlı (responsive) tasarım - mobil cihazlarda da çalışır
- Animasyonlu açılış/kapanış efekti
- Sohbet Özellikleri
- Gerçek zamanlı mesajlaşma arayüzü
- Mesaj gönderme ve alma simülasyonu
- "Yazıyor..." göstergesi
- Emoji seçici
- Otomatik kaydırma
- Mesaj zaman damgaları
- Firma Bilgileri Bölümü
- Firma logosu/avatar
- İletişim bilgileri (adres, telefon, e-posta)
- Hızlı eylem butonları (ara, e-posta, konum)
- Sık Sorulan Sorular
- Önceden tanımlanmış hızlı soru butonları
- Tıklandığında otomatik mesaj oluşturma
- Otomatik Yanıt Sistemi
- Kullanıcı mesajlarına otomatik yanıtlar
- Yanıt için yazıyor efekti
- Rastgele yanıt seçimi
- Duyarlı/Mobil Uyumlu Tasarım
- Farklı ekran boyutlarına adapte olma
- Mobil cihazlarda tam ekran modu
Teknik Detaylar
HTML Yapısı
HTML:
<!-- Ana Bileşenler -->
<div class="whatsapp-button">...</div> <!-- WhatsApp Butonu -->
<div class="chat-box"> <!-- Sohbet Kutusu -->
<div class="chat-header">...</div> <!-- Başlık -->
<div class="chat-body">...</div> <!-- Mesaj Alanı -->
<div class="chat-footer">...</div> <!-- Mesaj Girişi -->
</div>CSS Özellikleri
- Özelleştirilebilir Kök Değişkenler
CSS:
:root {
--primary-color: #25D366; /* Ana WhatsApp yeşili */
--secondary-color: #128C7E; /* İkincil renk */
--text-color: #333;
--light-text: #fff;
--background-color: #f5f5f5;
--hover-color: #075E54;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
--border-radius: 12px;
--transition: all 0.3s ease;
}
[B][/B]- Ana Tasarım Özellikleri
- Modern, düz tasarım
- Yumuşak gölgeler ve geçişler
- Duyarlı boyutlandırma
- WhatsApp tarzı sohbet baloncukları
- Özelleştirilebilir animasyonlar
JavaScript Fonksiyonları
- Temel İşlevler
- toggleChatBox() - Sohbet kutusunu açma/kapama
- showChatBox() - Sohbet kutusunu gösterme
- minimizeChatBox() - Sohbet kutusunu küçültme
- closeChatBox() - Sohbet kutusunu kapatma
- scrollToBottom() - Mesajlar alanını otomatik kaydırma
- Mesajlaşma İşlevleri
- initializeChat() - Sohbeti başlatma
- addMessage(text, type, time) - Mesaj ekleme
- sendMessage() - Mesaj gönderme
- handleKeyPress(event) - Enter tuşu ile mesaj gönderme
- sendPresetMessage(text) - Hazır mesaj gönderme
- UI İşlevleri
- showTypingIndicator() - Yazıyor göstergesini gösterme
- hideTypingIndicator() - Yazıyor göstergesini gizleme
- toggleEmojiPicker() - Emoji seçiciyi gösterme/gizleme
- appendEmoji(emoji) - Emoji ekleme
- playNotificationSound() - Bildirim sesi çalma
- Firma İletişim İşlevleri
- addCompanyInfo() - Firma bilgilerini ekleme
- addQuickQuestions() - Sık sorulan soruları ekleme
- callCompany() - Telefon ile arama
- emailCompany() - E-posta gönderme
- openMap() - Haritada gösterme
- openWhatsApp() - WhatsApp'ta mesaj başlatma
- Yardımcı İşlevler
- getCurrentTime() - Güncel zamanı alma
Özelleştirilebilir Ayarlar
Kod:
// Firma telefon numarası (WhatsApp'a yönlendirilecek)
const phoneNumber = "905399999999";
// Firma bilgileri
const companyInfo = {
name: "Firma İsmi",
address: "Örnek Mahallesi, Örnek Caddesi No:123, İstanbul",
phone: "+90 539 999 99 99",
email: "info@firmaismi.com",
logo: "FA" // İki harf logo
};
// Sık sorulan sorular
const quickQuestions = [
"Çalışma saatleriniz nedir?",
"Fiyat bilgisi alabilir miyim?",
"Adresiniz nerede?",
"Nasıl rezervasyon yapabilirim?"
];
// Hoş geldin mesajları
const welcomeMessages = [
{
text: `Merhaba! ${companyInfo.name}'e hoş geldiniz. Size nasıl yardımcı olabiliriz?`,
time: getCurrentTime()
}
];
// Otomatik mesajlar
const autoResponses = [
"Mesajınız için teşekkürler! En kısa sürede size dönüş yapacağız.",
"Sorunuzu aldık. Müşteri temsilcimiz birazdan sizinle iletişime geçecek.",
"Teşekkürler! Mesajınız müşteri hizmetleri ekibimize iletildi."
];
// Emojiler
const emojis = [
"<img draggable="false" class="emoji" alt="😊" src="//cdn.r10.net/emojis/html/1f60a.png">", "<img draggable="false" class="emoji" alt="👍" src="//cdn.r10.net/emojis/html/1f44d.png">", "<img draggable="false" class="emoji" alt="❤️" src="//cdn.r10.net/emojis/html/2764.png">", "<img draggable="false" class="emoji" alt="😃" src="//cdn.r10.net/emojis/html/1f603.png">", "<img draggable="false" class="emoji" alt="👋" src="//cdn.r10.net/emojis/html/1f44b.png">", "<img draggable="false" class="emoji" alt="🙏" src="//cdn.r10.net/emojis/html/1f64f.png">", "<img draggable="false" class="emoji" alt="👌" src="//cdn.r10.net/emojis/html/1f44c.png">", "<img draggable="false" class="emoji" alt="🤔" src="//cdn.r10.net/emojis/html/1f914.png">", "<img draggable="false" class="emoji" alt="😉" src="//cdn.r10.net/emojis/html/1f609.png">", "<img draggable="false" class="emoji" alt="🎉" src="//cdn.r10.net/emojis/html/1f389.png">",
"<img draggable="false" class="emoji" alt="✅" src="//cdn.r10.net/emojis/html/2705.png">", "<img draggable="false" class="emoji" alt="🔥" src="//cdn.r10.net/emojis/html/1f525.png">", "<img draggable="false" class="emoji" alt="💯" src="//cdn.r10.net/emojis/html/1f4af.png">", "⭐", "<img draggable="false" class="emoji" alt="📞" src="//cdn.r10.net/emojis/html/1f4de.png">", "<img draggable="false" class="emoji" alt="💼" src="//cdn.r10.net/emojis/html/1f4bc.png">", "<img draggable="false" class="emoji" alt="🏢" src="//cdn.r10.net/emojis/html/1f3e2.png">", "<img draggable="false" class="emoji" alt="📱" src="//cdn.r10.net/emojis/html/1f4f1.png">", "<img draggable="false" class="emoji" alt="🌟" src="//cdn.r10.net/emojis/html/1f31f.png">", "<img draggable="false" class="emoji" alt="👏" src="//cdn.r10.net/emojis/html/1f44f.png">"
];Kurulum ve Uygulama
- Kurulum
- Bu kodu bir HTML dosyasına kopyalayın
- Dilediğiniz değişiklikleri yapın (firma bilgileri, telefon numarası, vb.)
- Dosyayı web sitenize yükleyin veya doğrudan HTML sayfanıza ekleyin
- Özelleştirme İpuçları
- :root değişkenleri ile renk şemasını değiştirin
- companyInfo nesnesini kendi bilgilerinizle güncelleyin
- phoneNumber değişkenini WhatsApp numaranızla değiştirin
- quickQuestions dizisine kendi sık sorulan sorularınızı ekleyin
- welcomeMessages ve autoResponses ile karşılama ve otomatik yanıtları özelleştirin
- Daha fazla emoji eklemek için emojis dizisini genişletin
- WhatsApp Entegrasyonu
- Eklenti, mesajları WhatsApp'a yönlendirir
- Telefon numarasını uluslararası formatta girin (örn. 905399999999)
- Bu, https://wa.me/[NUMARA]?text=[MESAJ] formatını kullanarak WhatsApp API'sine bağlanır
Dağıtım İçin Notlar
- Performans Optimize Edilmiş
- Hafif ve hızlı yüklenen tasarım
- Basit ve bağımsız yapı (harici kütüphane kullanmıyor, sadece Font Awesome için CDN)
- Bağımsız Çalışma
- Herhangi bir backend veya veritabanı gerektirmez
- Tamamen tarayıcı tarafında çalışır
- Uyumluluk
- Modern tarayıcıların tümünde çalışır
- Mobil uyumlu tasarım
- Kurulum Kolaylığı
- Tek dosya olarak eklenebilir
- Mevcut web sayfalarına kolayca entegre edilebilir
CANLI DEMO
