Cara Membuat Tombol Whatsapp Melayang di Blog dan Wordpress

Hallo semuanya apa kabar semoga Anda masih sehat selalu kali ini kita akan membahas topik tentang Cara Membuat Tombol Whatsapp Melayang di Blog dan Wordpress dan tutorial kali ini atau panduan kali ini kita akan membahas seperti apa yang sudah disampaikan sebelumnya tetapi kali ini kita tidak akan membuat pembelian terhadap produk tersebut tetapi kita bisa melakukan chatting secara langsung kepada penjual produk tersebut maka dari itu dengan adanya widget ini Tentu saja sangat banyak sekali manfaatnya.

Salah satu manfaat yang bisa anda gunakan yaitu itu mungkin anda pemilik website ingin langsung berinteraksi dengan pengunjung Anda atau visitor anda apalagi jika website anda merupakan website untuk menjalan produk tentu saja hal tersebut akan sangat bermanfaat sekali Oleh karena itu apabila anda ingin menjual berbagai macam produk setianya Anda harus bisa memahami tentang bagaimana pengunjung anda untuk membeli produk Anda.

Widget ini cocok untuk semua website baik itu blogspot atau blogger maupun WordPress maupun yang lainnya dan widget ini bisa anda pasang dengan sangat mudah dan anda hanya perlu melakukan 3 langkah untuk memasang widget ini dan tentunya Widget yang kami bagikan sangat responsif sekali dan wedget ini sangat bagus dan sangat nyaman digunakan dan tidak memberatkan loading dari blog maupun website yang anda miliki

Salah satu cara yang bisa anda pakai untuk Hal ini tentu saja dengan memaksimalkan kinerja website yang tidak memiliki atau blog yang kita miliki setidaknya kita bisa menjadi pilihan terbaik agar kedepannya kita bisa lebih mudah membalas chat dari seseorang apalagi jika seseorang tersebut ingin membeli produk pada anda dengan begitu maka dia bisa langsung menghubungi anda lewat nomor whatsApp yang anda miliki tentunya nomor telepon yang Anda pasang pada website anda.

Cara Membuat Widget Tombol Link Chat Whatsapp Melayang di Blog

Untuk memasang widget ini sangatlah mudah kita langsung saja ke inti permasalahannya atau pembahasannya jadi saya tidak perlu banyak basa-basi lagi yang penting anda sudah tahu maksud dari artikel maupun postingan yang kami sampaikan ini.

1. Pada langkah yang pertama silakan Anda masuk pada bagian TEMA kemudian pilih EDIT HTML kemudian Silakan anda cari kode ]]></b:skin> atau kode </style> untuk mempercepat pencarian Anda bisa menekan kombinasi pada keyboard anda yaitu CTRL + F jika sudah ketemu kode </style> atau ]]></b:skin> silakan Anda pasang kode di bawah ini tepat di atas kode ]]></b:skin> atau </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;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. Kemudian pada langkah yang ke-2 silakan Anda cari kode </body> lalu silakan Anda pasang kode yang ada di bawah ini tepat di atas kode </body> Save template anda.

//<![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 tahap yang terakhir silakan Anda masuk pada bagian TATA LETAK lalu pilih WIDGET kemudian pilih HTML/JAVASCRIPT dan silakan Anda masukkan kode yang ada di bawah ini pada kolom tersebut

<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>

<span class='chat-label'>Support</span>

<span class='chat-nama'>Customer Service 1</span>

</div><span class='my-number'>685223124070</span>

</a>

<span class='chat-label'>Sales</span>

<span class='chat-nama'>Customer Service 2</span>

</div><span class='my-number'>685222205330</span>

</a>

<div class='first-msg'><span>Hello! What can I do for you?</span></div>

</div>

Dan yang perlu Anda lakukan hanyalah mengganti kode atau hanya mengganti nomor teleponnya saja atau nomor whatsApp yang kalian miliki yang dimana kode tersebut memiliki dua nomor telepon WhatsApp Apabila Anda ingin menampilkan hanya satu nomor telepon WhatsApp saja Anda tinggal hapus salah satunya mulai dari  sampai dengan  begitu juga Anda ingin menambahkan lebih dari 2 Nomor Anda tinggal menambahkan antara kode tersebut saja dan jangan lupa untuk mengganti nomor telepon yang tertera dengan nomor telepon tujuan yang ingin anda pasang pada website anda.

Sekian dulu apa yang bisa kami sampaikan yang menyangkut dengan Bagaimana cara membuat widget nomor chat WhatsApp yang melayang pada website maupun pada blogspot sehingga akan menambah plus dari kualitas atau tampilan blog maupun website yang anda miliki, Sekian dulu apa yang mungkin bisa kami sampaikan Jika ada salah kata Mohon dimaafkan dan untuk informasi informasi menarik lainnya silakan Anda langganan email kami dan dengan begitu Anda bisa mengetahui postingan postingan terbaru dari kami dan atas kunjungannya saya ucapkan terima kasih dan wassalam.

Blog MR

Cara Membuat Tombol Whatsapp Melayang di Blog dan Wordpress

Related Posts