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

Link qeydiyyatdan keçməyən istifadəçilər üçün gizlidir, görmək üçün Giriş et və ya indi qeydiyyatdan keç.

​

Ü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​

<!-- Ə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

: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​

// Ş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: "info@back.az",
    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