MASIGNALPHA101
6536304137350128937

Cara Membuat Tombol Chat Langsung Menuju Ke Berbagai App Messaging

Cara Membuat Tombol Chat Langsung Menuju Ke Berbagai App Messaging
10/27/2018

Baca Juga

Buat kalian para pemilik toko online yang sedang mencari cara bagaimana untuk mengoptimasi situs toko online, mungkin cara ini akan dapat membantu mengoptimasi fitur toko online kalian, yaitu Cara Membuat Tombol Chat Langsung Menuju Ke Berbagai App Messaging ( WhatsApp, Line, Telegram, Messenger, BBM ). 

Apakah fitur tersebut begitu penting? Yes, sangat penting banget menurut saya pribadi, terutama buat kalian yang memiliki toko online, sehingga customer akan dipermudah untuk melakukan komunikasi dengan seller/penjual. Akhirnya penjualan pun meningkat..😍

Apakah pantas dipasang di blog ( bukan situs toko online ) ? Yaa pantas pantas saja jika kalian bikin blog dengan tujuan mencari selembar dollar 😁 entah itu jual jasa, tapi jangan jual badan yaa 😹 

Dengan adanya Tombol Chat Langsung Menuju Ke Berbagai App Messaging ini, seseorang yang mengunjungi situs kita akan mudah menghubungi kita hanya dengan sekali klik saja. Artinya si pengunjung situs tidak perlu repot - repot save kontak atau menambahkan username terlebih dahulu, cukup dengan sekali klik maka si pengunjung situs akan dibawa ke link yang mengarah ke chat kita langsung. Simpel bukan ???

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: "6281500000xxx"; /* Nomor WhatsApp */
        --ignielKontak-WA-text: "Hai,%20saya%20menghubungi%20*melalui*%20halaman%20kontak%20di%20blog%20*agus-jenro.com*"; /* Pesan WhatsApp */
        --ignielKontak-Line-uname: "agusjenro"; /* Username Line */
        --ignielKontak-Tele-uname: "agusjenro"; /* Username Telegram */
        --ignielKontak-Messenger-uname: "agus.jenro"; /* Username Messenger */
        --ignielKontak-BBM-uname: "123xxxx"; /* 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. Simpan dulu dengan klik tombol Save theme.

PENGATURAN
  1. Ganti tulisan yang berwarna KUNING 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. *: *agus-jenro* untuk membuat huruf tebal (bold) agus-jenro
  2. _: _agus-jenro_ untuk membuat huruf miring (italic) agus-jenro
  3. ~: ~agus-jenro~ untuk membuat huruf tercoret (strikethrough) agus-jenro
  4. ```: ```agus-jenro``` untuk membuat huruf monospace agus-jenro

#HTML

Berikut adalah kode HTML yang digunakan untuk memanggil atau memunculkan tombol menuju chat langsung ke WhatsApp dan aplikasi lainnya. Simpan kode ini dimanapun kalian 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>

#Preview




Demikian Cara Membuat Tombol Chat Langsung Menuju Ke Berbagai App Messaging. 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.

Referensi : https://www.igniel.com/2017/12/tombol-chat-langsung-ke-aplikasi.html
Berkomentar adalah hak asasi bagi semua pengguna internet dan akan berdampak kembali kepada diri masing - masing, maka berkomentar dengan bahasa yang baik dan sopan adalah suatu hal positif dan sangat dianjurkan.