Membuat HTML link langsung menuju SMS dan Telepon

Diposkan: 15 Februari, 2014
Membuat HTML link ternyata bervariasi, misalnya popup, link kirim email, terbuka di laman baru dan lain lain. Seiring  dengan perkembangan jaman website/ blog banyak juga yang mengakses dari perangkat telepon genggam.


Namun terkadang sesuatu yang kita tidak membutuhkan suatu saat kita mungkin memerlukan, misalnya kita ingin membuat link kirim menuju SMS (Short Message Service Bahasa indonesia Layanan pesan singkat) ataupun langsung menuju ke telepon( call ).

Sederhana cara membuat HTML link SMS atau Call me dipasang di blog/web, yang apabila di klik oleh seorang user tersebut mengakses dari perangkat selular/ telepon genggam(handphone) langsung menuju kirim SMS dan Telepon.
  • Membuat Html link kirim SMS
HTML Link SMS di tulis awal a href sms:

<a href="sms:NO telp handphone">Link</a>

<a href="sms:081......">Link sms NO hp terisi</a>

  • Cara membuat HML link kirim SMS NO handphone dan body Terisi pesan
<a href="sms:081.......?&body=Pesan di tubuh body disini">Link menuju sms plus no HP dan body terisi</a>

  • Membuat HML link menuju SMS hanya body berisi pesan
<a href="sms:?&body=Pesan di tubuh body disini">Link menuju sms body terisi</a>

Ingat ketika body berisi pesan tentu saja pesan SMS memiliki batasan panjang pesan yaitu kurang lebih 160 karakter.

  • Cara membuat Html link Langsung menuju telepon(Call me)
Ternyata membuat  link menuju telepon ini tidak terlalu sulit yang seperti dibayangkan, dan penulisannya awal a href adalah tel://

<a href="tel://NO telepon atau NO handphone">Link telepon</a>

<a href="tel://628......">Link telepon(call me)</a>

Perlu diketahui bahwa Link kirim SMS atau telepon tersebut tidak bekerja apabila seorang mengklik dari peramban komputer ataupun laptop. Sehingga kita perlu memanipulasi dengan sedikit sentuhan lagi menggunakan javascript supaya tidak tampil di peramban tersebut, dan hanya tampil di perangkat telepon genggam. Yaitu dengan membuatkan javascript detect User agent device sederhana.

  • Manipulasi dengan javascript User agent device sederhana

<script type='text/javascript'>
if( /Opera Mini|BlackBerry|Android|webOS|iPhone|iPad|IEMobile/i.test(navigator.userAgent) ) {
 // Jika agennya di atas tampilkan ini..(code)
} else {
 // Kecuali agen di atas tampilkan ini..(code)
}
</script>

Contoh penulisan (code):

document.write('Your HTML link SMS or Telepon');

Di bawah ini contoh demo penerapan




Harap hati hati apabila mencantumkan NO telp atau Handphone, dan pikirkan masak masak sebelum memasangnya, Jangan memasang NO telp/Handphone orang, badan usaha atau Perusahaan tanpa adanya persetujuan. Agar tidak terjadi hal hal yang tidak di inginkan (Misalnya spam, penipuan dll..) ...!!!!!!!!!!

