-->
Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogging

Cara Membuat Tombol Menuju Chat Langsung Ke Berbagai Messaging App Ala Masmalven

Tombol Menuju Chat Langsung Ke Berbagai Messaging App Ala Masmalven
Apa Itu Messaging App?

Messaging App adalah aplikasi untuk mengirimkan pesan antar pengguna. Contohnya WhatsApp, Line Telegram, Facebook Messanger, BBM, dan lain sebagainya. Kita sering menyebutnya dengan sebutan Aplikasi Chat.

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. Benar kan...

Entah itu menjual jasa maupun jual barang (online shop misalnya). Dengan adanya link chat langsung, pengunjung akan bisa langsung menghubungi kamu 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 chat 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:
  1. Nama
  2. Telepon
  3. Alamat
  4. Nama Barang
  5. Ukuran

Nah, toko online kamu 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 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 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.

1. Masuk ke Menu Tema, Lalu pilih Edit HTML.

2. Simpan kode berikut ini setelah atau di bawah <style>.

/* Tombol Menuju Chat Langsung ke Messaging App Ala MasMalven
Dilarang keras mengubah nama atribut yang ada di dalam kode 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*melalui*%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
  1. Silahkan kamu ganti tulisan yang berwarna BIRU dengan nomor atau username masing-masing.
  2. Setelah itu ganti tulisan yang berwarna MERAH dengan tulisan yang akan terkirim ke WhatsApp saat memulai chat.

 Format Tulisan
Untuk tulisan yang dikirim harus sudah di encode. Seperti contoh diatas %20 merupakan tanda ganti untuk spasi. Berikut ini kode lainnya yang bisa digunakan:
  1. %0A untuk baris baru (enter atau line break).
  2. %25 untuk persen (%)
  3. %26 untuk dan (&)
  4. %3A untuk titik dua (:)
  5. %3B untuk titik koma (.)
  6. %3F untuk tanda tanya (?)
  7. Kode lainnya bisa kamu lihat di w3schools.com

 Kamu juga bisa menggunakan format text bawaan pada WhatsApp. Misalnya:
  1. *:*MasMalven* untuk membuat huruf tebal (bold) MasMalven
  2. _:_MasMalven_ untuk membuat huruf miring (italic) MasMalven
  3. ~:~MasMalven~ untuk membuat huruf tercoret (strikethrough) MasMalven
  4. ' ' ':'''MasMalven''' untuk membuat huruf monospace

# HTML

Selanjutnya adalah kode HTML yang digunakan untuk memanggil atau memunculkan tombol menuju chat langsung ke WhatsApp dan aplikasi lainnya. Kamu bisa simpan kode ini dimana saja. Entah itu di widget, halaman post, atau halaman statis (page). Kamu juga tidak perlu untuk mengubah apapun karena kamu sudah mengaturnya pada CSS diatas.

 <div id="MasMalvenKontak">
    <div class="WA">
        <a href="javascript:void(0)" onclick="window.open('https://api.whatsapp.com/send?phone='+getComputedStyle(document.querySelector('#MasMalvenKontak .WA .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;','')+'&text='+getComputedStyle(document.querySelector('html'), ':root').getPropertyValue('--MasMalvenKontak-WA-text').replace('&quot;','').replace('&quot;',''))" 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('#MasMalvenKontak .Line .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" 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('#MasMalvenKontak .Tele .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" 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('#MasMalvenKontak .Messenger .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" 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('#MasMalvenKontak .BBM .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" 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

Kamu bisa melihatnya di codepen saya. Ngomong-ngomong, saya terinspirasi dari toggle ON / OFF yang bergeser ketika membuat tombol ini.

Itulah cara membuat link chat langsung menuju Messaging App ala Mas Malven. Kamu bebas untuk memakainya, tapi dengan catatan "TIDAK MENGUBAH APAPUN" kecuali diminta untuk diubah sesuai tutorial. Semoga bermanfaat dan terima kasih atas kunjungan Anda.
... ...