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

Mobil İlqar Ramizoğlu

Rəhbər
Administrator
Qoşulub
1 Oktyabr 2022
Mesajlar
121




Ü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

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

Kod:
// Ş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
 
Sonuncu redaktə:
Geri
Yuxarı Aşağı