Tip Singkat Mobile Web: Tautan Nomor Telepon

Tip singkat ini mendemonstrasikan bagaimana membuat tautan nomor telepon dengan HTML. Teknik di dalam tip ini berkerja baik pada perangkat Android dan iPhone dan dapat meningkatkan pengalaman pengunjung situs mobile web.

Tautan Telepon Default

Secara default pada iOS dan Android, browser perangkat akan "secara ajaib" membuat tautan pada teks yang diterjemahkan sebagai nomor telepon. Ketika pengguna menekan salah satu tautan berikut, aplikasi telepon perangkat akan dijalankan. Pola nomor telepon persis akan secara otomatis diubah menjadi tautan bervarasi antara platform, namun saya telah membuat daftar beberapa pola yang telah berhasil saya coba:

• 555-5555 (Khusus iPhone)
• (555) 555-5555 (Android + iPhone)
• +1 (555) 555-5555 (Khusus iPhone)
• 555 5555 (Khusus iPhone)
• 555 555 5555 (Android + iPhone)
• +1 555 555 5555 (Khusus iPhone)
• 555.5555 (Khusus iPhone)
• 555.555.5555 (Android + iPhone)
• +1 555.555.5555 (Khusus iPhone)

Jika situs atau aplikasimu menggunakan contoh format antar perangkat di atas, penggunamu hendaknya dapat membuat panggilan secara cepat hanya dengan menekan teks.

Membuat Tautan Nomor Telepon

Resep membuat sendiri tautan nomor teleponmu itu sederhana. Alih-alih menggunakan tautan normal berdasarkan protokol HTTP/S atau sistem file, kamu dapat menggunakan protokol "tel:". Ini berkerja seperti halnya tautan normal, hanya saja alih-alih atribut href mengacu pada URL atau file, kamu menambahkan entah "tel:" atau "tel://" ke sebuah nomor telepon.

Periksa contoh di atas untuk melihat aksinya:

<!-- Embedded within normal page text -->
<p>If you'd like to talk, <a href="tel:5555555">Call Me!</a></p>

<!-- Linking a custom image -->
<a href="tel://555-5555"><img src="phone.png" alt="Call Now!" /></a>

<!-- Cross-platform compatible (Android + iPhone) -->
<a href="tel://1-555-555-5555">+1 (555) 555-5555</a>

CATATAN: Kode di atas hendaklah dicoba pada sebuah perangkat fisik. Itu tidak akan berkerja pada iOS SDK emulator.

Contoh terakhir snippet layak dicatat secara khusus. Banyak pengembang web tidak memiliki kemewahan melaksanakan pengujian perangkat mobile secara ekstensif baik pada iPhone dan Android, sehingga akan mudah melewatkan fakta bahwa beberapa format telepon pada daftar awal tips ini tidak akan dikenali secara otomatis pada semua perangkat.

Karena format telepon yang dikenali mungkin bervariasi antara perangkat, saya menyarankan untuk selalu membungkus nomor teleponmu dalam sebuah tautan dengan awalan "tel://". Tidak hanya melakukan itu akan memastikan bahwa jumlah terbesar perangkat akan menautkan ke aplikasi telepon, namun ini juga tampak menjadi pendekatan yang lebih eksplisit, dapat diakses, dan semantik untuk menangani tautan telepon.

Tentu saja, jika konten yang sedang kamu buat mungkin dilihat pada sebuah perangkat tanpa telepon, kamu hendaknya menggunakan entah bahasa dari sisi server untuk hanya menambahkan tautan "tel:" jika perlu, atau kamu hendaklah memeriksa jenis perangkat dengan JavaScript dan menambahkan tautan ke halaman secara progresif jika berlaku.

Menonaktifkan Deteksi Tautan

Baik pada Android dan iPhone, kamu dapat secara mudah menonaktifkan tautan nomor telepon dengan meta tag berikut:

<meta name="format-detection" content="telephone=no" />

Meta tag ini akan menonaktifkan tautan otomatis nomor telepon sementara tetap membolehkanmu secara manual membuat tautan nomor telepon menggunakan metode "tel://" yang dijelaskan di atas.