تُعتبر تجربة المستخدم عنصرًا حاسمًا في نجاح أي منتدى، وعندما ينقطع الاتصال بالإنترنت فجأة، قد يتسبب ذلك في إحباط الأعضاء، خاصةً إذا كانوا في منتصف كتابة مساهمة. لذلك، تعتبر إضافة رسالة تنبيه عند فقدان الاتصال بالإنترنت خطوة مهمة لتحسين التفاعل والمشاركة في المنتدى.
لماذا تعتبر هذه الإضافة مهمة؟
عند قطع الاتصال بالإنترنت، قد يفاجأ الأعضاء بذلك، مما يؤدي إلى فقدان محتوى مساهماتهم دون علمهم. هذا الأمر قد يسبب إحباطًا كبيرًا، لذا من الضروري توفير إشعار فوري يُنبههم عن حالة الاتصال. الرسالة ستظهر فور انقطاع الاتصال وتختفي عند استعادته، مما يساعد الأعضاء على عدم الضغط على زر الإرسال دون معرفة وضع الاتصال.كيفية تثبيت الرسالة:
لإضافة هذه الميزة إلى منتداك، اتبع الخطوات التالية:- تثبيت JavaScript:
- قم بإضافة كود JavaScript إلى جميع صفحات المنتدى.
- يمكنك تخصيص العنوان حسب الرغبة.
javascript
نسخ الكود
الكود:
window.addEventListener('DOMContentLoaded', function() {
var messageElement = document.createElement('div');
messageElement.id = 'connection-message';
messageElement.innerHTML = 'أنتبه: تم قطع الاتصال بالإنترنت';
messageElement.style.cssText = `
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #9f180f;
color: #fffdeb;
font-size: 24px;
font-weight: bold;
padding: 10px;
text-align: center;
z-index: 9999;
display: none;
`;
document.body.appendChild(messageElement);
function showMessage() {
messageElement.style.display = 'block';
messageElement.style.animation = 'slideIn 0.5s ease-in-out';
}
function hideMessage() {
messageElement.style.animation = 'slideOut 0.5s ease-in-out';
setTimeout(function() {
messageElement.style.display = 'none';
}, 500);
}
window.addEventListener('offline', showMessage);
window.addEventListener('online', hideMessage);
});
[list=3][*]تخصيص الرسالة:
- يمكنك تعديل محتوى الرسالة، الخلفية، ولون النص من خلال تعديل الجزء المحدد في الكود.
[/list]
الفوائد:
- تحسين تجربة المستخدم: يُساعد على توعية الأعضاء بحالة الاتصال، مما يُعزز من رضاهم.
- تقليل الإحباط: يُمكن الأعضاء من حفظ مساهماتهم قبل إرسالها، وبالتالي تقليل فقدان المحتوى.
- زيادة التفاعل: يُحفز الأعضاء على المشاركة بشكل أكبر دون الخوف من فقدان البيانات.
- يمكنك تعديل محتوى الرسالة وخلفيتها ولون النص من كود JavaScript
من خلال تعديل الجزء المشار اليه في الصورة التالية