Membuat Tombol Chat WA Dan SMS Langsung Ke Admin Blog

Ditulis oleh: Adhy Suryadi

Ditulis pada: 6/02/2017

Tombol chat Whatsapp atau WA dan SMS langsung ke admin blog ini berguna untuk blog yang menjual produk atau barang seperti online shop.

Dengan tombol ini konsumen tidak perlu input nomor kontak admin untuk memesan barang baik dengan WA atau SMS. Chat WA atau SMS konsumen akan langsung masuk ke admin blog, sehingga lebih memudahkan konsumen dalam memesan barang.

Tentunya tombol ini bisa berjalan ketika konsumen menggunakan hp untuk mengakses halaman.

Untuk demo silahkan lihat pada halaman ini (sekalian order juga boleh hehehe).


Jika Anda memang sedang memerlukan tombol seperti ini, silahkan copy kode di bawah ini.

Silahkan copy kode di bawah ini dan simpan di atas </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

/*<![CDATA[*/

.btn{padding:10px 16px;margin:0;font-size:16px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}

.btn:active:focus,.btn:focus{outline:0}

.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}

.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}

.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}

.btn-purple{background-color:#8E24AA;border-bottom:2px solid #6A1B9A;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;color:#fff;}

.btn-purple:active,.btn-purple:focus,.btn-purple:hover{background-color:#6A1B9A;color:#fff}

#cara_belanja{margin-top:30px;background:#F3E5F5;padding:15px 15px 5px;border-radius:3px!important;}

#carabelanja:target{display:block;margin-top:-80px;height:80px;visibility:hidden}

#cara_belanja h4{font-size:16px;font-weight:600;color:#8E24AA;margin:0;line-height:1}

#cara_belanja p{font-size:14px;font-weight:400;display:block;margin:10px 0;line-height:1.2}

#cara_belanja a{margin-bottom:10px;margin-right:10px}

#cara_belanja svg{width:24px;height:24px;vertical-align:-15%;}

/*]]>*/

</style>

</b:if>

Kemudian simpan kode HTML ini di edit HTML di bawah postingan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='cara_belanja'>

<span id='carabelanja'/>

  <h4>Cara Belanja Di KIOSIANA</h4>

  <p>Silahkan pesan item ini dengan menghubungi Contact Toko yang tertera di sidebar kanan (untuk device mobile ada di bagian bawah), harap disertakan Kode Item atau Nama Item ketika order barang. Barang dikirimkan sehari setelah transaksi selesai. Atau silahkan pesan langsung via tombol Whatapps dan SMS di bawah ini. Admin toko akan langsung merespond pesanan Anda.</p>

<a class='btn btn-purple btn-lg' expr:href='&quot;https://api.whatsapp.com/send?phone=6281312815xxx&amp;text=Saya%20pesan%20&quot; + data:post.title'><svg viewBox='0 0 24 24'>

    <path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z' fill='#fff'/>

</svg> Pesan Sekarang</a>

<a class='btn btn-purple btn-lg' expr:href='&quot;sms://+6281312815xxx?body=Saya%20pesan%20&quot; + data:post.title'><svg viewBox='0 0 24 24'>

    <path d='M17.25,18H6.75V4H17.25M14,21H10V20H14M16,1H8A3,3 0 0,0 5,4V20A3,3 0 0,0 8,23H16A3,3 0 0,0 19,20V4A3,3 0 0,0 16,1Z' fill='#fff'/>

</svg> SMS Sekarang</a>

  </div>

</b:if>

Silahkan ganti kode 6281312815xxx dan +6281312815xxx dengan nomor hp admin yang digunakan untuk WA dan SMS.

Dengan kode di atas, maka pesan yang dikirim akan seperti berikut: "Saya pesan bla bla bla". bla bla bla adalah nama item atau nama produk yang dijadikan judul postingan.

Kalimat lainnya silahkan sesuaikan.

Selamat mencoba.