• Beranda
  • Artikel
  • Tema
  • Tautan Telepon: Cara Menambahkan Tautan "Dapat Dipanggil" & CTA ke Situs Web Anda

Tautan Telepon: Cara Menambahkan Tautan "Dapat Dipanggil" & CTA ke Situs Web Anda

Diterbitkan: 2019-01-14

Banyak situs web bisnis menunjukkan nomor telepon sehingga pelanggan mereka dapat menghubungi mereka. Ketika desktop adalah cara paling populer untuk mengakses situs, pengguna akan mencatat nomor telepon dan panggilan dari perangkat terpisah. Tentu saja, sebagian besar pengguna sekarang mengakses situs web dan melakukan panggilan telepon dari perangkat yang sama. Ini membuka peluang untuk menambahkan tautan panggilan – membuat nomor telepon HTML yang dapat diklik.

Dalam artikel ini, kita akan melihat cara menambahkan tautan panggilan serta beberapa tautan lain yang dapat diklik seperti email dan CTA lainnya.

Berlangganan Saluran Youtube Kami

Cara Kerja Tautan Panggilan

Membuat nomor telepon dapat diklik mudah dilakukan dengan HTML. HTML5 menyertakan protokol seperti tel: dan mailto: yang dapat digunakan browser. Peramban merespons secara berbeda terhadap protokol ini. Beberapa akan meluncurkan aplikasi telepon dan menambahkan nomor ke layar sambil menunggu Anda mengklik tombol Panggil. Yang lain akan menelepon, sementara yang lain akan bertanya apakah tidak apa-apa dulu.

Karena ini HTML, Anda dapat menambahkan protokol di mana saja di situs Anda termasuk header, footer, sidebars, di dalam konten posting dan halaman, dan di dalam widget.

Menambahkan Tautan Panggilan Nomor Telepon HTML ke Situs Web Anda

Tambahkan kode sebagai teks ke lokasi yang Anda inginkan untuk memunculkan tautan: 

<a href="tel:123-456-7890">123-456-7890</a>

HRef=tel: membuat tautan panggilan. Ini memberitahu browser cara menggunakan nomor tersebut.

“Tel: 123-456-7890” membuat nomor telepon HTML. Nomor di dalam tanda kutip adalah nomor yang akan dihubungi.

Nomor di dalam tag >< adalah bagian visual dan dapat berupa apa saja yang Anda inginkan termasuk nomor telepon, sebaris teks seperti “Klik untuk Menelepon” atau “Hubungi Sekarang”, atau ajakan bertindak lainnya yang Anda mau. Itu harus deskriptif tentang apa yang akan terjadi ketika mereka mengklik.

Menampilkan pesan alih-alih nomor akan terlihat seperti ini: 

<a href="tel:123-456-7890">CLICK TO CALL</a>

Pengunjung Anda akan melihat teks tetapi ketika mereka mengkliknya, mereka melihat layar panggilan telepon mereka dengan nomor Anda yang siap untuk mereka klik tombol panggil.

Menambahkan Ekstensi

Beberapa nomor telepon memiliki ekstensi. Anda dapat menambahkan kode yang akan membuat jeda singkat sebelum menghubungi nomor ekstensi. Menambahkan P di depan ekstensi akan menambah jeda satu detik. Kodenya mungkin terlihat seperti ini: 

<a href="tel:123-456-7890p123">CLICK TO CALL</a>

Ini memanggil nomor, menunggu satu detik, dan kemudian memanggil ekstensi.

Anda dapat membuatnya menunggu nada panggil dengan menggunakan w alih-alih p .

Menambahkan Kode Negara

Kode negara dapat ditambahkan dengan menyertakan tanda + bersama dengan kode negara Anda sebelum nomor telepon. Contoh mungkin terlihat seperti ini: 

<a href="tel:+1123-456-7890">123-456-7890</a>

Menambahkan Microdata untuk SEO Lokal