61 komentar

  1. Jika agennya di atas tampilkan ini..(code)
    Kecuali agen di atas tampilkan ini..(code)
    .... ...... ...

    Pak maksud nya yang itu apa. apa kita ganti teks nya atau gina
    trimakasih

    BalasHapus
    Balasan
    1. Maksudnya begini pak ..

      // jika ini Mobile browser atau system Operasi handphone Agennya
      if( /Browser Handphone|atau OS Handphone... /i.test(navigator.userAgent) ) {
      // Target yang ada linknya diletakkan disini
      document.write('<a href="sms:081...">Link</a>');
      } else {
      // Tidak dikasih link..
      document.write('081...');
      }

      Sedangkan targetnya bisa token sistem operasi HP (navigator.userAgent).
      --> http://id.wikipedia.org/wiki/Sistem_operasi_telepon_genggam
      Atau Browser HP
      --> http://en.wikipedia.org/wiki/Mobile_browser

      Bila tidak di target link sms atau telp mungkin di browser desktop, PC, notebook/netbook tidak berfungsi semestinya.

      Mudahan bisa membantu.

      Hapus
    2. Terimakasih infonya...

      Sangat bermanfaat...

      Salam kenal semuanya...

      Andri Wiyasa

      Hapus
  2. Tutorialnya sangat membantu orang untuk tidak menulis atau copy paste dari web ke nomor telpon... Terimakasih Bro

    BalasHapus
  3. Membuat paragraf baru pada body SMS nya gimana gan?..

    BalasHapus
    Balasan
    1. Coba pakai seperti : [%0A ], jika untuk link email bisa membuat paragraf baru, tapi untuk link sms paragraf baru pada isi pesan body, belum pernah mencoba.

      [a href="sm.......?&body=Paragraf-awal%0AParagraf-baru"] teks linknya [/a]

      Silahkan dicoba dulu, siapa tahu bisa...

      Hapus
  4. malam gan, jika scrip tsb di pasang apakah untuk pagerank smarfhone saja ???? saya coba tetapi belum timbul juga ya di HP Androidnya kenapa ya, trims ( Bls )

    BalasHapus
    Balasan
    1. Maaf kurang tahu maksudnya "pagerank smarfhone saja" itu apa maksudnya, kurang paham ??, Kalau tidak tampil mungkin mobile browsernya tidak mendukung, atau penulisannya kurang tepat, bisa juga tidak ditarget dan lain-lain. Dan di atas hanya sekedar contoh saja, JS nya bisa dikembangkan sendiri.

      Hapus
  5. bingung gan,,,maklum baru pemula

    BalasHapus
  6. thanks gan sangat membantu walau maih bingung kunjungi juga he..he maklum bajar http://lembehtrav.blogspot.com

    BalasHapus
  7. untuk whatsapp atau bbm bisa ga yah kira2 master?

    BalasHapus
  8. fathur rozaq & @Toko Massadepan

    Bisa saja.., [a href="whatsapp://send?text=teks atau URLnya disini"] link teksnya atau ikon [/a] (seperti situs web yang memasang).

    Cuma yang jadi kendala itu, ketika handphone dan smartphone-nya seseorang tersebut tidak menginstal aplikasi yang dimaksud(whatsapp) atau browsernya tidak menyediakan link API...?, terkadang itu menjadi kendala. Yang membuat browser aja bingung.., mau dikemanakan linknya itu ketika di HP-nya tidak tersedia aplikasi yang dimaksud, lebih-lebih browser(XHTML). Apa gak malah lebih pintar mereka yang membuat browser mengkondisikannya, dengan fitur berbagi yang disediakan pada masing-masing browser...

    Beda lhoo sama aplikasi SMS & Telepon, itu bawaan handphone dan smartphone, selalu tersedia tergantung fitur & browsernya. Bahkan handphone(HP) yang tidak ada fitur browsernya, tetap ada fitur untuk SMS & telpon.

    Kalau sarankan saya ketika membuat link berbagi ke jejaring-sosial itu adalah:
    link URL yang mengarah ke situs WEB, bukan link yang mengarah ke APLIKASI, kecuali terpaksa atau pandai mengkondisikan...

    BalasHapus
  9. Gan, maksudnya "Link menuju sms body terisi" itu gimana ya? Linknya dapat dari mana?
    Makasih

    BalasHapus
    Balasan
    1. Linknya ya dibikin atau di isi sendiri gitu...

      Hapus
    2. Mas misal HTML link-nya saya taruh di www.websiteanda.com/klik-to-sms. Kalo di klik dari Smartphone langsung ngebuka SMS. Sementara posisi di browser masih tetep di www.websiteanda.com/klik-to-sms.
      Kalo biar di klik dari Smartphone langsung ngebuka SMS. Tapi posisi di browser juga pindah ke www.websiteanda.com/terima-kasih-telah-menghubungi-kami. Bisa gak mas? Kalo bisa caranya gimana yah?
      Makasih.

      Hapus
    3. Memakai javascript event(kejadian), kalau yang kamu maksud seperti itu teknik redirect url dari halaman 1 - ke halaman 2. Banyak-banyaki halaman kalau menurutku, dan hanya sekedar ingin menyajikan tulisan "Terima kasih..". Dibawah ini javascript event sederhana dan memuat ulang lokasi saat ini ditambah ucapan terima kasih bisa dicoba dan disesuaikan kondisinya sendiri.

      <div id="ucapan_terimakasih">
      // No 1...
      <button onclick="sms_dan_terimakasih();" type="button">Tombol teks sms</button>
      // No 2...
      <a href="javascript:;" onclick="window.open('/putar-ulang-lokasi-PATHNAME-saat-ini.html?tambah-ucapan=terima-kasih-telah-menghubungi-kami&str=abc_diacak2_stringnya-biar-orang-lain_jarang-tahu', '_self'); return false;" target="_self">Link teks sms</a>
      </div>
      <script>
      // No 1...
      function sms_dan_terimakasih(){
      var trim=document.getElementById("ucapan_terimakasih");
      trim.innerHTML="Terima kasih atau apalah....!!";
      trim.setAttribute("style","font-size:50px;padding:20px;color:red;");
      window.location.replace("sms:?body=Isi ... terimakasih");
      }
      // No 2...
      if(-1!=window.location.search.indexOf("tambah-ucapan=terima-kasih-telah-menghubungi-kami")) {
      var trims=document.getElementById("ucapan_terimakasih");
      trims.innerHTML="Terima kasih telah menghubungi....!!";
      trims.setAttribute("style","font-size:50px;padding:20px;color:blue;");
      window.location.replace("sms:?body=Isi dan terimakasih..!");
      }
      </script>

      CATATAN:
      Jika dicoba di komputer, protokol sms: diganti dengan mailto: atau protokol lainnya, agar bisa melihat hasil dan cara kerjanya seperti dibawah ini:
      window.location.replace("mailto:?body=Isi dan terimakasih..!");

      Hapus
  10. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  11. Gan kalau ingin menuju browser seperti "chrome" bisa ga gan??

    BalasHapus
  12. bagus gan tapi bakal lebih bagus lagi kalau diberikan contoh. ,,, maklum saya masih pemula :)

    BalasHapus
  13. saya nyoba pake <a href="smsto:NMR TELPON”>NMR TLPON
    </a>. Jadi banyak pilihan ... gak cuman sms tp ada hangout and messenger. padahal salah ketik ... kirain smsnya sama kayak mailto:

    BalasHapus
  14. trus saya nyoba biar ke link WA kok gak bisa ya ???
    html nya gak diterima .. begitu save di widget bisa tp gak muncul, malah pas dibuka lagi ilang kode html buat WA nya.
    any advice ????

    BalasHapus
    Balasan
    1. Aplikasi sms ya banyak.., apalagi sudah masuk ranah handphone, gak cuma aplikasi sms bawaan HP.
      Hemmm... kurang paham apa itu WA ?

      Hapus
  15. Pak Masang kode tersebut dimana..di wordpress>>addnews bagian text atau visual ?

    BalasHapus
    Balasan
    1. Waduhhh... kurang tau kalau di wordpress, maklum gak pernah buat situs/blog di wordpress.

      Di mode HTML kalau tesedia, bukan visual (mungkin.......), yang ada tag-tag HTMLnya kalau sudah menulis seperti (<div...>tulisan</div><span>tulisan</span><i>tulisan</i>).

      Hapus
  16. Aduh bingung dimana taruh kodenya please bantuannya suhu

    BalasHapus
  17. saya biasanya pasang link dengan kode HTML tapi ada beberapa webmengharuskan kode < ..code .. >.... mungkin bisa di bantu gan....terima kasih....

    BalasHapus
  18. Kak msh bingung nihh kak gmn yah caranya? Soalx mau taru di page fb di tombol Humbungi kami. Pengennya biar dia langsung ke sms kak. Mohon bantuannya.. terimakasih

    BalasHapus
  19. bagus sekali sangat membantu.. trims

    BalasHapus
  20. Maaf ya,, ini gunanya utk apa gan, utk sadap sms orng ya,,?

    BalasHapus
  21. Gan saya kok ga bisa ya, maksud link telpon itu apa gan ya, link telponnya diisi apa gan??
    bingung nie

    BalasHapus
  22. kurang jelas mas ane kurang paham, tolong lebih rinci khususnya agar berfungsi bila ditlp saat menggunakan pc atau laptop, email saya sangp864@gmail.com. mksih mas

    BalasHapus
  23. nyimak dulu sepertinya ajib..thanks ilmunya

    BalasHapus
  24. Kalau ingin membuat link whatsapp gmn?

    BalasHapus
  25. Mantap nih tutorialnya, kalo langsung linknya langsung nelpon bisa gan.?

    BalasHapus
  26. kalau bodynya bisa input sendiri gimana mas.?

    BalasHapus
  27. kepake bgt gan, saya pakai juga link ke chat wa
    saya implementasi di web saya.
    www.mandirijayabeton.co.id

    BalasHapus
  28. Gan ko saya tidak bisa ya pasang di wordpress tolong bantuannya

    BalasHapus
  29. Gan... bisa ga.. membuat formulir.. kmudian yg jika seseorang mengisi dan mengirimnya.. isi formulir langsung masuk ke sms atau whatsapp

    Andez
    www.bpkbjaminan.com

    BalasHapus
  30. gan bisa ga saat diklik, nomor yg kita isi link teleponnya tidak tampil dilayar android tetapi tetap bisa melakukan panggilan.?

    BalasHapus
  31. Berfungsi mas... buat https://manjakani.net

    BalasHapus
  32. Terima kasih...
    Sangat bermanfaat...

    BalasHapus
  33. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  34. kalau untuk pasang di blog komentar link telepon atau sms gimana yah gan caranya

    BalasHapus
  35. trims gan....sangat bermanfaat, langsung praktek dan berhasil....kkwkw

    BalasHapus
  36. Boss kalau bikin link bisa ga link berpungsi otomatis dgn panggilan terhubung dgn kita

    BalasHapus
  37. ketika bermain dalam link http://188.114.230.41 dipastikan harus bermain dalam pokerqq dimana anda bisa mendapatkan kemenangan ketika bermain.

    BalasHapus
  38. NAGAQQ Yang Merupakan Agen Bandarq, Domino 99, Dan Bandar Poker Online Terpercaya di asia hadir untuk anda semua dengan permainan permainan menarik dan bonus menarik untuk anda semua

    Bonus yang diberikan NagaQQ :
    * Bonus rollingan 0.5%,setiap senin di bagikannya
    * Bonus Refferal 10% + 10%,seumur hidup
    * Bonus Jackpot, yang dapat anda dapatkan dengan mudah
    * Minimal Depo 15.000
    * Minimal WD 20.000
    * Deposit via Pulsa TELKOMSEL
    * 6 JENIS BANK ( BCA , BNI, BRI , MANDIRI , CIMB , DANAMON )

    Memegang Gelar atau title sebagai AGEN POKER ONLINE Terbaik di masanya

    Games Yang di Hadirkan NagaQQ :
    * Poker Online
    * BandarQ
    * Domino99
    * Bandar Poker
    * Bandar66
    * Sakong
    * Capsa Susun
    * AduQ
    * Perang Bacarrat (New Game)


    Info Lebih lanjut Kunjungi :
    Website : NAGAQQ
    Facebook : NagaQQ official
    WHATSAPP : +855977509035
    Line : Cs_nagaQQ
    TELEGRAM :+855967014811

    NagaQQ
    NagaQQ
    NagaQQ
    NagaQQ

    BalasHapus
  39. ketika bermain dalam link https://partaiqq.mobi anda harus bermain dalam permainan situs poker online dimana ini akan menjadi awal yang luar biasa bagi anda ketika bermain.

    BalasHapus
  40. Kabar baik!!!

    Nama saya teddy dan saya dari Jawa Tengah Indonesia dan alamat saya KP. KADU RT 10 RW 04 KEL SUKAMULYA KEC CIKUPA KAB TANGERANG BANTEN, Saya baru saja menerima pinjaman Rp 3 Miliar (Small Business Admintration (SBA) dari Perusahaan Pinjaman Dangote setelah membaca artikel dari Lady Jane Alice (ladyjanealice@gmail.com) dan Mahammad Ismali (mahammadismali234@gmail.com) tentang cara mendapatkan
    pinjaman dari Perusahaan Pinjaman Dangote dengan tingkat bunga 2% tanpa lisensi atau biaya gurantor, saya baru saja melamar melalui email dan ikhlas selama prosesnya, awalnya saya takut mengira itu seperti penipuan perusahaan peminjaman sebelumnya, tetapi yang mengejutkan saya ini nyata bahwa saya juga berjanji akan memberi tahu lebih banyak orang, percayalah itu nyata 100%, pelamar lain dari negara lain juga dapat bersaksi.

    Email Perusahaan Pinjaman Dangote Melalui email: Dangotegrouploandepartment@gmail.com

    Email saya: teddydouble334@yahoo.com

    BalasHapus