
Messaging App adalah aplikasi untuk bertukar pesan. Misalnya WhatsApp, Line, Telegram, Facebook Messenger, BBM, dan lain sebagainya. Kita lebih mengenalnya dengan sebutan "aplikasi chat". Penting nggak sih mencantumkan kontak yang langsung mengarah ke messaging app di blog? Sangat penting! Apalagi buat kamu yang bikin blog dengan tujuan untuk mencari uang. Entah itu jual jasa maupun jual barang (online shop misalnya). Dengan adanya link chat langsung menuju aplikasi ini, pengunjung akan bisa langsung menghubungi kamu hanya dengan sekali klik. Artinya, pengunjung nggak perlu save nomor atau add username terlebih dulu. Cukup dengan klik tombolnya, mereka akan dibawa ke link yang menuju chat langsung.
Dan ngomong-ngomong, saya juga pakai tombolnya di blog ini. Kamu bisa cek di halaman KONTAK.
Hanya Sekali Klik, Pengunjung Bisa Langsung Input Format Pemesanan Otomatis
Biasanya para online shop menerapkan format khusus untuk pemesanan. Misalnya, mereka meminta calon pembeli untuk menulis data sebagai berikut:- Nama Barang
- Ukuran
- Nama
- Telepon
- Alamat
Sekarang kamu bisa membuat calon pembeli mengetik format yang benar tanpa perlu meminta mereka menulisnya secara manual. Dengan membuat tombol menuju aplikasi chat langsung ini, setiap ada calon pembeli yang melakukan klik akan otomatis menulis format yang sudah kita tetapkan.
Yang bisa langsung menulis pesan seperti itu baru bisa di WhatsApp aja. Messaging app lainnya belum bisa.
Membuat Tombol Link Yang Langsung Mengarah Ke Aplikasi Chat
#CSS
Pertama, tambahkan dulu style-nya melalui pengaturan CSS. Untuk platform lain, silakan masuk ke menu masing-masing. Dibawah ini contoh untuk platform Blogger / Blogspot.- Masuk ke menu Theme, lalu pilih Edit HTML.
- Simpan kode berikut SETELAH / DIBAWAH
<style>
/* Tombol Menuju Chat Langsung ke Messaging App Ala Igniel Dilarang keras mengubah nama atribut yang ada di dalam kode ini */ :root { --ignielKontak-WA: #25D366; /* Warna WhatsApp */ --ignielKontak-Line: #00C300; /* Warna Line */ --ignielKontak-Tele: #0088CC; /* Warna Line */ --ignielKontak-Messenger: #0084FF; /* Warna Messenger */ --ignielKontak-BBM: #000000; /* Warna BBM */ --ignielKontak-WA-uname: "6285000000xxx"; /* Nomor WhatsApp */ --ignielKontak-WA-text: "Hai,%20saya%20menghubungi%20*melalui*%20halaman%20kontak%20di%20blog%20*igniel.com*"; /* Pesan WhatsApp */ --ignielKontak-Line-uname: "igniel"; /* Username Line */ --ignielKontak-Tele-uname: "igniel"; /* Username Telegram */ --ignielKontak-Messenger-uname: "ignieldotcom"; /* Username Messenger */ --ignielKontak-BBM-uname: "222xxxx"; /* Pin BBM */ } #ignielKontak {text-align:center; width:100%; line-height:0px} #ignielKontak svg {width:55px;height:55px} #ignielKontak a {text-decoration:none} #ignielKontak .WA svg path {fill:var(--ignielKontak-WA)} #ignielKontak .Line svg {width: 70px; height: 70px; margin-bottom: -20px; margin-left:20px} #ignielKontak .Line svg path {fill:var(--ignielKontak-Line)} #ignielKontak .Tele svg path {fill:var(--ignielKontak-Tele)} #ignielKontak .Messenger svg path {fill:var(--ignielKontak-Messenger)} #ignielKontak .BBM svg path {fill:var(--ignielKontak-BBM)} #ignielKontak .WA, #ignielKontak .Line, #ignielKontak .Tele, #ignielKontak .Messenger, #ignielKontak .BBM {display:inline-block; width:90px; text-align:center; margin:0 5px} #ignielKontak .onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; margin-top:5px; } #ignielKontak .onoffswitch-checkbox { display: none; } #ignielKontak .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } #ignielKontak .onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 25px; padding: 0; line-height: 25px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; text-align: center; box-sizing: border-box; } #ignielKontak .WA .onoffswitch-label { display: block; overflow: hidden; border: 2px solid var(--ignielKontak-WA); border-radius: 20px; } #ignielKontak .WA .onoffswitch-inner:before { content: var(--ignielKontak-WA-uname); background-color: var(--ignielKontak-WA); color: #FFFFFF; font-size:11px; } #ignielKontak .WA .onoffswitch-inner:after { content: "WhatsApp"; color: var(--ignielKontak-WA); font-size:14px; } #ignielKontak .WA:hover .onoffswitch-label .onoffswitch-inner { margin-left: 0; } #ignielKontak .Line .onoffswitch-label { display: block; overflow: hidden; border: 2px solid var(--ignielKontak-Line); border-radius: 20px; } #ignielKontak .Line .onoffswitch-inner:before { content: var(--ignielKontak-Line-uname); background-color: var(--ignielKontak-Line); color: #FFFFFF; font-size:11px; } #ignielKontak .Line .onoffswitch-inner:after { content: "Line"; color: var(--ignielKontak-Line); font-size:14px; } #ignielKontak .Line:hover .onoffswitch-label .onoffswitch-inner { margin-left: 0; } #ignielKontak .Tele .onoffswitch-label { display: block; overflow: hidden; border: 2px solid var(--ignielKontak-Tele); border-radius: 20px; } #ignielKontak .Tele .onoffswitch-inner:before { content: var(--ignielKontak-Tele-uname); background-color: var(--ignielKontak-Tele); color: #FFFFFF; font-size:11px; } #ignielKontak .Tele .onoffswitch-inner:after { content: "Telegram"; color: var(--ignielKontak-Tele); font-size:14px; } #ignielKontak .Tele:hover .onoffswitch-label .onoffswitch-inner { margin-left: 0; } #ignielKontak .Messenger .onoffswitch-label { display: block; overflow: hidden; border: 2px solid var(--ignielKontak-Messenger); border-radius: 20px; } #ignielKontak .Messenger .onoffswitch-inner:before { content: var(--ignielKontak-Messenger-uname); background-color: var(--ignielKontak-Messenger); color: #FFFFFF; font-size:11px; } #ignielKontak .Messenger .onoffswitch-inner:after { content: "Messenger"; color: var(--ignielKontak-Messenger); font-size:14px; } #ignielKontak .Messenger:hover .onoffswitch-label .onoffswitch-inner { margin-left: 0; } #ignielKontak .BBM .onoffswitch-label { display: block; overflow: hidden; border: 2px solid var(--ignielKontak-BBM); border-radius: 20px; } #ignielKontak .BBM .onoffswitch-inner:before { content: var(--ignielKontak-BBM-uname); background-color: var(--ignielKontak-BBM); color: #FFFFFF; font-size:11px; } #ignielKontak .BBM .onoffswitch-inner:after { content: "BBM"; color: var(--ignielKontak-BBM); font-size:14px; } #ignielKontak .BBM:hover .onoffswitch-label .onoffswitch-inner { margin-left: 0; }
- Save dulu dengan klik tombol Save theme.
PENGATURAN
FORMAT TULISAN
Tulisan yang dikirim harus sudah di-encode. Dalam contoh diatas,
Selain itu, kamu juga bisa menggunakan format text bawaan pada WhatsApp. Contohnya:
- Ganti tulisan yang berwarna BIRU dengan nomor / username masing-masing.
- Ganti tulisan yang berwarna MERAH dengan tulisan yang akan terkirim ke WhatsApp saat memulai chat.
FORMAT TULISAN
Tulisan yang dikirim harus sudah di-encode. Dalam contoh diatas,
%20
merupakan tanda ganti untuk spasi. Berikut kode lain yang bisa digunakan:%0A
untuk baris baru (enter / line break).%25
untuk persen (%)%26
untuk dan (&)%3A
untuk titik dua (:)%3B
untuk titk koma.%3F
untuk tanda tanya (?)- Kode lainnya bisa kamu lihat di w3schools.com
Selain itu, kamu juga bisa menggunakan format text bawaan pada WhatsApp. Contohnya:
*
: *igniel* untuk membuat huruf tebal (bold) igniel_
: _igniel_ untuk membuat huruf miring (italic) igniel~
: ~igniel~ untuk membuat huruf tercoret (strikethrough)igniel```
: ```igniel``` untuk membuat huruf monospace igniel
#HTML
Berikut adalah kode HTML yang digunakan untuk memanggil atau memunculkan tombol menuju chat langsung ke WhatsApp dan aplikasi lainnya. Simpan kode ini dimanapun kamu mau. Entah di widget, halaman post, atau halaman statis (page). Nggak perlu mengubah apapun, karena kamu sudah mengaturnya pada CSS diatas.<div id="ignielKontak">
<div class="WA">
<a href="javascript:void(0)" onclick="window.open('https://api.whatsapp.com/send?phone='+getComputedStyle(document.querySelector('#ignielKontak .WA .onoffswitch-inner'), ':before').getPropertyValue('content').replace('"','').replace('"','')+'&text='+getComputedStyle(document.querySelector('html'), ':root').getPropertyValue('--ignielKontak-WA-text').replace('"','').replace('"',''))" title="WhatsApp" target="_blank">
<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"></path></svg>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
</label>
</div>
</a>
</div>
<div class="Line">
<a href="javascript:void(0)" onclick="window.open('http://line.me/ti/p/~'+getComputedStyle(document.querySelector('#ignielKontak .Line .onoffswitch-inner'), ':before').getPropertyValue('content').replace('"','').replace('"',''))" title="Line" target="_blank">
<svg viewBox="0 0 24 24"><path d="M 12.91 6.57 c 0.232 0 0.42 0.19 0.42 0.42 c 0 0.23 -0.188 0.42 -0.42 0.42 h -1.17 v 0.75 h 1.17 c 0.232 0 0.42 0.188 0.42 0.42 c 0 0.23 -0.188 0.42 -0.42 0.42 h -1.59 c -0.23 0 -0.418 -0.19 -0.418 -0.42 V 5.4 c 0 -0.23 0.188 -0.42 0.42 -0.42 h 1.59 c 0.23 0 0.418 0.19 0.418 0.42 c 0 0.232 -0.188 0.42 -0.42 0.42 h -1.17 v 0.75 h 1.17 Z m -2.57 2.01 c 0 0.18 -0.116 0.34 -0.288 0.398 c -0.043 0.014 -0.088 0.02 -0.133 0.02 c -0.14 0 -0.26 -0.06 -0.34 -0.167 L 7.95 6.62 v 1.96 c 0 0.23 -0.186 0.42 -0.42 0.42 c -0.23 0 -0.417 -0.19 -0.417 -0.42 V 5.4 c 0 -0.18 0.115 -0.34 0.286 -0.397 c 0.04 -0.015 0.09 -0.022 0.13 -0.022 c 0.13 0 0.25 0.07 0.33 0.17 L 9.5 7.37 V 5.4 c 0 -0.23 0.188 -0.42 0.42 -0.42 c 0.23 0 0.42 0.19 0.42 0.42 v 3.18 Z m -3.828 0 c 0 0.23 -0.188 0.42 -0.42 0.42 c -0.23 0 -0.418 -0.19 -0.418 -0.42 V 5.4 c 0 -0.23 0.188 -0.42 0.42 -0.42 c 0.23 0 0.418 0.19 0.418 0.42 v 3.18 Z M 4.868 9 h -1.59 c -0.23 0 -0.42 -0.19 -0.42 -0.42 V 5.4 c 0 -0.23 0.19 -0.42 0.42 -0.42 c 0.232 0 0.42 0.19 0.42 0.42 v 2.76 h 1.17 c 0.232 0 0.42 0.188 0.42 0.42 c 0 0.23 -0.188 0.42 -0.42 0.42 M 16 6.87 C 16 3.29 12.41 0.376 8 0.376 S 0 3.29 0 6.87 c 0 3.208 2.846 5.896 6.69 6.405 c 0.26 0.056 0.615 0.172 0.705 0.394 c 0.08 0.2 0.053 0.51 0.026 0.72 l -0.11 0.68 c -0.03 0.2 -0.16 0.79 0.7 0.43 c 0.86 -0.36 4.61 -2.72 6.29 -4.65 C 15.45 9.59 16 8.3 16 6.87"></path></svg>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
</label>
</div>
</a>
</div>
<div class="Tele">
<a href="javascript:void(0)" onclick="window.open('https://telegram.me/'+getComputedStyle(document.querySelector('#ignielKontak .Tele .onoffswitch-inner'), ':before').getPropertyValue('content').replace('"','').replace('"',''))" title="Telegram" target="_blank">
<svg viewBox="0 0 24 24"><path d="M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z"></path></svg>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
</label>
</div>
</a>
</div>
<div class="Messenger">
<a href="javascript:void(0)" onclick="window.open('https://m.me/'+getComputedStyle(document.querySelector('#ignielKontak .Messenger .onoffswitch-inner'), ':before').getPropertyValue('content').replace('"','').replace('"',''))" title="Messenger" target="_blank">
<svg viewBox="0 0 24 24"><path d="M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z" ></path></svg>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
</label>
</div>
</a>
</div>
<div class="BBM">
<a href="javascript:void(0)" onclick="window.open('http://pin.bbm.com/'+getComputedStyle(document.querySelector('#ignielKontak .BBM .onoffswitch-inner'), ':before').getPropertyValue('content').replace('"','').replace('"',''))" title="BBM" target="_blank">
<svg viewBox="0 0 24 24"><path d="M5.45,10.28C6.4,10.28 7.5,11.05 7.5,12C7.5,12.95 6.4,13.72 5.45,13.72H2L2.69,10.28H5.45M6.14,4.76C7.09,4.76 8.21,5.53 8.21,6.5C8.21,7.43 7.09,8.21 6.14,8.21H2.69L3.38,4.76H6.14M13.03,4.76C14,4.76 15.1,5.53 15.1,6.5C15.1,7.43 14,8.21 13.03,8.21H9.41L10.1,4.76H13.03M12.34,10.28C13.3,10.28 14.41,11.05 14.41,12C14.41,12.95 13.3,13.72 12.34,13.72H8.72L9.41,10.28H12.34M10.97,15.79C11.92,15.79 13.03,16.57 13.03,17.5C13.03,18.47 11.92,19.24 10.97,19.24H7.5L8.21,15.79H10.97M18.55,13.72C19.5,13.72 20.62,14.5 20.62,15.45C20.62,16.4 19.5,17.17 18.55,17.17H15.1L15.79,13.72H18.55M19.93,8.21C20.88,8.21 22,9 22,9.93C22,10.88 20.88,11.66 19.93,11.66H16.5L17.17,8.21H19.93Z" ></path></svg>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
</label>
</div>
</a>
</div>
</div>
#Demo / Preview
Omong-omong, saya terinspirasi dari toggle ON / OFF yang bergeser ketika membuat tombol ini.Itulah cara membuat link chat langsung menuju Messaging App ala Igniel. Kamu bebas pakai, dengan catatan "TIDAK MENGUBAH APAPUN" kecuali yang diminta untuk diubah sesuai tutorial. Hargai pembuatnya dengan tetap membiarkan nama mereka tercantum di dalam kode. Ribet lho ini bikinnya.
keren artikelnya mbak ..izin pakek
BalasHapusSilakan mas.
Hapuslama ga kunjungan ke blog ini
BalasHapusudah jadi blog tutorial yah, dulu kan curhat2 geje, hehe
Iya nih udah pindah haluan. Sekarang curhatnya dalem hati aja :^)
Hapusmba koq gak work di blogger, Kode Cssnya udah di simpen di bawah style, Atau ada yang salah ??
BalasHapusApa template kamu punya beberapa tag kondisional? Kalo iya, cek lagi, mungkin kamu simpen di tag kondisional yang bukan halaman postingan.
Hapusuntuk wordpress ada gak mbak?
BalasHapusSemua platform bisa. Bebas kok. Soalnya cuma nambahin CSS dan HTML. Bedanya cuma di tempat penyimpanan kodenya.
HapusKalo di WP simpen CSS-nya di tempat pengaturan CSS masing-masing. Dan HTML-nya bisa disimpen dimana aja sesuai masnya mau nampilin di mana (misalnya di widget).
Keren banget mbak , di candrarudi.com memakai AMP apakah script ini support untuk AMP mbak ?
BalasHapusBisa mas. Dicoba dulu aja.
HapusKalau utk chat langsung via SMS gmn ya mbak?
BalasHapusOh iya kelupaan haha. Nanti diupdate ya. Besok bisa mampir kesini lagi buat liat hasilnya :)
HapusUntuk link WA gak work
BalasHapusia betul gan, gak work uy
HapusMaksudnya link wa dibuka lewat firefox gak bisa kebuka. Tetapi kalau lewat google chrome wrok linknya. itu kenapa yah mb ?
BalasHapussemua versi firefox kaya nya sudah gk support whatsapp
HapusIya Mozilla Firefox nggak bisa. Tombol ini lebih diutamakan buat pengguna mobile, yang buka web lewat smartphone. Kalau dari smartphone bakal langsung lari ke aplikasi.
Hapusupdate dong untuk instagram!
BalasHapusHello Igniel.... this is aweasome, please what about message via Sms can you include it also?
BalasHapusKerren dan sangat bermanfaat mbaa ,,, ijin make
BalasHapusKarena cuma ditaruh di halaman statis, css nya gak usah dimasukin di template bisa gak? Jadi ditumpuk aja semua di halaman statisnya.
BalasHapusSangat bisa.
HapusTapi bagusnya disimpen di template. Kasih tag kondisional biar kodenya cuma terpanggil di halaman statis.
<b: if cond='data:view.isPage'>
/* Simpan CSS disini /*
</b: if>
Teh.. ijin pasang. nuhun..
BalasHapuskalo disisipin fb pixel bisa ga mba igniel
BalasHapusdibuat melayang kaya tombol back to top gimana mbak?
BalasHapusBottom:20px;margin-left:20px
Hapus#cmiiw
Teh, saya pasang di wordpress bisa dan tampil di semua halaman. cuman ketika diklik yang jalannya cuman di homepage. kalau di halaman produk (woocommerce) gak redirect ke pesannya
BalasHapusKayanya salah simpan. Coba cek lagi, kodenya ditaruh di tag kondisional halaman homepage saja mungkin.
Hapusmbak ada yang salah kode script untuk share WAnya pas mau di save, gimana solusinya mbak?
BalasHapusApanya yang bermasalah? Apa kode error yang tampil? Sertakan sceenshot ya.
Hapusmba, saya kok ga nemu style di HTML nya ya?
BalasHapushttp://memiles.gratiss.info
BalasHapuslihat di http://vgrit.bloger.id/
BalasHapuscocok sekali :)
BalasHapusUntuk icon sendiri bisa diganti ga yah , diganti dengan selain icon sosial media?
BalasHapusBisa. Bebas. Itu pake ikon SVG. Cari aja di blog ini tutor soal pasang ikon SVG.
Hapusmba kalo bbm kan udah ga ada. kalo mau ganti jadi pesan sms gmn.
BalasHapus