Salah satu kemudahan favorit saya membawa smartphone adalah ketika saya mencari bisnis lokal dan hasilnya di Google memberi saya nomor telepon yang dapat diklik. Saya dapat mengklik nomor tersebut untuk melakukan panggilan tanpa harus menuliskannya atau mencoba mengingatnya. Fitur ini sekarang menjadi kebutuhan. Untungnya, Anda dapat menambahkannya ke situs web Anda sehingga Google dapat memberikan nomor telepon Anda dalam pencarian lokal.

Ini dilakukan dengan mikrodata. Microdata memberi tahu mesin pencari bahwa nomor tersebut adalah nomor telepon sehingga ditampilkan sebagai tautan panggilan yang dapat diklik. Anda dapat membuat ini dengan memperkaya markup dengan beberapa tag untuk pencarian lokal.

Misalnya, kodenya mungkin terlihat seperti ini: 

<div itemscope itemtype="https://schema.org/LocalBusiness">
<h1 itemprop="name">WordPress Theme</h1>
Phone: <span itemprop="telephone"><a href="tel:+123456890">
234567890</a></span>
</div>

Ajakan Bertindak Lainnya

Dengan HTML5, Anda tidak terbatas pada nomor telepon. Anda dapat menambahkan ajakan bertindak lain seperti email, pesan, faks, dll. Protokol HTML5 meliputi:

  • telp: – lakukan panggilan telepon
  • mailto: – buka aplikasi email
  • panggilan ke: buka Skype
  • sms: – mengirim pesan teks
  • faks: – mengirim faks

Semua protokol ini digunakan dengan cara yang sama seperti yang kita lihat di atas. Mari kita lihat beberapa contoh.

Menambahkan Kode ke Halaman Kontak Anda

Salah satu tempat terbaik untuk menambahkan tautan panggilan ada di dalam info kontak Anda di halaman Hubungi Kami.

Baik Anda menggunakan Editor Klasik atau editor Gutenberg baru, Anda harus melihat versi Teks halaman. Di editor Klasik klik tab Teks . Di Gutenberg, klik tiga titik di kanan atas dan pilih Editor Kode .

Tambahkan kode di tempat nomor telepon Anda.

Keluar dari Editor Kode atau Pratinjau halaman dan Anda akan melihat bahwa nomor telepon Anda sekarang adalah tautan yang dapat diklik.

Membuat Kode untuk Tautan Email atau URL

Kode HTML untuk email adalah mailto: Alamat email ditambahkan di akhir, seperti ini: 

<a href="mailto:[email protected]"> [email protected] </a>
Just like the phone link, you can use the visual portion to add a message, such as:
<a href="mailto: [email protected]"> Click here to send me an email</a>

Sama seperti tautan telepon, Anda dapat menggunakan bagian visual untuk menambahkan pesan, seperti: 

< href="mailto: [email protected]"; Click here to send me an email</a>

Berikut adalah contoh dari halaman kontak paket tata letak Spa. Saya telah menambahkan modul uraian dengan ikon dan teks Kirim Email. Saya memilih tab Teks dan menambahkan HTML email. Teks sekarang dapat diklik dan akan membuka aplikasi email Anda.

Menambahkan Kode ke URL Terbuka

Anda dapat memiliki HTML untuk membuka URL apa pun yang Anda inginkan. Ini bagus jika Anda ingin mengirim pembaca ke halaman untuk pendaftaran buletin, acara, dll. Untuk menautkannya, kode HTML Anda akan menyertakan URL. Sebagai contoh: 

<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>

Saya telah menambahkan uraian lain dengan kode untuk melihat halaman acara.

Nonaktifkan di Desktop dan Tablet

Satu masalah dengan tautan panggilan adalah tautan tersebut tidak berguna untuk desktop atau tablet. Anda dapat mengatasi ini dengan Divi dengan membuat modul yang spesifik untuk setiap jenis perangkat, lalu menonaktifkannya di perangkat lain.

