مرحباً...اقدم لكم على مدونة تطبيقي بلس . كيف اضافة زر واتساب للدعم الفني على بلوجر أو وورد بريس بطريقة مميزة ، كمى أن هذه الإضافة مهمة ومفيدة للمدونات أو المواقع التي تهتم ببيع المنتوجات ، مثل قوالب بلوجر والخدمات المصغرة وجميع المنتوجات .
هذه الصورة توضح كيف عمل الإضافة.طريقة عمل زر المحادثة
بالمختصر هذه الإضافة تعمل على تواصل الزائر مع صاحب المدونة أو الموقع من خلال واتس اب ، إي عند دخول الزائر للموقع الخاص بك يجد زر المحادثة على واتساب ، يمكنه من إضافة نص الرسالة وعند الظغط على إرسال يتم توجيهه بشكل مبارشر على تطبيق واتس اب.
مميزات الأضافة whatsapp Chat
• مصممه بالغة الماتريال ديزاين
• يمكنك اضافة عدد غير محدود من الحسابات لربطها بشكل مباشر مع تطبيق whatsapp
• إضافة بريد ألكتروني للتواصل إذا كان الزائر لا يتوفر على تطبيق واتس اب.
طريقة التركيب الأولى
قم بالدخول إلى بلوجر >> التخطيط ثم قم بإضافة أداة HTML/JavaScript وضع الكود التالي داخلها ثم قم بالحفظ.
أولاً لا تنسى أخذ نسخة أحتياطية لتجنب الأخطاء.
• إنتقل إلى المدونة،ثم إلى القالب،ثم إضغط على تحرير edit html.
إضغط في وسط محرر الأكواد ثم ctrl + f لأظهار مربع البحث.
بإستعمال زر ctrl + c للنسخ و ctrl + v للصق.
قم بالبحث على وسم
ثم ضع هذا الكود فوقه مباشر
بعدها قم بالبحث على الوسم التالي
وقم بضع هذا الكود فوقه أعلاه
بعدها قم بعملية الحفظ .
ثم توجه إلى التخطيط وضع إداة HTML/JavaScript جديدة وضع هذا الكود بداخلها
يرجى ملاحظة أن خط الإضافة سوف يكون تلقائي من الخط الافتراضي للقالب الذي تستخدمه. تأكد من تثبيت الخطوط الخاصة وكذلك CSS الخارجية مثل Awesome Font وأيضًا jQuery .
إذا لم تكن متواجدة في القالب الخاص بك عليك اضافتها فوق وسم <head/>
إلى هنا نكون قد أنتهينا من تركيب الإضافة المميزة إلى اللقاء
<style>
/* CSS Multiple Whatsapp Chat */
#whatsapp-chat{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;left:30px;overflow:hidden;z-index:98;animation-name:showchat;animation-duration:1s;transform:scale(1)}
a.blantershow-chat{background:#23ab23;color:#fff;position:fixed;z-index:98;bottom:25px;left:30px;font-size:15px;padding:15px 15px;border-radius:100px;box-shadow:0 1px 15px rgba(32,33,36,.28)}
a.blantershow-chat i{transform:scale(1.2);margin:0 0 0 10px}.header-chat{background:linear-gradient(to left top,#ffc410,#ffa610);color:#fff;padding:20px}
.header-chat h3{margin:0 0 10px}.header-chat p{font-size:14px;line-height:1.7;margin:0}
.info-avatar{position:relative}.info-avatar img{border-radius:100%;width:50px;float:right;margin:0 0 0 10px}
.info-avatar:before{content:'\f232';z-index:1;font-family:"Font Awesome 5 Brands";background:#23ab23;color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;right:30px}
a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s}
a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888}
#get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none}
.blanter-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
textarea#chat-input{border:none;font-family:'Arial',sans-serif;width:100%;height:20px;outline:none;resize:none}
a#send-it{color:#555;width:60px;margin:-5px 5px 0 0;font-weight:700;padding:8px;background:#eee;border-radius:10px}
.first-msg{background:#f5f5f5;padding:30px;text-align:center}
.first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block}
.start-chat .blanter-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;left:15px;color:#fff;font-size:30px}
@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}
@media screen and (max-width:480px){#whatsapp-chat{width:auto;right:5%;left:5%;font-size:80%}}
.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
.show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
</style>
<div id='whatsapp-chat' class='hide'>
<div class='header-chat'>
<div class='head-home'><h3>مرحبا!</h3>
<p>انقر على أحد ممثلينا أدناه للدردشة على WhatsApp أو أرسل لنا رسالة بريد إلكتروني إلى nwr.alsalam@gmail.com</p></div>
<div class='get-new hide'><div id='get-label'></div><div id='get-nama'></div></div></div>
<div class='home-chat'>
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN3exD0nt-lTiQB1q_0Sku5iRz2owORv_X21dnsw9uSjCinomewgVnMP7kqpKlud0I_bmDl-tv7dpIWIboq46RTjNflm-qRdxzl8nSlkqCdU_E7bWBKA2kkT4WK5M2rF17Uzf1zWBdRLo/s70/supportmale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>الدعم</span>
<span class='chat-nama'>خدمة العملاء 1</span>
</div><span class='my-number'>6281977094280</span>
</a>
<!-- Info Contact End -->
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEPJr3p-2_3JZQvyrqHd27yjUZJIUJhz4SUd4N2IKU_M3YYNQlLUyWCYL51nKHrgsU4AmOC49MdoKnNXP1FYSAOFJ1PYhi1h3_VfHifTsKXzqCXj0eBaIWZP1Y2jNuDCZmRNhBs6Axfgg/s70/supportfemale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>مبيعات</span>
<span class='chat-nama'>خدمة العملاء 2</span>
</div><span class='my-number'>6222222222</span>
</a>
<!-- Info Contact End -->
<div class='blanter-msg'> اتصل بنا<b>+62123456789</b></div></div>
<div class='start-chat hide'>
<div class='first-msg'><span>مرحبا! ما الذي يمكنني أن أفعله من أجلك ؟</span></div>
<div class='blanter-msg'><textarea id='chat-input' placeholder='اكتب ردا' maxlength='120' row='1'></textarea>
<a href='javascript:void;' id='send-it'>إرسال</a></div></div>
<div id='get-number'></div><a class='close-chat' href='javascript:void'>×</a>
</div>
<a class='blantershow-chat' href='javascript:void' title='Show Chat'><i class='fab fa-whatsapp'></i></a>
<script type='text/javascript'>
//<![CDATA[
/* Whatsapp Chat Widget by www.idblanter.com */
$(document).on("click","#send-it",function(){var a=document.getElementById("chat-input");if(""!=a.value){var b=$("#get-number").text(),c=document.getElementById("chat-input").value,d="https://web.whatsapp.com/send",e=b,f="&text="+c;if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))var d="whatsapp://send";var g=d+"?phone="+e+f;window.open(g, '_blank')}}),$(document).on("click",".informasi",function(){document.getElementById("get-number").innerHTML=$(this).children(".my-number").text(),$(".start-chat,.get-new").addClass("show").removeClass("hide"),$(".home-chat,.head-home").addClass("hide").removeClass("show"),document.getElementById("get-nama").innerHTML=$(this).children(".info-chat").children(".chat-nama").text(),document.getElementById("get-label").innerHTML=$(this).children(".info-chat").children(".chat-label").text()}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".blantershow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>
طريقة التركيب الثانية
أولاً لا تنسى أخذ نسخة أحتياطية لتجنب الأخطاء.
• إنتقل إلى المدونة،ثم إلى القالب،ثم إضغط على تحرير edit html.
إضغط في وسط محرر الأكواد ثم ctrl + f لأظهار مربع البحث.
بإستعمال زر ctrl + c للنسخ و ctrl + v للصق.
قم بالبحث على وسم
<b:skin><![CDATA[*/
ثم ضع هذا الكود فوقه مباشر
/* CSS Multiple Whatsapp Chat */
#whatsapp-chat{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;left:30px;overflow:hidden;z-index:98;animation-name:showchat;animation-duration:1s;transform:scale(1)}
a.blantershow-chat{background:#23ab23;color:#fff;position:fixed;z-index:98;bottom:25px;left:30px;font-size:15px;padding:15px 15px;border-radius:100px;box-shadow:0 1px 15px rgba(32,33,36,.28)}
a.blantershow-chat i{transform:scale(1.2);margin:0 0 0 10px}.header-chat{background:linear-gradient(to left top,#ffc410,#ffa610);color:#fff;padding:20px}
.header-chat h3{margin:0 0 10px}.header-chat p{font-size:14px;line-height:1.7;margin:0}
.info-avatar{position:relative}.info-avatar img{border-radius:100%;width:50px;float:right;margin:0 0 0 10px}
.info-avatar:before{content:'\f232';z-index:1;font-family:"Font Awesome 5 Brands";background:#23ab23;color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;right:30px}
a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s}
a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888}
#get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none}
.blanter-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
textarea#chat-input{border:none;font-family:'Arial',sans-serif;width:100%;height:20px;outline:none;resize:none}
a#send-it{color:#555;width:60px;margin:-5px 5px 0 0;font-weight:700;padding:8px;background:#eee;border-radius:10px}
.first-msg{background:#f5f5f5;padding:30px;text-align:center}
.first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block}
.start-chat .blanter-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;left:15px;color:#fff;font-size:30px}
@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}
@media screen and (max-width:480px){#whatsapp-chat{width:auto;right:5%;left:5%;font-size:80%}}
.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
.show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
بعدها قم بالبحث على الوسم التالي
</body>
وقم بضع هذا الكود فوقه أعلاه
<script type='text/javascript'>
//<![CDATA[
/* Whatsapp Chat Widget by www.idblanter.com */
$(document).on("click","#send-it",function(){var a=document.getElementById("chat-input");if(""!=a.value){var b=$("#get-number").text(),c=document.getElementById("chat-input").value,d="https://web.whatsapp.com/send",e=b,f="&text="+c;if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))var d="whatsapp://send";var g=d+"?phone="+e+f;window.open(g, '_blank')}}),$(document).on("click",".informasi",function(){document.getElementById("get-number").innerHTML=$(this).children(".my-number").text(),$(".start-chat,.get-new").addClass("show").removeClass("hide"),$(".home-chat,.head-home").addClass("hide").removeClass("show"),document.getElementById("get-nama").innerHTML=$(this).children(".info-chat").children(".chat-nama").text(),document.getElementById("get-label").innerHTML=$(this).children(".info-chat").children(".chat-label").text()}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".blantershow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>
بعدها قم بعملية الحفظ .
ثم توجه إلى التخطيط وضع إداة HTML/JavaScript جديدة وضع هذا الكود بداخلها
<div id='whatsapp-chat' class='hide'>
<div class='header-chat'>
<div class='head-home'><h3>مرحبا!</h3>
<p>انقر على أحد ممثلينا أدناه للدردشة على WhatsApp أو أرسل لنا رسالة بريد إلكتروني إلى nwr.alsalam@gmail.com</p></div>
<div class='get-new hide'><div id='get-label'></div><div id='get-nama'></div></div></div>
<div class='home-chat'>
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN3exD0nt-lTiQB1q_0Sku5iRz2owORv_X21dnsw9uSjCinomewgVnMP7kqpKlud0I_bmDl-tv7dpIWIboq46RTjNflm-qRdxzl8nSlkqCdU_E7bWBKA2kkT4WK5M2rF17Uzf1zWBdRLo/s70/supportmale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>الدعم</span>
<span class='chat-nama'>خدمة العملاء 1</span>
</div><span class='my-number'>6281977094280</span>
</a>
<!-- Info Contact End -->
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEPJr3p-2_3JZQvyrqHd27yjUZJIUJhz4SUd4N2IKU_M3YYNQlLUyWCYL51nKHrgsU4AmOC49MdoKnNXP1FYSAOFJ1PYhi1h3_VfHifTsKXzqCXj0eBaIWZP1Y2jNuDCZmRNhBs6Axfgg/s70/supportfemale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>مبيعات</span>
<span class='chat-nama'>خدمة العملاء 2</span>
</div><span class='my-number'>6222222222</span>
</a>
<!-- Info Contact End -->
<div class='blanter-msg'> اتصل بنا<b>+62123456789</b></div></div>
<div class='start-chat hide'>
<div class='first-msg'><span>مرحبا! ما الذي يمكنني أن أفعله من أجلك ؟</span></div>
<div class='blanter-msg'><textarea id='chat-input' placeholder='اكتب ردا' maxlength='120' row='1'></textarea>
<a href='javascript:void;' id='send-it'>إرسال</a></div></div>
<div id='get-number'></div><a class='close-chat' href='javascript:void'>×</a>
</div>
<a class='blantershow-chat' href='javascript:void' title='Show Chat'><i class='fab fa-whatsapp'></i></a>
ثم قم بالحفظيرجى ملاحظة أن خط الإضافة سوف يكون تلقائي من الخط الافتراضي للقالب الذي تستخدمه. تأكد من تثبيت الخطوط الخاصة وكذلك CSS الخارجية مثل Awesome Font وأيضًا jQuery .
إذا لم تكن متواجدة في القالب الخاص بك عليك اضافتها فوق وسم <head/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<link href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' rel='stylesheet' type='text/css'/>
إلى هنا نكون قد أنتهينا من تركيب الإضافة المميزة إلى اللقاء