Apa Itu Messaging App?
Messaging App adalah aplikasi untuk mengirimkan pesan antar pengguna. Contohnya WhatsApp, Telegram, Line, Facebook Messanger, Skype, WeChat dan lain sebagainya. Kita sering menyebutnya dengan sebutan Aplikasi Chatting.
Pertanyaannya,
Penting nggak sih mencantumkan kontak langsung yang mengarah ke messaging app di blog?
Jawabannya,
Sangat Penting !
Apalagi jika kamu bikin blog dengan tujuan untuk mencari uang. Seperti menjual jasa maupun jual barang (online shop misalnya). Dengan adanya link chat langsung, pengunjung akan bisa langsung menghubungi kalian hanya dengan sekali klik saja. Itu artinya, pengunjung tidak perlu save nomor atau add username terlebih dahulu.
Cukup satu klik tombolnya, mereka akan dibawa ke link yang menuju chatting langsung. Dengan sekali klik, pengunjung bisa langsung Input Format Pemesanan Otomatis dan biasanya para penggiat online shop menerapkan format khusus untuk pemesanan.
Misalnya, mereka meminta calon pembeli untuk mengisi data sebagai berikut:
- Nama :
- Telepon :
- Alamat :
- Nama Barang :
- Ukuran :
Nah, toko online kalian seperti itu kan. Karena ini sudah jadi standar semua toko online agar memudahkan dalam mengelola database pemesanannya. Biasanya kamu sering dibingungkan nggak sih kalau ada calon pembeli yang tidak menulis formatnya dengan benar? Memang hal sepele. Tetapi buat kita sangat penting, agar datanya tidak acak-acakan.
Sekarang kalian bisa membuat calon pembeli mengetikkan format dengan benar tanpa perlu meminta mereka menulisnya secara manual.
Tapi perlu kalian ketahui sebelumnya, bahwa custom message yang otomatis menulis pesan seperti itu baru cuma WhatsApp. Untuk Messaging App lainnya belum bisa.
Cara Membuat Tombol Link yang Langsung Mengarah ke Aplikasi Chat
# CSS
Langkah pertama, tambahkan dulu style-nya melalui pengaturan CSS. Bagi platform lain, silahkan masuk ke menu masing-masing ya. Berikut ini adalah platform Blogger/Blogspot.
- Masuk ke Menu Tema, Lalu pilih Edit HTML.
- Simpan kode berikut ini setelah atau di bawah
<style>
. - Save dengan klik tombol Simpan.
/* Tombol Menuju Chat Langsung ke Messaging App Ala elzeno.id Dilarang keras mengubah nama atribut yang ada di dalam kode ini */ :root { --elzenoKontak-WA: #25D366; /* Warna WhatsApp */ --elzenoKontak-Line: #00C300; /* Warna Line */ --elzenoKontak-Tele: #0088CC; /* Warna Telegram */ --elzenoKontak-Messenger: #0084FF; /* Warna Messenger */ --elzenoKontak-WA-uname: "6285000000xxx"; /* Nomor WhatsApp */ --elzenoKontak-WA-text: "Assalamu%27alaikum%20Wr.%20Wb.,%0ASaya%20menghubungi%20Anda%20*melalui*%20halaman%20di%20blog%20*elzeno.id*"; /* Pesan WhatsApp */ --elzenoKontak-Line-uname: "elzeno"; /* Username Line */ --elzenoKontak-Tele-uname: "@elzeno"; /* Username Telegram */ --elzenoKontak-Messenger-uname: "elzeno88"; /* Username Messenger */ } #elzenoKontak {text-align:center; width:100%; line-height:0px} #elzenoKontak svg {width:55px;height:55px} #elzenoKontak a {text-decoration:none} #elzenoKontak .WA svg path {fill:var(--elzenoKontak-WA)} #elzenoKontak .Line svg {width: 70px; height: 70px; margin-bottom: -20px; margin-left:20px} #elzenoKontak .Line svg path {fill:var(--elzenoKontak-Line)} #elzenoKontak .Tele svg path {fill:var(--elzenoKontak-Tele)} #elzenoKontak .Messenger svg path {fill:var(--elzenoKontak-Messenger)} #elzenoKontak .WA, #elzenoKontak .Line, #elzenoKontak .Tele, #elzenoKontak .Messenger {display:inline-block; width:90px; text-align:center; margin:0 5px} #elzenoKontak .onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; margin-top:5px; } #elzenoKontak .onoffswitch-checkbox { display: none; } #elzenoKontak .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } #elzenoKontak .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; } #elzenoKontak .WA .onoffswitch-label { display: block; overflow: hidden; border: 2px solid var(--elzenoKontak-WA); border-radius: 20px; } #elzenoKontak .WA .onoffswitch-inner:before { content: var(--elzenoKontak-WA-uname); background-color: var(--elzenoKontak-WA); color: #FFFFFF; font-size:11px; } #elzenoKontak .WA .onoffswitch-inner:after { content: "WhatsApp"; color: var(--elzenoKontak-WA); font-size:14px; } #elzenoKontak .WA:hover .onoffswitch-label .onoffswitch-inner { margin-left: 0; } #elzenoKontak .Line .onoffswitch-label { display: block; overflow: hidden; border: 2px solid var(--elzenoKontak-Line); border-radius: 20px; } #elzenoKontak .Line .onoffswitch-inner:before { content: var(--elzenoKontak-Line-uname); background-color: var(--elzenoKontak-Line); color: #FFFFFF; font-size:11px; } #elzenoKontak .Line .onoffswitch-inner:after { content: "Line"; color: var(--elzenoKontak-Line); font-size:14px; } #elzenoKontak .Line:hover .onoffswitch-label .onoffswitch-inner { margin-left: 0; } #elzenoKontak .Tele .onoffswitch-label { display: block; overflow: hidden; border: 2px solid var(--elzenoKontak-Tele); border-radius: 20px; } #elzenoKontak .Tele .onoffswitch-inner:before { content: var(--elzenoKontak-Tele-uname); background-color: var(--elzenoKontak-Tele); color: #FFFFFF; font-size:11px; } #elzenoKontak .Tele .onoffswitch-inner:after { content: "Telegram"; color: var(--elzenoKontak-Tele); font-size:14px; } #elzenoKontak .Tele:hover .onoffswitch-label .onoffswitch-inner { margin-left: 0; } #elzenoKontak .Messenger .onoffswitch-label { display: block; overflow: hidden; border: 2px solid var(--elzenoKontak-Messenger); border-radius: 20px; } #elzenoKontak .Messenger .onoffswitch-inner:before { content: var(--elzenoKontak-Messenger-uname); background-color: var(--elzenoKontak-Messenger); color: #FFFFFF; font-size:11px; } #elzenoKontak .Messenger .onoffswitch-inner:after { content: "Messenger"; color: var(--elzenoKontak-Messenger); font-size:14px; } #elzenoKontak .Messenger:hover .onoffswitch-label .onoffswitch-inner { margin-left: 0; }
Pengaturan
- Silahkan kalian ganti tulisan yang berwarna BIRU dengan nomor atau username masing-masing.
- Setelah itu ganti tulisan yang berwarna MERAH dengan tulisan yang akan terkirim ke WhatsApp saat memulai chatting.
Format Penulisan
Untuk tulisan yang dikirim harus sudah di encode. Seperti contoh diatas %20
merupakan tanda ganti untuk spasi. Berikut ini kode lainnya yang bisa digunakan:
%0A
untuk baris baru (enter atau line break)%25
untuk persen (%)%26
untuk dan (&)%3A
untuk titik dua (:)%3B
untuk titik koma (;)%3F
untuk tanda tanya (?)%27
untuk tanda petik (')%20
untuk spasi ( )
Kode lainnya bisa kalian lihat di w3schools.com
Kalian juga bisa menggunakan format text bawaan pada WhatsApp. Misalnya:
*
: *elzeno* untuk membuat huruf tebal (bold) elzeno_
: _elzeno_ untuk membuat huruf miring (italic) elzeno~
: ~elzeno~ untuk membuat huruf tercoret (strikethrough)elzeno'''
: '''elzeno''' untuk membuat huruf dengan font monospace
# HTML
Selanjutnya adalah kode HTML yang digunakan untuk memanggil atau memunculkan tombol menuju chat langsung ke WhatsApp dan aplikasi lainnya. Kalian bisa pasang dan simpan kode ini dimana saja. Entah itu di widget, halaman post, atau halaman statis (page). Kalian juga tidak perlu untuk mengubah apapun karena kalian sudah mengaturnya pada CSS diatas.
<div id="elzenoKontak"> <div class="WA"> <a href="javascript:void(0)" onclick="window.open('https://api.whatsapp.com/send?phone='+getComputedStyle(document.querySelector('#elzenoKontak .WA .onoffswitch-inner'), ':before').getPropertyValue('content').replace('"','').replace('"','')+'&text='+getComputedStyle(document.querySelector('html'), ':root').getPropertyValue('--elzenoKontak-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('#elzenoKontak .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('#elzenoKontak .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('#elzenoKontak .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>
# Demo/Preview
Itulah cara membuat link chat langsung menuju Messaging App ala elzeno. Kalian bebas untuk memakainya, tapi dengan catatan "TIDAK MENGUBAH APAPUN" kecuali diminta untuk diubah sesuai tutorial. Semoga bermanfaat dan terima kasih atas kunjungan Anda.
Sumber :
https://www.igniel.com/2017/12/tombol-chat-langsung-ke-aplikasi.html