2. »
    3. »
    4. »

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

25 Komentar

  1. Fernand J.E08 December, 2017

    keren artikelnya mbak ..izin pakek

    ReplyDelete
  2. Iskandar Dzulkarnain10 December, 2017

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

    ReplyDelete
    Replies
    1. Igniel10 December, 2017

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

      Delete
  3. Aditya10 December, 2017

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

    ReplyDelete
    Replies
    1. Igniel10 December, 2017

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

      Delete
  4. Erd Dell11 December, 2017

    untuk wordpress ada gak mbak?

    ReplyDelete
    Replies
    1. Igniel11 December, 2017

      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. Candra Rudi11 December, 2017

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

    ReplyDelete
  6. Toko Grosir Kosmetik Loonashop22 December, 2017

    Kalau utk chat langsung via SMS gmn ya mbak?

    ReplyDelete
    Replies
    1. Igniel22 December, 2017

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

      Delete
  7. ARSY Tours & Travel05 January, 2018

    Untuk link WA gak work

    ReplyDelete
  8. ARSY Tours & Travel05 January, 2018

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

    ReplyDelete
    Replies
    1. aziz rabbani28 February, 2018

      semua versi firefox kaya nya sudah gk support whatsapp

      Delete
    2. igniel28 February, 2018

      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. Miras Tampan01 February, 2018

    update dong untuk instagram!

    ReplyDelete
  10. TechzBot19 February, 2018

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

    ReplyDelete
  11. Visit Purbalingga15 April, 2018

    Kerren dan sangat bermanfaat mbaa ,,, ijin make

    ReplyDelete
  12. John Holongky Sinaga13 June, 2018

    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. igniel13 June, 2018

      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. Arief06 July, 2018

    Teh.. ijin pasang. nuhun..

    ReplyDelete
  14. shefsetting11 August, 2018

    kalo disisipin fb pixel bisa ga mba igniel

    ReplyDelete
  15. Raka Aryanda13 October, 2018

    dibuat melayang kaya tombol back to top gimana mbak?

    ReplyDelete
  16. aziz rabbani30 November, 2018

    Teh, saya pasang di wordpress bisa dan tampil di semua halaman. cuman ketika diklik yang jalannya cuman di homepage. kalau di halaman produk (woocommerce) gak redirect ke pesannya

    ReplyDelete

Gunakan tag HTML <em> untuk menuliskan URL, potongan kode, atau hal penting lainnya.
Contoh: <em>isi pesan</em>