2. »
    3. »

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: 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;
}
  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.
Baca Juga

KLIK

DONASI VIA PAYPAL

Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

24 Komentar

  1. keren artikelnya mbak ..izin pakek

    ReplyDelete

  2. lama ga kunjungan ke blog ini
    udah jadi blog tutorial yah, dulu kan curhat2 geje, hehe

    ReplyDelete
    Replies

    1. Iya nih udah pindah haluan. Sekarang curhatnya dalem hati aja :^)

      Delete

  3. mba koq gak work di blogger, Kode Cssnya udah di simpen di bawah style, Atau ada yang salah ??

    ReplyDelete
    Replies

    1. Apa template kamu punya beberapa tag kondisional? Kalo iya, cek lagi, mungkin kamu simpen di tag kondisional yang bukan halaman postingan.

      Delete

  4. untuk wordpress ada gak mbak?

    ReplyDelete
    Replies

    1. Semua platform bisa. Bebas kok. Soalnya cuma nambahin CSS dan HTML. Bedanya cuma di tempat penyimpanan kodenya.

      Kalo 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).

      Delete

  5. Keren banget mbak , di candrarudi.com memakai AMP apakah script ini support untuk AMP mbak ?

    ReplyDelete

  6. Kalau utk chat langsung via SMS gmn ya mbak?

    ReplyDelete
    Replies

    1. Oh iya kelupaan haha. Nanti diupdate ya. Besok bisa mampir kesini lagi buat liat hasilnya :)

      Delete

  8. Maksudnya link wa dibuka lewat firefox gak bisa kebuka. Tetapi kalau lewat google chrome wrok linknya. itu kenapa yah mb ?

    ReplyDelete
    Replies

    1. semua versi firefox kaya nya sudah gk support whatsapp

      Delete

    2. Iya Mozilla Firefox nggak bisa. Tombol ini lebih diutamakan buat pengguna mobile, yang buka web lewat smartphone. Kalau dari smartphone bakal langsung lari ke aplikasi.

      Delete

  9. update dong untuk instagram!

    ReplyDelete

  10. Hello Igniel.... this is aweasome, please what about message via Sms can you include it also?

    ReplyDelete

  11. Kerren dan sangat bermanfaat mbaa ,,, ijin make

    ReplyDelete

  12. Karena cuma ditaruh di halaman statis, css nya gak usah dimasukin di template bisa gak? Jadi ditumpuk aja semua di halaman statisnya.

    ReplyDelete
    Replies

    1. Sangat bisa.

      Tapi 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>

      Delete

  13. Teh.. ijin pasang. nuhun..

    ReplyDelete

  14. kalo disisipin fb pixel bisa ga mba igniel

    ReplyDelete

  15. dibuat melayang kaya tombol back to top gimana mbak?

    ReplyDelete

Centang kotak "NOTIFY ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.