Cara Membuat Tombol Menuju Chat Langsung Ke Berbagai Messaging App Ala Masmalven
Apa Itu Messaging App?
Messaging App yaitu aplikasi untuk mengantarkan pesan antar pengguna. Contohnya WhatsApp, Line Telegram, Facebook Messanger, BBM, dan lain sebagainya. Kita sering menyebutnya dengan istilah Aplikasi Chat.
Pertanyaannya, penting nggak sih mencantumkan kontak langsung yang mengarah ke messaging app di blog? Jawabannya, Sangat Penting!!
Apalagi jikalau kamu membuatblog dengan tujuan untuk mencari uang. Benar kan...
Entah itu memasarkan jasa maupun jual barang (online shop misalnya). Dengan adanya link chat langsung, hadirin akan bisa eksklusif menghubungi kau hanya dengan sekali klik saja. Itu artinya, pengunjung tidak perlu save nomor atau add username terlebih dulu.
Cukup satu klik tombolnya, mereka akan dibawa ke link yang menuju chat langsung. Dengan sekali klik, pengunjung bisa pribadi Input Format Pemesanan Otomatis dan umumnya para penggiat online shop menerapkan format khusus untuk pemesanan.
Misalnya, mereka meminta calon pembeli untuk mengisi data selaku berikut:
- Nama
- Telepon
- Alamat
- Nama Barang
- Ukuran
Nah, toko online kamu seperti itu kan. Karena ini telah jadi persyaratan semua toko online semoga membuat lebih mudah dalam mengelola database pemesanannya. Biasanya kau sering dibingungkan nggak sih kalau ada calon pembeli yang tidak menulis formatnya dengan benar? Memang hal sepele. Tetapi buat kita sungguh penting, agar datanya tidak berserakan.
Sekarang kamu bisa membuat calon pembeli mengetikkan format dengan benar tanpa perlu meminta mereka menulisnya secara manual.
Yang otomatis menulis pesan seperti itu hanya WhatsApp aja. Untuk Messaging App Lainnya masih belum mampu.
Cara Membuat Tombol Link yang Langsung Mengarah ke Aplikasi Chat
# CSS
Langkah pertama, tambahkan dahulu style-nya lewat pengaturan CSS. Bagi platform lain, silahkan masuk ke menu masing-masing ya. Berikut ini yaitu platform Blogger/Blogspot.
1. Masuk ke Menu Tema, Lalu pilih Edit HTML.
2. Simpan kode berikut ini sehabis atau di bawah .
/* Tombol Menuju Chat Langsung ke Messaging App Ala MasMalven Dilarang keras mengubah nama atribut yang ada di dalam arahan ini */ :root --MasMalvenKontak-WA: #25D366; /* Warna WhatsApp */ --MasMalvenKontak-Line: #00C300; /* Warna Line */ --MasMalvenKontak-Tele: #0088CC; /* Warna Line */ --MasMalvenKontak-Messenger: #0084FF; /* Warna Messenger */ --MasMalvenKontak-BBM: #000000; /* Warna BBM */ --MasMalvenKontak-WA-uname: "6285000000xxx"; /* Nomor WhatsApp */ --MasMalvenKontak-WA-text: "Hai,%20saya%20menghubungi%20*lewat*%20halaman%20kontak%20di%20blog%20*masmalven.com*"; /* Pesan WhatsApp */ --MasMalvenKontak-Line-uname: "MasMalven"; /* Username Line */ --MasMalvenKontak-Tele-uname: "MasMalven"; /* Username Telegram */ --MasMalvenKontak-Messenger-uname: "MasMalvendotcom"; /* Username Messenger */ --MasMalvenKontak-BBM-uname: "222xxxx"; /* Pin BBM */ #MasMalvenKontak text-align:center; width:100%; line-height:0px #MasMalvenKontak svg width:55px;height:55px #MasMalvenKontak a text-decoration:none #MasMalvenKontak .WA svg path fill:var(--MasMalvenKontak-WA) #MasMalvenKontak .Line svg width: 70px; height: 70px; margin-bottom: -20px; margin-left:20px #MasMalvenKontak .Line svg path fill:var(--MasMalvenKontak-Line) #MasMalvenKontak .Tele svg path fill:var(--MasMalvenKontak-Tele) #MasMalvenKontak .Messenger svg path fill:var(--MasMalvenKontak-Messenger) #MasMalvenKontak .BBM svg path fill:var(--MasMalvenKontak-BBM) #MasMalvenKontak .WA, #MasMalvenKontak .Line, #MasMalvenKontak .Tele, #MasMalvenKontak .Messenger, #MasMalvenKontak .BBM display:inline-block; width:90px; text-align:center; margin:0 5px #MasMalvenKontak .onoffswitch position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; margin-top:5px; #MasMalvenKontak .onoffswitch-checkbox display: none; #MasMalvenKontak .onoffswitch-inner display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; #MasMalvenKontak .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; #MasMalvenKontak .WA .onoffswitch-label display: block; overflow: hidden; border: 2px solid var(--MasMalvenKontak-WA); border-radius: 20px; #MasMalvenKontak .WA .onoffswitch-inner:before content: var(--MasMalvenKontak-WA-uname); background-color: var(--MasMalvenKontak-WA); color: #FFFFFF; font-size:11px; #MasMalvenKontak .WA .onoffswitch-inner:after content: "WhatsApp"; color: var(--MasMalvenKontak-WA); font-size:14px; #MasMalvenKontak .WA:hover .onoffswitch-label .onoffswitch-inner margin-left: 0; #MasMalvenKontak .Line .onoffswitch-label display: block; overflow: hidden; border: 2px solid var(--MasMalvenKontak-Line); border-radius: 20px; #MasMalvenKontak .Line .onoffswitch-inner:before content: var(--MasMalvenKontak-Line-uname); background-color: var(--MasMalvenKontak-Line); color: #FFFFFF; font-size:11px; #MasMalvenKontak .Line .onoffswitch-inner:after content: "Line"; color: var(--MasMalvenKontak-Line); font-size:14px; #MasMalvenKontak .Line:hover .onoffswitch-label .onoffswitch-inner margin-left: 0; #MasMalvenKontak .Tele .onoffswitch-label display: block; overflow: hidden; border: 2px solid var(--MasMalvenKontak-Tele); border-radius: 20px; #MasMalvenKontak .Tele .onoffswitch-inner:before content: var(--MasMalvenKontak-Tele-uname); background-color: var(--MasMalvenKontak-Tele); color: #FFFFFF; font-size:11px; #MasMalvenKontak .Tele .onoffswitch-inner:after content: "Telegram"; color: var(--MasMalvenKontak-Tele); font-size:14px; #MasMalvenKontak .Tele:hover .onoffswitch-label .onoffswitch-inner margin-left: 0; #MasMalvenKontak .Messenger .onoffswitch-label display: block; overflow: hidden; border: 2px solid var(--MasMalvenKontak-Messenger); border-radius: 20px; #MasMalvenKontak .Messenger .onoffswitch-inner:before content: var(--MasMalvenKontak-Messenger-uname); background-color: var(--MasMalvenKontak-Messenger); color: #FFFFFF; font-size:11px; #MasMalvenKontak .Messenger .onoffswitch-inner:after content: "Messenger"; color: var(--MasMalvenKontak-Messenger); font-size:14px; #MasMalvenKontak .Messenger:hover .onoffswitch-label .onoffswitch-inner margin-left: 0; #MasMalvenKontak .BBM .onoffswitch-label display: block; overflow: hidden; border: 2px solid var(--MasMalvenKontak-BBM); border-radius: 20px; #MasMalvenKontak .BBM .onoffswitch-inner:before content: var(--MasMalvenKontak-BBM-uname); background-color: var(--MasMalvenKontak-BBM); color: #FFFFFF; font-size:11px; #MasMalvenKontak .BBM .onoffswitch-inner:after content: "BBM"; color: var(--MasMalvenKontak-BBM); font-size:14px; #MasMalvenKontak .BBM:hover .onoffswitch-label .onoffswitch-inner margin-left: 0;
3. Save dengan klik tombol Tema.
Pengaturan
Format Tulisan
Untuk goresan pena yang dikirim harus sudah di encode. Seperti pola diatas %20 ialah tanda ganti untuk spasi. Berikut ini kode yang lain yang bisa dipakai:
Kamu juga bisa menggunakan format text bawaan pada WhatsApp. Misalnya:
- Silahkan kau ganti tulisan yang berwarna BIRU dengan nomor atau username masing-masing.
- Setelah itu ganti gesekan pena yang berwarna MERAH dengan goresan pena yang hendak terkirim ke WhatsApp dikala mengawali chat.
Format Tulisan
Untuk goresan pena yang dikirim harus sudah di encode. Seperti pola diatas %20 ialah tanda ganti untuk spasi. Berikut ini kode yang lain yang bisa dipakai:
- %0A untuk baris gres (enter atau line break).
- %25 untuk persen (%)
- %26 untuk dan (&)
- %3A untuk titik dua (:)
- %3B untuk titik koma (.)
- %3F untuk tanda tanya (?)
- Kode lainnya mampu kau lihat di w3schools.com
Kamu juga bisa menggunakan format text bawaan pada WhatsApp. Misalnya:
- *:*MasMalven* untuk membuat aksara tebal (bold) MasMalven
- _:_MasMalven_ untuk membuat huruf miring (italic) MasMalven
- : MasMalven untuk membuat karakter tercoret (strikethrough)
MasMalven - ' ' ':'''MasMalven''' untuk menciptakan karakter monospace
# HTML
Selanjutnya adalah instruksi HTML yang digunakan untuk mengundang atau menyebabkan tombol menuju chat pribadi ke WhatsApp dan aplikasi yang lain. Kamu bisa simpan isyarat ini dimana saja. Entah itu di widget, halaman post, atau halaman statis (page). Kamu juga tidak butuhuntuk mengubah apapun alasannya kau sudah mengaturnya pada CSS diatas.
#Demo/Preview
Kamu bisa melihatnya di codepen saya. Ngomong-ngomong, saya terinspirasi dari toggle ON / OFF yang bergeser dikala menciptakan tombol ini.
Kamu bisa melihatnya di codepen saya. Ngomong-ngomong, saya terinspirasi dari toggle ON / OFF yang bergeser dikala menciptakan tombol ini.