إنشاء زر Whatsapp Chat بشكل ماتريال دزاين و بأرقام وحسابات متعددة

إنشاء زر Whatsapp Chat بشكل ماتريال دزاين و بأرقام وحسابات متعددة

    مرحبًا بكم في موقع تقني واي ، سأشارككم هذه المرة شرح مثيرً للاهتمام مثالي للمواقع الإلكترونية أو المدونات التي تحتوي على قسم أو بيع المنتجات.  يمكن استخدام هذه الأداة المصغّرة على جميع أنواع الأنظمة الأساسية مع HTML و CSS و Javascript فقط.  بالطبع هو أيضا مناسبة للاستخدام على وورد بريس.
    إنشاء زر Whatsapp Chat بشكل ماتريال دزاين و بأرقام وحسابات متعددة
    لمعاينة الاضافة فهي الآن على موقعي في الاسفل

    من الصورة يجب أن تتخيل كيف تعمل الإضافة وكيف تعمل أداة الدردشة هذه.  يمكنك إضافة 2 إلى عدد غير محدود من الحسابات التي سيتم توصيلها بـ WhatsApp.  بعد التحديد ، يمكن للزوار كتابة رسالة قبل الدخول أخيرًا إلى تطبيق whatsapp تلقائيًا .  يجب تركيب هذه الأداة إذا كنت بحاجة إلى أكثر من 2 خدمة عملاء.

    للتعرف على كيفية تركيب حساب whatsapp وإضافته أيضًا ، ما عليك سوى نسخ الأكواد الموجودة في الأسفل. ثم طبيق جميع الخطوات ، يمكن القيام بكل شيء بسهولة.

    الطريقة الأولى :

    انسخ الكود ادناه غير المعلومات الموجودة على أكواد html فقط بعد تتعديل المعلومات انسخ المود بكاملة ثم اذهب التخطيط الى اسفل التخطيط اضافة أداة JavaScript و لصق الاكواد بعدها اضغط على حفظ .

    
    <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:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}
    a.blantershow-chat{background:linear-gradient(to left top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;left:30px;font-size:15px;padding:10px 20px;border-radius:30px;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,#6f96f3,#164ed2);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 أو أرسل لنا رسالة بريد إلكتروني إلى issamemohtadi@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://2.bp.blogspot.com/-y6xNA_8TpFo/XXWzkdYk0MI/AAAAAAAAA5s/RCzTBJ_FbMwVt5AEZKekwQqiDNqdNQJjgCLcBGAs/s70/supportmale.png'/></div>
    <div class='info-chat'>
    <span class='chat-label'>الدعم</span>
    <span class='chat-nama'>خدمة العملاء 1</span>
    </div><span class='my-number'>212655550069</span>
    </a>
    <!-- Info Contact End -->
    
    <!-- Info Contact Start -->
    <a class='informasi' href='javascript:void' title='Chat Whatsapp'>
    <div class='info-avatar'><img src='https://4.bp.blogspot.com/-X1Xs2iRKabY/XXWzkqQ-iDI/AAAAAAAAA5w/HSyhR0gIXvUzlAx5XgaZzmlrCJkTgrOFQCLcBGAs/s70/supportfemale.png'/></div>
    <div class='info-chat'>
    <span class='chat-label'>مبيعات</span>
    <span class='chat-nama'>خدمة العملاء 2</span>
    </div><span class='my-number'>212655550069</span>
    </a>
    <!-- Info Contact End -->
    
    <div class='blanter-msg'> اتصل بنا<b>212655550069+</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>
    

    الطريقة التانية :

    قم بتسجيل الدخول إلى Blogger تحرير HTML

    ضع اكواد css فوق وسم </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:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}
    a.blantershow-chat{background:linear-gradient(to left top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;left:30px;font-size:15px;padding:10px 20px;border-radius:30px;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,#6f96f3,#164ed2);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>

    بالنسبة إلى هذا html يمكنك وضعه في التخطيط ، في الواقع يمكن وضعه في أي مكان ، إذا قمت بتحرير HTML ، يمكنك وضعه أعلى أكواد Javascript في الخطوة  القادمة.


    <div id='whatsapp-chat' class='hide'>
    <div class='header-chat'>
    <div class='head-home'><h3>مرحبا!</h3>
    <p>انقر على أحد ممثلينا أدناه للدردشة على WhatsApp أو أرسل لنا رسالة بريد إلكتروني إلى issamemohtadi@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://2.bp.blogspot.com/-y6xNA_8TpFo/XXWzkdYk0MI/AAAAAAAAA5s/RCzTBJ_FbMwVt5AEZKekwQqiDNqdNQJjgCLcBGAs/s70/supportmale.png'/></div>
    <div class='info-chat'>
    <span class='chat-label'>الدعم</span>
    <span class='chat-nama'>خدمة العملاء 1</span>
    </div><span class='my-number'>212655550069</span>
    </a>
    <!-- Info Contact End -->
    <!-- Info Contact Start -->
    <a class='informasi' href='javascript:void' title='Chat Whatsapp'>
    <div class='info-avatar'><img src='https://4.bp.blogspot.com/-X1Xs2iRKabY/XXWzkqQ-iDI/AAAAAAAAA5w/HSyhR0gIXvUzlAx5XgaZzmlrCJkTgrOFQCLcBGAs/s70/supportfemale.png'/></div>
    <div class='info-chat'>
    <span class='chat-label'>مبيعات</span>
    <span class='chat-nama'>خدمة العملاء 2</span>
    </div><span class='my-number'>212655550069</span>
    </a>
    <!-- Info Contact End -->
    <div class='blanter-msg'> اتصل بنا<b>212655550069+</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>
    

    ضع أكواد Javascript أدناه مباشرة أعلى وسم . </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>

    ثم حفظ القالب.

    يرجى ملاحظة أن خط الإضافة سوف يتبع تلقائيا الخط الافتراضي للقالب الذي تستخدمه.  تأكد من تثبيت الخطوط الخاصة وكذلك CSS الخارجية مثل Awesome Font وأيضًا  jQuery .

    إذا لم تكن قد استخدمت Font Awesome و 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'/>

    تُعد أداة دردشة WhatsApp مثالية عند دمجها مع قوالب بلوجر ، خصوصا المواقع التي تستخدم الدعم الفني او موقع لمتجر للبيع .
    الى هنا ننتهي من شرح اليوم اتمنى ان تعجبكم الإضافة و لا تبخلو عليها بتعاليقكم التحفيزية الى اللقاء.
    شارك المقال
    عصام مهتدي
    كاتب ومحرر اخبار اعمل في موقع موقع تقني واي .

    مقالات متعلقة

    إرسال تعليق

    مواقع[posts6]

    قوالب بلوجر[posts1]

    اندرويد[posts3]

    حماية[posts4]

    متصفحات[posts5]

    اختراقات[posts2]