Hər kəs Saytına Bu WhatsApp Kodunu Əlavə Edəcək! - Pulsuz WhatsApp Kodu!

CANLI DEMO

Ümumi Xüsusiyyətlər

1. Sağ aşağı küncdə sabit WhatsApp düyməsi
   
   • Dairəvi yaşıl düymə
     
   • Bildiriş sayğacı
     
   • Fərdiləşdirilə bilən bildiriş animasiyası
2. Açılan söhbət qutusu
   
   • Peşəkar dizayn
     
   • Uyğunlaşa bilən (responsive) dizayn – mobil cihazlarda da işləyir
     
   • Animasiya ilə açılma/bağlanma effekti
3. Söhbət xüsusiyyətləri
   
   • Real vaxt mesajlaşma interfeysi
     
   • Mesaj göndərmə və qəbul etmə simulyasiyası
     
   • "Yazır..." göstəricisi
     
   • Emoji seçici
     
   • Avtomatik sürüşdürmə
     
   • Mesaj vaxt göstəriciləri
4. Şirkət məlumatları bölməsi
   
   • Şirkət loqosu/avatar
     
   • Əlaqə məlumatları (ünvan, telefon, e-poçt)
     
   • Sürətli əməliyyat düymələri (zəng et, e-poçt göndər, xəritə aç)
5. Tez-tez verilən suallar
   
   • Əvvəlcədən təyin olunmuş sürətli sual düymələri
     
   • Klikləndikdə avtomatik mesaj yaradılması
6. Avtomatik cavab sistemi
   
   • İstifadəçi mesajlarına avtomatik cavablar
     
   • Cavab üçün "yazır" effekti
     
   • Təsadüfi cavab seçimi
7. Uyğunlaşa bilən/mobil uyğun dizayn
   
   • Müxtəlif ekran ölçülərinə uyğunlaşma
     
   • Mobil cihazlarda tam ekran rejimi

Texniki Detallar

HTML Strukturu

1234567<!-- Əsas komponentlər -->
<div class="whatsapp-button">...</div>  <!-- WhatsApp düyməsi -->
<div class="chat-box">                  <!-- Söhbət qutusu -->
    <div class="chat-header">...</div>  <!-- Başlıq -->
    <div class="chat-body">...</div>    <!-- Mesaj sahəsi -->
    <div class="chat-footer">...</div>  <!-- Mesaj girişi -->
</div>

CSS Xüsusiyyətləri

• Fərdiləşdirilə bilən kök dəyişənlər

1234567891011:root {
    --primary-color: #25D366;    /* Əsas WhatsApp yaşıl rəngi */
    --secondary-color: #128C7E;  /* İkincili rəng */
    --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;
}

• Əsas dizayn xüsusiyyətləri
  
  • Müasir, sadə dizayn
    
  • Yumşaq kölgələr və keçidlər
    
  • Uyğunlaşa bilən ölçüləndirmə
    
  • WhatsApp tərzi söhbət baloncuqları
    
  • Fərdiləşdirilə bilən animasiyalar

JavaScript Funksiyaları

1. Əsas funksiyalar
   
   • toggleChatBox() - Söhbət qutusunu açmaq/bağlamaq
     
   • showChatBox() - Söhbət qutusunu göstərmək
     
   • minimizeChatBox() - Söhbət qutusunu kiçiltmək
     
   • closeChatBox() - Söhbət qutusunu bağlamaq
     
   • scrollToBottom() - Mesaj sahəsini avtomatik sürüşdürmək
2. Mesajlaşma funksiyaları
   
   • initializeChat() - Söhbəti başlatmaq
     
   • addMessage(text, type, time) - Mesaj əlavə etmək
     
   • sendMessage() - Mesaj göndərmək
     
   • handleKeyPress(event) - Enter düyməsi ilə mesaj göndərmək
     
   • sendPresetMessage(text) - Hazır mesaj göndərmək
3. İstifadəçi interfeysi funksiyaları
   
   • showTypingIndicator() - "Yazır..." göstəricisini göstərmək
     
   • hideTypingIndicator() - "Yazır..." göstəricisini gizlətmək
     
   • toggleEmojiPicker() - Emoji seçicisini açmaq/bağlamaq
     
   • appendEmoji(emoji) - Emoji əlavə etmək
     
   • playNotificationSound() - Bildiriş səsini səsləndirmək
