- 2024-03-23
- 461
زر التواصل السريع عبر الواتساب
خصائص الكود
- زر تفاعلي للواتساب: يظهر على الموقع لتسهيل التواصل المباشر.
- تشغيل صوت التنبيه: يصدر صوت تنبيه عند النقر على الزر لجذب الانتباه.
- رسالة تفاعلية: تظهر رسالة "كيف يمكن أن أساعدك؟" للمساعدة في تحسين تجربة المستخدم.
- تصميم ديناميكي: الزر يكبر عند التحويم وله تأثيرات بصرية جذابة.
- مرن وسهل التخصيص: يمكن تغيير رقم الهاتف ونص الرسالة بسهولة.
- متوافق مع المتصفحات: يعمل بشكل جيد في معظم المتصفحات الحديثة.
أقسام الكود
1. HTML
خصائص الكود
- زر تفاعلي للواتساب: يظهر على الموقع لتسهيل التواصل المباشر.
- تشغيل صوت التنبيه: يصدر صوت تنبيه عند النقر على الزر لجذب الانتباه.
- رسالة تفاعلية: تظهر رسالة "كيف يمكن أن أساعدك؟" للمساعدة في تحسين تجربة المستخدم.
- تصميم ديناميكي: الزر يكبر عند التحويم وله تأثيرات بصرية جذابة.
- مرن وسهل التخصيص: يمكن تغيير رقم الهاتف ونص الرسالة بسهولة.
- متوافق مع المتصفحات: يعمل بشكل جيد في معظم المتصفحات الحديثة.
أقسام الكود
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>