Cara Membuat Widget Tombol Link Chat Whatsapp Melayang di Blog

Cara Membuat Widget Tombol Link Chat Whatsapp Melayang di Blog
Kamis, 13 Agustus 2020
Cara Membuat Tombol Whatsapp Melayang di Blog dan Wordpress
Riffat Digital Services - Halo assalamualaikum warahmatullahi wabarakatuh jumpa lagi dengan kami admin dari Riffat Store dan Riffat Jaya Motor Pada kesempatan kali ini saya mau berbagi tips seputar Cara Membuat Widget Tombol Link Chat Whatsapp Melayang di Blog yang di mana tips ini mungkin bisa anda temukan di Google dan Kami juga akan memberikan nya dengan cara yang simpel dan hanya dengan 3 langkah saja anda sudah memiliki customer service atau kontak chat yang akan terlihat lebih profesional lagi untuk Website Anda maupun blog Anda dan silakan langsung disimak.
Bagi Anda yang kebetulan baru berkunjung ke website kami jangan lupa berlangganan email dengan tujuan agar ketika ada informasi baru atau ada artikel baru maupun ada postingan baru anda tidak sampai ketinggalan untuk membacanya, dan untuk membuat tombol WhatsApp di website atau tombol telepon melayang yang sangat mudah sekali dan tentunya bisa langsung Anda Praktekkan Walaupun anda tidak tahu tentang dunia perkodingan.
Dan untuk membuat tombol live chat WhatsApp yang melayang di blog maupun di website anda bisa mengikuti cara-cara yang bisa kami sampaikan di bawah ini, dan bagi Anda yang memiliki website maupun blog penjualan produk tentu saja widget ini sangat bermanfaat.
Disini anda bisa menggunakan satu nomor telepon atau 2 nomor telepon bahkan lebih dari 2  nomor telepon pun bisa anda pasang pada widget melayang ini, dan untuk mempersingkat waktu silakan bisa anda langsung perhatikan kode-kode yang akan kami sampaikan di bawah ini.
1. Pada langkah yang pertama silahkan anda Buka website Anda atau wordpress Anda atau blogger maupun blogspot anda, kemudian Anda bisa masuk ke bagian TEMA kemudian silakan pilih EDIT HTML lalu Silakan cari kode ]]></b:skin> atau bisa juga kode </style> kemudian silahkan anda pasang CSS di bawah ini tepat di atas kode ]]></b:skin> maupun </style>
<link href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' rel='stylesheet' type='text/css'/>
/* 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;right:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}
a.trikpediashow-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;right:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)}
a.trikpediashow-chat i{transform:scale(1.2);margin:0 10px 0 0}.header-chat{background:linear-gradient(to right 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:left;margin:0 10px 0 0}
.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;left: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}
.trikpedia-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:40px;margin:-5px 0 0 5px;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 .trikpedia-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;right: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;left:5%;right: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}
2. Selanjutnya yaitu Langkah kedua masih di bagian edit tema seperti pada langkah nomor 1 sekarang silakan Anda cari kode </body> kemudian silahkan anda copy paste kode yang ada di bawah ini tepat di atas kode </body> kemudian jangan lupa simpan tema anda
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
/* Whatsapp Chat Widget by www.trikpedia.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",".trikpediashow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>
3. Pada langkah yang terakhir silakan Anda masuk pada bagian TATA LETAK lalu pilih WIDGET lalu pilih HTML/JAVASCRIPT dan silakan Anda simpan kode yang ada di bawah ini lalu silakan Anda Save kode tersebut
<div id='whatsapp-chat' class='hide'>
<div class='header-chat'>
<div class='head-home'><h3>Hello!</h3>
<p>Click one of our representatives below to chat on WhatsApp or send us an email to info@riffatstore.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'>Support</span>
<span class='chat-nama'>Customer Service 1</span>
</div><span class='my-number'>685223124070</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'>Sales</span>
<span class='chat-nama'>Customer Service 2</span>
</div><span class='my-number'>685222205330</span>
</a>
<!-- Info Contact End -->

<div class='trikpedia-msg'>Call us to <b>+685223124070</b> from <i>0:00hs a 24:00hs</i></div></div>
<div class='start-chat hide'>
<div class='first-msg'><span>Hello! What can I do for you?</span></div>
<div class='trikpedia-msg'><textarea id='chat-input' placeholder='Write a response' maxlength='120' row='1'></textarea>
<a href='javascript:void;' id='send-it'>Send</a></div></div>
<div id='get-number'></div><a class='close-chat' href='javascript:void'>×</a>
</div>
<a class='trikpediashow-chat' href='javascript:void' title='Show Chat'><i class='fab fa-whatsapp'></i>How can I help you?</a>
*Tambahan:
Untuk memunculkan jumlah customer service atau kontak chat WhatsApp Anda bisa mengaturnya seperti pada kode-kode yang ada di bawah ini misalkan anda ingin menggunakan satu nomor saja atau misalkan dua nomor atau bahkan sampai 3 nomor.
* 1 Nomor Telpon/Whatsapp
<!-- 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'>Support</span>
<span class='chat-nama'>Customer Service 1</span>
</div><span class='my-number'>685223124070</span>
</a>
<!-- Info Contact End -->
* 2 Nomor Telpon/Whatsapp
<!-- 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'>Support</span>
<span class='chat-nama'>Customer Service 1</span>
</div><span class='my-number'>685223124070</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'>Sales</span>
<span class='chat-nama'>Customer Service 2</span>
</div><span class='my-number'>685222205330</span>
</a>
<!-- Info Contact End -->
* Jika ingin menambahkan banyak kontak anda tinggal menambahkan kode yang diatas saja dan jangan lupa ganti nomor telpon tersebut dengan nomor telpon anda.
Sekian dulu apa yang bisa kami sampaikan tentang bagaimana cara membuat tombol buy instan atau bagaimana cara membuat tombol telepon melayang WhatsApp di WordPress maupun di blogspot, dan widget tersebut bisa anda pasang di sidebar ataupun di halaman postingan ataupun di halaman tertentu misalnya di halaman statis yang terpenting adalah anda memperhatikan kode yang yang ada pada nomor 3 saja silakan Anda bisa taruh di bagian lainnya dan tidak harus di bagian tata letak saja, Mungkin itu saja dulu apa yang bisa kami sampaikan semoga bermanfaat dan selamat malam.




Emoticon

Hallo!

Hi! Selamat datang di Jasa SEO Tasik. Silahkan beritahu apa yang bisa kami bantu dan kami akan menjawab pertanyaan Anda.

Support Customer Service 1
6285223124070
Sales Customer Service 2
6285323368870
Hubungi Kami di +6285223124070 dari Jam 08.00-17.00 WIB
Halo, ada yang bisa Kami bantu?
×
Ada yang bisa Kami bantu?