Home / Blogger / CSS / Messaging

Tombol Menuju Chat Langsung Ke Berbagai Messaging App Ala Igniel


Tombol Menuju Chat Langsung Ke Berbagai Messaging App Ala Igniel

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:
  1. Nama Barang

  2. Ukuran

  3. Nama

  4. Telepon

  5. Alamat
Hayo, toko online kamu pun kaya gitu kan? Iya, soalnya ini udah jadi standar semua toko online agar memudahkan dalam mengelola database pemesanannya. Kadang suka gregetan nggak sih kalau ada calon pembeli yang nggak nulis formatnya dengan benar? Sepele memang. Tapi buat kita penting, biar datanya nggak semrawut.

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.
  1. Masuk ke menu Theme, lalu pilih Edit HTML.

  2. 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: 0%; 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;
    }

  3. Save dulu dengan klik tombol Save theme.

PENGATURAN
  1. Ganti tulisan yang berwarna BIRU dengan nomor / username masing-masing.

  2. 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:
  1. %0A untuk baris baru (enter / line break).

  2. %25 untuk persen (%)

  3. %26 untuk dan (&)

  4. %3A untuk titik dua (:)

  5. %3B untuk titk koma.

  6. %3F untuk tanda tanya (?)

  7. Kode lainnya bisa kamu lihat di w3schools.com

Selain itu, kamu juga bisa menggunakan format text bawaan pada WhatsApp. Contohnya:
  1. *: *igniel* untuk membuat huruf tebal (bold) igniel

  2. _: _igniel_ untuk membuat huruf miring (italic) igniel

  3. ~: ~igniel~ untuk membuat huruf tercoret (strikethrough) igniel

  4. ```: ```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('&quot;','').replace('&quot;','')+'&text='+getComputedStyle(document.querySelector('html'), ':root').getPropertyValue('--ignielKontak-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('#ignielKontak .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('#ignielKontak .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('#ignielKontak .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('#ignielKontak .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

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.