- Katılım
- 30 Nisan 2025
- Mesajlar
- 53
- Tepkime puanı
- 26
- Puanları
- 18
İndirme linki için beğen yorum yap !
[HIDETHANKS][HIDEREPLY][/HIDEREPLY][/HIDETHANKS][HIDETHANKS][HIDEREPLY][/hidereply][/hidethanks][HIDETHANKS][HIDEREPLY]
HTML Yapısı
<!-- 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>
--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;
}
// 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: "[email protected]",
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 = [
"
", "
", "
", "
", "
", "
", "
", "
", "
", "
",
"
", "
", "
", "
", "
", "
", "
", "
", "
", "
"
];
[HIDETHANKS][HIDEREPLY][/HIDEREPLY][/HIDETHANKS][HIDETHANKS][HIDEREPLY][/hidereply][/hidethanks][HIDETHANKS][HIDEREPLY]
Ziyaretçiler için gizlenmiş link,görmek için
Giriş yap veya üye ol.
[/HIDEREPLY][/HIDETHANKS]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ı
<!-- 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
--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;
}
- 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
// 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: "[email protected]",
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 = [
"
", "", "", "", "", "", "", "", "", "","
", "", "", "", "", "", "", "", "", ""];
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,
Ziyaretçiler için gizlenmiş link,görmek için Giriş yap veya üye ol.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