Di sini, saya telah membuat dua modul dengan nomor telepon: satu menyertakan nomor telepon HTML dan yang lainnya tidak. Saya telah menonaktifkan yang memiliki nomor yang dapat diklik di tablet dan desktop, jadi mereka tidak akan pernah melihat tautannya. Saya juga telah menonaktifkan modul tanpa tautan untuk ponsel, jadi pengguna ponsel hanya akan melihat modul dengan tautan.

Menambahkan Kode ke Header atau Footer Anda

Anda dapat menambahkan kode ke header atau footer Anda menggunakan editor tema. Selalu gunakan tema anak atau kode PHP Anda akan ditimpa saat Anda memperbarui tema. Ini akan membutuhkan beberapa gaya CSS agar terlihat bagus.

Di Dasbor Anda, buka Appearance > Editor > Theme Header (atau Theme Footer ). Tempatkan kode di dalam bagian <body> kode. Saya mencari tag penutup </a>, mengklik enter untuk menambahkan beberapa baris tambahan, dan menempelkan kode saya. Anda dapat melihat kode di sini pada baris 28 dan 29.

Inilah tampilannya ketika saya menempatkan tautan panggilan dan tautan email di dalam header tema Twenty Nineteen. Itu ada dan berfungsi, tetapi tidak terlalu cantik. Ini dapat diperbaiki dengan menambahkan warna dan ruang margin sehingga mereka akan berdiri terpisah satu sama lain. Tentu saja, ini dilakukan dalam CSS.

Menata Tautan

Anda harus menambahkan kode ke bidang CSS Tambahan di Penyesuai.

Kode Anda mungkin terlihat seperti ini: 

a[href^="tel:"] {
color: brown;
text-decoration: none;
margin-right: 0.em;
}
a[href^="mailto:"] {
color: orange;
text-decoration: none;
margin-right: 0.8em;
}

Ini memberi tahu CSS cara menata teks untuk tel: dan mailto:. Ini mengubah font nomor telepon menjadi cokelat, font email oranye, dan menambahkan margin kecil di sebelah kanan setiap tautan.

CSS berfungsi di mana pun kode termasuk dalam widget, posting, dll. Anda bahkan dapat menggunakan ikon alih-alih teks.

Menambahkan Kode ke Menu Sekunder Divi

Divi dapat menyertakan nomor telepon dan email Anda di Menu Sekunder di atas header. Tombol email sudah dapat diklik secara default, tetapi nomor teleponnya tidak. Nomor telepon dapat diubah menjadi tautan panggilan dengan menggunakan nomor telepon HTML serupa yang telah kita gunakan pada contoh sebelumnya.

Buka Penyesuai Tema > Header & Navigasi > Elemen Header . Ini akan memberi Anda kotak teks tempat Anda dapat menambahkan nomor telepon Anda. Untungnya, Anda tidak terbatas hanya pada angka. Anda juga dapat menambahkan HTML. Saya telah menambahkan HTML dari contoh sebelumnya. Saya juga meningkatkan ukuran font nomor telepon untuk memudahkan melihat gambar.

Anda dapat memperjelas bahwa itu dapat diklik dengan menambahkan pesan ke bagian visual tautan. Anda dapat mengganti nomor dengan pesan, atau menambahkan pesan di akhir nomor. Ini bisa terlihat seperti ini: 

<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>

Contoh ini hanya menunjukkan teks.

Dalam yang satu ini, saya telah menambahkan nomor telepon bersama dengan teks.

Pengujian di Ponsel

Saya sarankan menguji tautan dengan perangkat seluler untuk memastikannya berfungsi. Jika Anda tidak memiliki akses ke ponsel cerdas, Anda dapat menggunakan Alat Pengembang Google Chrome.

