Link Telephone (HTML) + SVG Icon

Link telepon atau tel:<nomor telepon> adalah url yang menuju ke panggilan telepon. Link tel: disebut juga dengan istilah navigator.registerprotocolhandler() yang memungkinkan website/blog untuk membuat navigasi yang langsung menuju ke panggilan telepon di perangkat pengguna.

Link tel:<nomor telepon/hp> sangat cocok diterapkan di website/blog berbasiskan layanan publik/jasa karena navigasi link tel: mempermudah pengguna terhubung dengan admin web. Dengan sekali klik navigasi link tel: akan langsung memuat dan nomor telepon/hp di panggilan telepon di perangkat pengguna baik itu perangkat mobile maupun Dekstop/PC.

Cara membuat navigasi panggilan di website menggunakan link tel:

[ads id="ads1"] Untuk membuat navigasi link tel: tag yang kita gunakan masih dengan tag yang sering kita gunakan untuk membuat sebuah link yaitu tag <a>, hanya saja value pada attribute href diisi dengan tel:<nomor telepon>, contoh:

<a href="tel:+6281277770000">Call Me</a>

Output:

Aku adalah link telepon, klik "Call Me" untuk terhubung dengan admin web.
Call Me

Agar lebih menarik dan memiliki aksesibilitas tinggi kita dapat menambahkan aria-label atau attribute title dan icon telpon. Disini ikon telepon/icon call yang saya gunakan adalah svg icon karena performa svg icon sangat baik di halaman web, berikut selengkapnya;

HTML

<div class="link-telp">
  <a href="tel:+6281277770000" title="Call Me"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>Call Me</a>
</div>

CSS

<style type="text/css">
.link-telp{
display:flex;
margin:10px 0;
}
.link-telp a svg{
width:20px;
height:20px;
fill:#fc4f08;
border:1px solid #fc4f08;
border-radius:4px;
padding:2px;
margin-right:10px;
}
.link-telp a{
padding:0;
display:flex;
color:#fc4f08;
font-size:20px;
font-weight:bold;
align-items:center;
}
</style>

Output:

Aku adalah link telepon dengan ikon svg, klik "Call Me" untuk terhubung dengan admin web ini.

Call Me

Atau jika kamu ingin menempatkan link tel: pada bar menu navigasi, silahkan lihat contoh penerapannya pada cuplikan kode dibawah ini:

<nav class="demo-menu" id="demo-menu">
  <ul>
   <li><a href="#" title="About Us">About Us</a></li>
   <li><a href="#" title="Contact Us">Contact Us</a></li>
   <li><a href="tel:+6281277770000" title="Panggil">Call Me</a></li>
  </ul>
</nav>

Baca Juga: Mailto Link HTML

Demikian saja artikel link telp (html) + svg icon, semoga bermanfaat untuk teman-teman blogger, jangan sungkan untuk menghubungi admin melalui layanan kontak admin jika ada kendala terkait link tel: ini. Selamat mencoba dan sampai jumpa kembali.