[كود CODE] زر التواصل السريع عبر الواتساب

AnGeL · 2024-04-11

زر التواصل السريع عبر الواتساب

خصائص الكود
- زر تفاعلي للواتساب: يظهر على الموقع لتسهيل التواصل المباشر.
- تشغيل صوت التنبيه: يصدر صوت تنبيه عند النقر على الزر لجذب الانتباه.
- رسالة تفاعلية: تظهر رسالة "كيف يمكن أن أساعدك؟" للمساعدة في تحسين تجربة المستخدم.
- تصميم ديناميكي: الزر يكبر عند التحويم وله تأثيرات بصرية جذابة.
- مرن وسهل التخصيص: يمكن تغيير رقم الهاتف ونص الرسالة بسهولة.
- متوافق مع المتصفحات: يعمل بشكل جيد في معظم المتصفحات الحديثة.

أقسام الكود

1. HTML

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WhatsApp Contact Button</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>

<div id="whatsapp-icon">
    <a href="" id="whatsapp-link" target="_blank">
        <i class="fab fa-whatsapp"></i>
    </a>
</div>
<div id="tooltip">كيف يمكن أن أساعدك؟</div>

</body>
</html>

2. CSS

CSS:

#whatsapp-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    background-color: #25D366;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}
#whatsapp-icon:hover {
    transform: scale(1.1);
}
#whatsapp-icon i {
    color: white;
    font-size: 40px;
}
#tooltip {
    visibility: visible;
    width: 140px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: fixed;
    z-index: 1;
    bottom: 90px;
    right: 20px;
    font-size: 14px;
    opacity: 1;
    transition: opacity 0.5s ease;
}

3. JavaScript

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
    var whatsappLink = document.getElementById('whatsapp-link');

    // خيارات التحكم
    var settings = {
        phoneNumber: '+0000000000',
        message: 'مرحباً، كيف يمكنني مساعدتك؟',
        soundUrl: 'https://www.myinstants.com/media/sounds/whatsapp-sound-kein-fake-no-fake.mp3',
    };

    var audio = new Audio(settings.soundUrl);

    // تشغيل الصوت عند النقر على الأيقونة
    document.getElementById('whatsapp-icon').addEventListener('click', function() {
        audio.play();
    });

    // تحديث الخصائص
    whatsappLink.href = `https://wa.me/${settings.phoneNumber}?text=${encodeURIComponent(settings.message)}`;
});

الكود كامل:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WhatsApp Contact Button</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        #whatsapp-icon {
            position: fixed;
            bottom: 20px;
            right: 20px;
            cursor: pointer;
            background-color: #25D366; /* لون الواتساب الرسمي */
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            transition: transform 0.3s ease;
        }
        #whatsapp-icon:hover {
            transform: scale(1.1);
        }
        #whatsapp-icon i {
            color: white;
            font-size: 40px;
        }
        #tooltip {
            visibility: visible;
            width: 140px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: fixed;
            z-index: 1;
            bottom: 90px;
            right: 20px;
            font-size: 14px;
            opacity: 1;
            transition: opacity 0.5s ease;
        }
    </style>
</head>
<body>

<div id="whatsapp-icon">
    <a href="" id="whatsapp-link" target="_blank">
        <i class="fab fa-whatsapp"></i>
    </a>
</div>
<div id="tooltip">كيف يمكن أن أساعدك؟</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var whatsappLink = document.getElementById('whatsapp-link');
    var tooltip = document.getElementById('tooltip');

    // خيارات التحكم
    var settings = {
        phoneNumber: '+97466067706',
        message: 'مرحباً، كيف يمكنني مساعدتك؟',
        soundUrl: 'https://www.myinstants.com/media/sounds/whatsapp-sound-kein-fake-no-fake.mp3',
    };

    var audio = new Audio(settings.soundUrl);

    // تشغيل الصوت عند النقر على الأيقونة
    document.getElementById('whatsapp-icon').addEventListener('click', function() {
        audio.play();
    });

    // تحديث الخصائص
    whatsappLink.href = `https://wa.me/${settings.phoneNumber}?text=${encodeURIComponent(settings.message)}`;
});
</script>

</body>
</html>

تطبيق الكود على الموقع
- للصفحة الرئيسية فقط: أدرج الكود في صفحة `index.html` ليظهر فقط على الصفحة الرئيسية.
- لكل صفحات الموقع: أدرج الكود في قالب الموقع الأساسي (مثل `footer.html` أو `layout.html`) ليظهر في كل صفحات الموقع.

كيفية تضمين الكود باستخدام <iframe>

لتضمين الكود باستخدام <iframe> اتبع الخطوات التالية:

حفظ الكود: احفظ الكود السابق في ملف HTML مثلاً بإسم whatsapp-button.html.
تحميل الملف على السيرفر: قم بتحميل الملف إلى سيرفر الويب الخاص بك حيث يمكن الوصول إليه عبر الإنترنت.
إنشاء الـ <iframe> في صفحتك:في الصفحة التي تريد أن يظهر فيها الزر، أضف عنصر <iframe>مثل هذا:

HTML:

<iframe src="http://yourdomain.com/whatsapp-button.html" style="border:none;" height="100" width="100"></iframe>

[كود CODE] زر التواصل السريع عبر الواتساب

AnGeL

صاحب الامتياز

كيفية تضمين الكود باستخدام <iframe>

المرفقات

المواضيع المشابهة

[كود CODE] زر التواصل السريع عبر الواتساب

AnGeL

صاحب الامتياز

كيفية تضمين الكود باستخدام <iframe>​

المرفقات

المواضيع المشابهة

كيفية تضمين الكود باستخدام <iframe>