Hyperlink Dan Tombol Chat SMS (Short Message Service)

Hyperlink sms atau disebut juga anchor link sms adalah link yang mengarah ke layanan SMS (Short Message Service) ketika di klik. Secara umum hyperlink sms difungsikan untuk membuat pintasan layanan chat sms di halaman web misalnya tombol chat sms

Meskipun di era smartphone, sms cenderung jarang digunakan tidak ada salahnya jika membuat layanan chat sms di website / blog dengan menggunakan hyperlink / anchor link khususnya website jual beli dan web penyedia jasa. Karena semakin banyak cara terhubung dengan konsumen semakin besar pula peluang.
SMS Chat Button

Format dasar hyperlink sms di html

<a href="sms:081261043687">Chat SMS</a>
Output:
Chat SMS
[ads id="ads1"] Ketika link sms di klik melalui hp atau smartphone maka link akan langsung menuju ke sms dan menginput nomor tujuan secara otomatis, silahkan di uji coba untuk membuktikan.

Lebih dari itu kamu juga bisa menambahkan auto input text message pada link sms dengan menambahkan body message pada link sms dengan format link sms sebagai berikut:
<a href="sms:081261043687?&body=Hallo, you can help me to">Chat SMS</a>
Output: Dengan demikian teks pada link sms akan di input secara otomatis ke body message atau kotak pesan dan nomor hp pada link sms akan di input ke kolom nomor tujuan.

Selanjutnya agar tombol pintasan chat sms terlihat lebih menarik dan menonjol kita dapat menambahkan icon sms dan style pada tombol chat sms, seperti yang saya contohkan dibawah ini:

Kode HTML Tombol Chat Via SMS + SVG Icon

<button class="chat-sms">
 <a href="sms:081261043687?&body=Hallo, you can help me to" title="Chat SMS">
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512">
   <path d="M464,48H48A16,16,0,0,0,32,64V352a16,16,0,0,0,16,16h80V480h8L248,368H464a16,16,0,0,0,16-16V64A16,16,0,0,0,464,48ZM184,272H144V232h40Zm96,0H240V232h40Zm96,0H336V232h40Z"/>
  </svg>
Chat SMS
 </a>
</button>

Kode CSS Tombol Chat SMS

<style type="text/css">
button.chat-sms {
  display: flex;
  width: 160px;
  margin: 10px auto;
  background-color: #3367d6;
  border: 1px solid #3367d6;
  border-radius: 4px;
}
button.chat-sms a svg {
  width: 40px;
  height: 40px;
  padding: 2px;
  fill: #fff;
  margin-right: 10px;
}
button.chat-sms a {
  padding: 0;
  display: flex;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  align-items: center;
}
</style>
Demo Tombol Chat SMS Nah, keren kan! Sekarang cobalah untuk membuat pintasan atau tombol chat via sms dengan menggunakan hyperlink sms diatas dan kreasikan dengan ide anda sendiri, atau jika ingin menggunakan tombol chat sms di atas maka admin persilahkan dengan segala hormat, tetapi jangan lupa untuk mengganti nomor hp yang ada pada link sms di atas dengan nomor hp anda sendiri.
Lebih baru Lebih lama
Close