Klik kanan di beranda Anda dan pilih Inspect . Di pojok kiri atas layar, Anda akan melihat daftar perangkat. Pilih salah satu untuk melihat tampilan situs web Anda di layar itu. Mengklik tautan nomor telepon HTML akan membuka kotak dialog yang meminta Anda untuk memilih aplikasi. Jika Anda melihat ini, tautannya berfungsi. Saya masih merekomendasikan untuk mencobanya di smartphone yang sebenarnya, tetapi ini adalah indikasi yang baik bahwa tautan itu melakukan sesuatu.

Menambahkan Tautan Panggilan dengan Plugin

Anda juga dapat menambahkan tautan panggilan ke header Anda dengan plugin. Mereka biasanya menyertakan fitur untuk menata gaya, menambahkan beberapa ajakan bertindak, dan kemampuan untuk diaktifkan atau dinonaktifkan berdasarkan perangkat pengunjung. Mereka juga mudah diatur dan digunakan. Ini adalah pilihan bagus jika Anda tidak ingin menangani kode. Berikut adalah beberapa opsi terbaik.

Tombol Telepon Sekarang

Tombol Panggil Sekarang menambahkan tombol klik untuk menelepon ke bagian bawah layar untuk pengunjung seluler Anda. Itu tidak muncul di perangkat lain. Anda juga dapat menambahkan teks jika Anda mau. Tombolnya adalah ikon telepon sehingga mudah dipahami untuk apa itu. Yang harus Anda lakukan adalah mengaktifkan tombol dan memasukkan nomor telepon Anda. Anda dapat mengubah perilaku default di pengaturan lanjutan.

Informasi Lebih Lanjut

Tombol Samping Lengket

Plugin ini memungkinkan Anda menambahkan tombol yang menempel di sisi situs web Anda dan tetap berada di layar saat pengguna menggulir. Anda dapat menambahkan nomor telepon, alamat email, ikon media sosial, dan lokasi toko yang dapat diklik. Atur mereka di kanan atau kiri, pilih gaya animasi dan rollover, sesuaikan warna, dan pilih di mana mereka ditampilkan.

Informasi Lebih Lanjut

Bilah Kontak Kecepatan

Yang ini menambahkan bilah kontak yang menyertakan tautan yang dapat diklik untuk nomor telepon, nomor faks, judul, alamat, email, jejaring sosial, dan URL khusus. Atur bilah ke atas atau bawah dan sesuaikan ukuran, warna, warna teks dan tautan, dan bagaimana bilah bereaksi. Anda juga dapat menyesuaikan ukurannya. Anda dapat menambahkan lebih banyak konten menggunakan kait filter.

Informasi Lebih Lanjut

Bilah Kontak Seluler

Plugin ini menambahkan tautan ke situs web Anda saat dilihat di perangkat seluler. Anda dapat memilih tautan mana yang ditampilkan dari 13 opsi termasuk telepon, email, Skype, URL khusus, dan jejaring sosial. Ini memiliki integrasi FontAwesome untuk ikon. Anda dapat mengatur gaya tautan dan memilih ukuran, batas, opasitas, dll. Atur menu di bagian atas atau bawah layar. Menu tetap berada di layar saat pengguna menggulir. Ini juga termasuk gulir ke atas dan keranjang WooCommerce dengan tombol penghitung item.

Informasi Lebih Lanjut

Pikiran Akhir

Popularitas smartphone untuk mengakses website semakin hari semakin meningkat. Popularitas ini mengambil tautan panggilan dari kenyamanan sederhana menjadi kebutuhan lengkap. Menambahkan nomor telepon yang dapat diklik dapat membuat perbedaan antara pengguna yang menelepon bisnis Anda atau pesaing Anda. Untungnya, tidak sulit untuk membuat tautan yang dapat diklik untuk menambahkan nomor telepon HTML ke header, footer, widget, halaman, dan posting situs WordPress Anda.

Kami ingin mendengar dari Anda. Sudahkah Anda menambahkan tautan panggilan ke situs web Anda? Beri tahu kami tentang pengalaman Anda di komentar di bawah.

Gambar Unggulan melalui Jane Kelly / shutterstock.com