4. Şirkət əlaqə funksiyaları
   
   • addCompanyInfo() - Şirkət məlumatlarını əlavə etmək
     
   • addQuickQuestions() - Tez-tez verilən sualları əlavə etmək
     
   • callCompany() - Telefonla zəng etmək
     
   • emailCompany() - E-poçt göndərmək
     
   • openMap() - Xəritədə açmaq
     
   • openWhatsApp() - WhatsApp-da mesaj başlatmaq
5. Yardımçı funksiyalar
   
   • getCurrentTime() - Cari vaxtı almaq

Fərdiləşdirilə bilən ayarlar

1234567891011121314151617181920212223242526272829303132333435// Şirkət telefon nömrəsi (WhatsApp-a yönləndiriləcək)
const phoneNumber = "994505556677";
// Şirkət məlumatları
const companyInfo = {
    name: "Şirkət Adı",
    address: "Nümunə məhəlləsi, Nümunə küçəsi No:123, Bakı",
    phone: "+994505556677",
    email: "[email protected]",
    logo: "SA" // İki hərfdən ibarət logo
};
// Tez-tez verilən suallar
const quickQuestions = [
    "İş saatlarınız nədir?",
    "Qiymət haqqında məlumat ala bilərəmmi?",
    "Ünvanınız haradadır?",
    "Necə rezervasiya edə bilərəm?"
];
// Xoş gəldin mesajları
const welcomeMessages = [
    {
        text: `Salam! ${companyInfo.name}'a xoş gəlmisiniz. Sizə necə kömək edə bilərik?`,
        time: getCurrentTime()
    }
];
// Avtomatik mesajlar
const autoResponses = [
    "Mesajınız üçün təşəkkür edirik! Ən qısa zamanda sizə geri dönəcəyik.",
    "Sualınızı qəbul etdik. Müştəri nümayəndəmiz tezliklə sizinlə əlaqə saxlayacaq.",
    "Təşəkkür edirik! Mesajınız müştəri xidmətləri komandamıza göndərildi."
];
// Emojilər
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">"
];

Quraşdırma və Tətbiqetmə

1. Quraşdırma
   
   • Bu kodu bir HTML faylına kopyalayın
     
   • Lazımi dəyişiklikləri edin (şirkət məlumatları, telefon nömrəsi və s.)
     
   • Faylı veb saytınıza yükləyin və ya birbaşa HTML səhifənizə əlavə edin
2. Fərdiləşdirmə məsləhətləri
   
   • :root dəyişənləri ilə rəng sxemini dəyişin
     
   • companyInfo obyektini öz məlumatlarınızla yeniləyin
     
   • quickQuestions massivinə öz suallarınızı əlavə edin

3. WhatsApp İnteqrasiyası

   1. WhatsApp-a qoşulma
      
      • Plugin mesajları birbaşa WhatsApp-a yönləndirir
        
      • Telefon nömrəsini beynəlxalq formatda daxil edin (məs., 994505556677)
        
      • https://wa.me/[NÖMRƏ]?text=[MESAJ] formatından istifadə edərək WhatsApp API-sinə bağlanır
   
   

   Paylaşım Üçün Qeydlər

   1. Performans Optimizə Edilib
      
      • Yüngül və sürətli yüklənən dizayn
        
      • Sadə və müstəqil quruluş (yalnız Font Awesome üçün CDN istifadə edir, əlavə kitabxanalar tələb olunmur)
   2. Müstəqil İşləmə
      
      • Heç bir backend və ya verilənlər bazası tələb etmir
        
      • Tamamilə brauzer tərəfində işləyir
   3. Uyğunluq
      
      • Müasir brauzerlərin hamısında işləyir
        
      • Mobil uyğun dizayn
   4. Quraşdırma Rahatlığı
      
      • Tək fayl kimi əlavə edilə bilər
        
      • Mövcud veb səhifələrə asanlıqla inteqrasiya oluna bilər