يمكن أن يكون التواصل الفوري مع زوار موقعك الإلكتروني نقطة تحول في تحسين تجربة المستخدم وزيادة معدل التحويل. واحدة من الطرق الفعالة لتحقيق ذلك هي دمج دردشة مباشرة عبر WhatsApp، مما يسمح للمستخدمين بالتواصل معك مباشرةً دون أي تعقيدات.
 |
| كيفية إضافة دردشة WhatsApp إلى Blogger وزيادة التفاعل |
في هذا الدليل، سنتعرف على كيفية تنفيذ هذه الميزة على موقعك في Blogger بخطوات واضحة وسهلة.
لماذا تضيف صندوق دردشة WhatsApp المباشر؟
- ✅ تواصل فوري: يتيح لك الرد على استفسارات الزوار لحظيًا، مما يعزز رضاهم.
- ✅ سهولة الاستخدام: معظم المستخدمين معتادون على WhatsApp، مما يجعل التفاعل طبيعيًا وسلسًا.
- ✅ زيادة التفاعل: عند توفر وسيلة مباشرة للتواصل، يصبح الزائر أكثر ميلًا للبقاء في موقعك بدلًا من المغادرة.
- ✅ تحقيق معدلات تحويل أعلى: الإجابات السريعة تشجع الزوار على اتخاذ قرارات أسرع، سواء كان ذلك في الشراء أو التسجيل.
طريقة إضافة دردشة WhatsApp إلى موقع Blogger خطوة بخطوة
1️⃣ تسجيل الدخول إلى Blogger والانتقال إلى قسم "المظاهر"
ابدأ بتسجيل الدخول إلى لوحة التحكم في Blogger، ثم توجه إلى "المظاهر" حيث يمكنك تعديل الكود المصدري لقالب موقعك.
2️⃣ فتح إعدادات القالب
اضغط على أيقونة "تحرير HTML" بجوار زر التخصيص، حيث ستقوم بإضافة بعض التعليمات البرمجية لتفعيل الدردشة.
3️⃣ التأكد من وجود jQuery في القالب
قبل المتابعة، تأكد من أن jQuery مثبت بالفعل ضمن كود القالب، لأنه ضروري لعمل بعض وظائف الدردشة بسلاسة. إذا لم يكن موجودًا، ستحتاج إلى إضافته في قسم، أضف النص الموجود أسفل </head>علامة القالب الخاصة بك.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>4️⃣ تعديل ملف CSS لتصميم أيقونة الدردشة
قم بالبحث عن ]]></b:skin> داخل محرر HTML، ثم أضف كود CSS قبل هذه العلامة، وذلك لضبط شكل ومكان زر الدردشة.
svg{width:22px;height:22px;vertical-align:middle;fill:#fff}
.chatMenu,.chatButton .svg-2{display:none}
a#send-it{color:#555;width:55px;margin:5px;font-weight:700;padding:10px;background:#f0f5fb;border-radius:15px 3px 15px 15px;text-decoration:none}
a#send-it:hover{opacity:.8}
.chatStart input[type="text"]{padding:10px;margin:0;width:80%;border:none;color:#555}
.chatStart input[type="text"]:focus{outline:none}
.chatMenu{display:none}
.chatButton{position:fixed;background-color:#ff0033;bottom:20px;right:20px;border-radius:50px;z-index:20;overflow:hidden;display:flex;align-items:center;justify-content:center;width:50px;height:50px;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}
.chatButton svg{margin:auto;fill:#fff}
.chatButton svg.svg-2{display:none}
.chatBox{position:fixed;bottom:70px;right:20px;width:320px;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;
z-index:21;opacity:0;visibility:hidden;line-height:normal}
.chatContent{border-radius:15px;background-color:#fff;box-shadow:0 5px 15px 0 rgba(0,0,0,.05);overflow:hidden}
.chatHeader{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:#ff0033;overflow:hidden}
.chatHeader img{border-radius:100%;width:50px;float:left;margin: -2px 10px 0 0;}
.chatHeader .chatTitle{padding-left:16px;font-size:14px;font-weight:700;color:#fff}
.chatHeader .chatTitle span{font-size:11.5px;display:block;line-height:1.58em}
.chatHeader:before{content:"";bottom:14;right:0;width:12px;height:12px;box-sizing:border-box;background-color:#4dc247;display:block;position:absolute;z-index:10;border-radius:100%;border:2px solid #ff0033;left:55px}
.chatText{display:flex;flex-wrap:wrap;margin:25px 20px;font-size:12px;color:#505050}
.chatText span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:#f0f5fb;border-radius:3px 15px 15px}
.chatText span:after{content:'Just Now';margin-left:15px;font-size:9px;color:#989b9f}
.chatText span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}
.chatText span.typing:after{display:none}
.chatBox .chatStart{display:flex;align-items:center;margin-top:15px;padding:18px 20px;border-radius:10px;background-color:#fff;overflow:hidden;font-size:12px;color:#505050}
.chatMenu:checked + .chatButton{-webkit-transform: rotate(360deg);transform: rotate(360deg)}
.chatMenu:checked + .chatButton svg.svg-1{display:none}
.chatMenu:checked + .chatButton svg.svg-2{display:block}
.chatMenu:checked ~ .chatBox{bottom:90px;opacity:1;visibility:visible}5️⃣ إضافة كود WhatsApp في نهاية القالب
ابحث عن علامة </body>، ثم أضف كود WhatsApp قبلها مباشرةً، بحيث يظهر الزر في المكان الصحيح على الصفحة.
<input class='chatMenu hidden' id='offchatMenu' type='checkbox'/>
<label class='chatButton' for='offchatMenu'>
<svg class='svg-1' viewBox='0 0 32 32'><g><path d='M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z'></path><path d='M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z'></path></g></svg>
<svg class='svg-2' viewBox='0 0 512 512'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'></path></svg>
</label>
<div class='chatBox'>
<div class='chatContent'>
<div class='chatHeader'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAeRy4BsxTzb2pjikc46op3Uw0DdjY1RoTq3BQ-S5wxyEsDKGFQ3AOoC98UpKpmwjSOljzlsGSOsKEyQcGK695Ygz-owKNvVH9BAx8S3CsfQ4_Z0VWcDnAaqeY7lLIlIKEVhg2LwajDZd676FlbAHzVuKkWRsz2d8dOmqZb_wAILRG73tL6ftUGPRo2-LI/s460/siteguide-icon.jpg' alt="SiteGuide Logo"/>
<div class='chatTitle'>SiteGuide <span>Typically replies within hour</span></div>
</div>
<div class='chatText'>
<span>Hi there If you need any assistance, I'm always here.</span>
<span class='typing'>...</span>
</div>
</div>
<div class='chatStart'><input type='text' id='chatInput' placeholder='Type message here'/>
<a href='javascript:void;' id='send-it'>Send</a>
</div>
</div>
<script>
//<![CDATA[
//From SiteGuide.xyz
$('#send-it').click(whatsappchat);
function whatsappchat() {
var walink = 'https://web.whatsapp.com/send',
phone = '+8801xxxxxxxxx'; // Replace with your number
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var walink = 'whatsapp://send';
}
var inputChat = $('#chatInput').val(),
input_viaUrl = location.href;
var wendy_whatsapp = walink + '?phone=' + phone + '&text=' + inputChat + '%0A%0A' + 'Sent VIA : ' + input_viaUrl;
window.open(wendy_whatsapp, '_blank');
window.location.href = input_viaUrl;
}
///]]>
</script>6️⃣ حفظ التعديلات واختبار الوظيفة
بمجرد الانتهاء من تعديل القالب، احفظ التغييرات ثم قم بتحديث موقعك لمشاهدة زر الدردشة في الزاوية السفلية اليمنى. لا تنسَ استبدال الرقم الموجود في الكود برقم WhatsApp الفعلي الخاص بك.
نصائح لضمان نجاح دردشة WhatsApp المباشرة
- ✔️ كن متاحًا: حاول أن يكون هناك شخص مسؤول عن الرد خلال أوقات العمل الأساسية.
- ✔️ حافظ على الاحترافية: استخدم نبرة واضحة ومحترفة عند التعامل مع العملاء.
- ✔️ استفد من الردود الجاهزة: يساعدك WhatsApp في توفير الوقت عبر إعداد ردود سريعة للأسئلة الشائعة.
بهذه الطريقة، يمكنك تسهيل عملية التواصل بينك وبين زوار موقعك، مما يعزز من تجربة المستخدم ويزيد من فرص التفاعل والتحويل. جرب هذه الخطوات الآن، واستمتع بفوائد وجود وسيلة تواصل سريعة ومباشرة على موقعك!.
الأسئلة الشائعة حول إضافة دردشة WhatsApp إلى Blogger
1️⃣ هل يمكنني إضافة دردشة WhatsApp إلى Blogger دون تعديل القالب؟
لا، يجب تعديل كود HTML وCSS للقالب حتى يظهر زر الدردشة في المكان المناسب على الموقع.2️⃣ هل يمكنني تخصيص شكل زر WhatsApp؟
نعم، يمكنك تعديل كود CSS لتغيير حجم الزر، لونه، أو موقعه على الصفحة.3️⃣ هل هذه الطريقة تعمل على الهواتف المحمولة وأجهزة الكمبيوتر؟
نعم، زر الدردشة سيعمل على جميع الأجهزة، لكن من الأفضل اختباره بعد التثبيت لضمان ظهوره بشكل صحيح.4️⃣ ماذا أفعل إذا لم يعمل زر WhatsApp بعد إضافته؟
تأكد من أنك أدخلت الكود في المكان الصحيح، وأن jQuery مضاف إلى القالب، ثم قم بمسح ذاكرة التخزين المؤقت وتجربة الصفحة مجددًا.5️⃣ هل هناك طرق أخرى لإضافة دردشة WhatsApp إلى Blogger؟
نعم، يمكنك استخدام إضافات خارجية أو أدوات مجانية توفر أكواد جاهزة لتضمين الدردشة دون تعديل القالب يدويًا.الخاتمة
إضافة دردشة WhatsApp إلى موقع Blogger تمنح زوارك وسيلة سريعة وسهلة للتواصل، مما يعزز تجربة المستخدم ويزيد من معدلات التفاعل. باستخدام الخطوات السابقة، يمكنك تفعيل هذه الميزة بسهولة وضمان استجابة أسرع لأسئلة العملاء. لا تتردد في تطبيق هذه الطريقة الآن والاستفادة من التواصل الفوري الذي سيجعل موقعك أكثر احترافية وجاذبية!.
انتهى المقال الى هنا!
اذا اعجبك مقال
وأستفدت منه لاتنسى مشاركته مع الاصدقاء والعائلة. نحن نسعى دائما لتقديم الافضل.
