Collegamenti telefonici: come aggiungere collegamenti "chiamabili" e CTA al tuo sito web

Molti siti web aziendali mostrano un numero di telefono in modo che i loro clienti possano contattarli. Quando i desktop erano il modo più diffuso per accedere ai siti, gli utenti prendevano nota del numero di telefono e chiamavano da un dispositivo separato. Naturalmente, la maggior parte degli utenti ora accede al sito Web ed effettua la telefonata dallo stesso dispositivo. Questo apre l'opportunità di aggiungere un collegamento di chiamata, creando un numero di telefono HTML cliccabile.

In questo articolo, daremo un'occhiata a come aggiungere un collegamento di chiamata e alcuni altri collegamenti cliccabili come e-mail e altri CTA.

Iscriviti al nostro canale Youtube

Come funzionano i collegamenti alle chiamate

Rendere cliccabile un numero di telefono è facile con HTML. HTML5 include protocolli come tel: e mailto: utilizzabili dai browser. I browser rispondono in modo diverso a questi protocolli. Alcuni lanceranno l'app del telefono e aggiungeranno il numero sul display mentre aspettano che tu faccia clic sul pulsante Chiama. Altri chiameranno, mentre altri chiederanno prima se va bene.

Poiché è HTML, puoi aggiungere i protocolli ovunque sul tuo sito, inclusi intestazione, piè di pagina, barre laterali, all'interno del contenuto di post e pagine e all'interno dei widget.

Aggiunta di un collegamento di chiamata con numero di telefono HTML al tuo sito web

Aggiungi il codice come testo alla posizione in cui desideri che appaia il collegamento:

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

Href=tel: crea il collegamento alla chiamata. Questo dice al browser come utilizzare il numero.

"Tel: 123-456-7890" crea il numero di telefono HTML. Il numero tra virgolette è il numero che chiamerà.

Il numero all'interno dei tag >< è la parte visiva e può essere qualsiasi cosa tu voglia che sia incluso il numero di telefono, una riga di testo come "Fai clic per chiamare" o "Chiama ora" o qualsiasi altro invito all'azione volere. Dovrebbe essere descrittivo di ciò che accadrà quando faranno clic.

La visualizzazione di un messaggio al posto del numero sarebbe simile a questa:

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

I tuoi visitatori vedranno il testo ma quando faranno clic su di esso vedranno la schermata di composizione dei loro telefoni con il tuo numero pronto per loro di fare clic sul pulsante di chiamata.

Aggiungere un'estensione

Alcuni numeri di telefono hanno un'estensione. È possibile aggiungere un codice che creerà una breve pausa prima di comporre il numero di interno. L'aggiunta di P davanti all'estensione aggiungerà una pausa di un secondo. Il codice potrebbe essere simile a questo:

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

Questo compone il numero, attende un secondo e quindi compone l'interno.

È possibile attendere il segnale di linea utilizzando w invece di p .

Aggiunta di codici paese

I codici paese possono essere aggiunti includendo un + insieme al prefisso del tuo paese prima del numero di telefono. Un esempio potrebbe essere simile a questo:

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

Aggiunta di microdati per la SEO locale

Una delle mie comodità preferite nel portare in giro uno smartphone è quando cerco un'attività commerciale locale e il risultato in Google mi dà un numero di telefono cliccabile. Posso fare clic sul numero per effettuare la chiamata senza doverlo annotare o provare a memorizzarlo. Questa caratteristica è ora una necessità. Fortunatamente, puoi aggiungerlo al tuo sito web in modo che Google possa fornire il tuo numero di telefono nelle ricerche locali.

Questo viene fatto con i microdati. I microdati informano i motori di ricerca che i numeri sono un numero di telefono, quindi vengono mostrati come link di chiamata cliccabile. Puoi crearlo arricchendo il markup con alcuni tag per le ricerche locali.

Ad esempio, il codice potrebbe essere simile a questo:

<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>

Altri inviti all'azione

Con HTML5, non sei limitato ai numeri di telefono. Puoi aggiungere altri inviti all'azione come e-mail, messaggistica, fax, ecc. I protocolli HTML5 includono:

• tel: – fare una telefonata
• mailto: – apri un'app di posta elettronica
• callto: apri Skype
• sms: – inviare un messaggio di testo
• fax: – invia un fax

Tutti questi protocolli vengono utilizzati nello stesso modo visto sopra. Diamo un'occhiata ad alcuni esempi.

Aggiungere il codice alla tua pagina di contatto

Uno dei posti migliori per aggiungere un collegamento di chiamata è all'interno delle informazioni di contatto nella pagina Contattaci.

Sia che tu stia utilizzando l'editor classico o il nuovo editor Gutenberg, dovrai visualizzare la versione testuale della pagina. Nell'editor classico, fai clic sulla scheda Testo . In Gutenberg, fai clic sui tre punti in alto a destra e seleziona Editor di codice .

Aggiungi il codice al posto del tuo numero di telefono.

Esci dall'editor del codice o visualizza l'anteprima della pagina e vedrai che il tuo numero di telefono è ora un collegamento cliccabile.

Creazione di codice per un collegamento e-mail o un URL

Il codice HTML per l'e-mail è mailto: l'indirizzo e-mail viene aggiunto alla fine, in questo modo:

<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>

Proprio come il collegamento telefonico, puoi utilizzare la parte visiva per aggiungere un messaggio, ad esempio:

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

Ecco un esempio dalla pagina dei contatti del pacchetto di layout Spa. Ho aggiunto un modulo blurb con un'icona e il testo Invia un'e-mail. Ho selezionato la scheda Testo e aggiunto l'HTML dell'e-mail. Il testo è ora cliccabile e aprirà la tua app di posta elettronica.

Aggiunta di codice per aprire gli URL

Puoi avere l'HTML per aprire qualsiasi URL tu voglia. Questo è utile se vuoi indirizzare i lettori a pagine per iscrizioni a newsletter, eventi, ecc. Per collegarti a loro, il tuo codice HTML includerà l'URL. Per esempio:

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

Ho aggiunto un altro blurb con il codice per vedere la pagina degli eventi.

Disabilita su desktop e tablet

Un problema con i collegamenti di chiamata è che non sono utili per desktop o tablet. Puoi risolvere questo problema con Divi creando moduli specifici per ogni tipo di dispositivo e disabilitandoli sugli altri dispositivi.

Qui, ho creato due moduli con il numero di telefono: uno include un numero di telefono HTML e l'altro no. Ho disabilitato quello con il numero cliccabile su tablet e desktop, quindi non vedranno mai il link. Ho anche disabilitato il modulo senza il collegamento per i telefoni, quindi gli utenti dei telefoni vedranno solo il modulo con il collegamento.

Aggiungere il codice all'intestazione o al piè di pagina

Puoi aggiungere il codice all'intestazione o al piè di pagina utilizzando l'editor del tema. Usa sempre un tema figlio o il tuo codice PHP verrà sovrascritto quando aggiorni il tema. Ciò richiederà uno stile CSS per avere un bell'aspetto.

Nella tua Dashboard, vai su Aspetto > Editor > Intestazione del tema (o Piè di pagina del tema ). Inserisci il codice all'interno della parte <body> del codice. Ho cercato un tag finale </a>, ho fatto clic su invio per aggiungere qualche riga in più e ho incollato il mio codice. Puoi vedere il codice qui alle righe 28 e 29.

Ecco come appare quando ho inserito il collegamento alla chiamata e il collegamento all'e-mail nell'intestazione del tema Twenty Nineteen. C'è e funziona, ma non è molto carino. Questo è risolvibile aggiungendo colore e spazio sul margine in modo che si distinguano l'uno dall'altro. Naturalmente, questo viene fatto in CSS.

Disegnare i collegamenti

Dovrai aggiungere il codice al campo CSS aggiuntivo nel Customizer.

Il tuo codice potrebbe essere simile a questo:

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

Questo dice al CSS come modellare il testo per tel: e mailto:. Cambia il carattere del numero di telefono in marrone, il carattere dell'e-mail in arancione e aggiunge un piccolo margine a destra di ciascun collegamento.

Il CSS funziona ovunque il codice sia incluso all'interno di widget, post, ecc. Puoi persino usare le icone invece del testo.

Aggiunta del codice al menu secondario Divi

Divi può includere il tuo numero di telefono ed e-mail nel menu secondario sopra l'intestazione. Il pulsante e-mail è già cliccabile per impostazione predefinita, ma il numero di telefono no. Il numero di telefono può essere trasformato in un collegamento di chiamata utilizzando un numero di telefono HTML simile a quello utilizzato negli esempi precedenti.

Vai a Personalizzatore tema > Intestazione e navigazione > Elementi intestazione . Questo ti darà una casella di testo in cui puoi aggiungere il tuo numero di telefono. Fortunatamente, non sei limitato ai soli numeri. Puoi anche aggiungere HTML. Ho aggiunto l'HTML degli esempi precedenti. Ho anche aumentato la dimensione del carattere del numero di telefono per rendere più facile la visualizzazione delle immagini.

Puoi rendere ovvio che è cliccabile aggiungendo un messaggio alla parte visiva del link. Puoi sostituire il numero con il messaggio o aggiungere il messaggio alla fine del numero. Potrebbe assomigliare a questo:

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

Questo esempio mostra solo il testo.

In questo, ho aggiunto il numero di telefono insieme al testo.

Test su cellulare

Consiglio di testare i collegamenti con i dispositivi mobili per assicurarsi che funzioni. Se non hai accesso a uno smartphone puoi utilizzare gli strumenti per sviluppatori di Google Chrome.

Fai clic con il pulsante destro del mouse sulla tua home page e seleziona Ispeziona . Nell'angolo in alto a sinistra dello schermo vedrai un elenco di dispositivi. Seleziona quello per vedere come appare il tuo sito web su quello schermo. Facendo clic sul collegamento del numero di telefono HTML dovrebbe aprire una finestra di dialogo che ti chiede di scegliere un'app. Se vedi questo, il link funziona. Consiglio comunque di provarlo su uno smartphone reale, ma questa è una buona indicazione che il collegamento sta facendo qualcosa.

Aggiunta di collegamenti di chiamata con plugin

Puoi anche aggiungere un link di chiamata alla tua intestazione con un plug-in. In genere includono funzionalità per lo stile, l'aggiunta di più inviti all'azione e la possibilità di essere attivati ​​o disattivati ​​in base al dispositivo del visitatore. Sono anche facili da configurare e utilizzare. Queste sono ottime scelte se non vuoi gestire il codice. Ecco alcune delle migliori opzioni.

Pulsante Chiama ora

Il pulsante Chiama ora aggiunge un pulsante click-to-call nella parte inferiore dello schermo per i tuoi visitatori mobili. Non viene visualizzato su altri dispositivi. Se lo desideri, puoi anche aggiungere del testo. Il pulsante è l'icona di un telefono, quindi è facile capire a cosa serve. Tutto quello che devi fare è abilitare il pulsante e inserire il tuo numero di telefono. Puoi modificare il comportamento predefinito nelle impostazioni avanzate.

Maggiori informazioni

Pulsanti laterali adesivi

Questo plug-in ti consente di aggiungere pulsanti che si attaccano al lato del tuo sito Web e rimangono sullo schermo quando l'utente scorre. Puoi aggiungere un numero di telefono cliccabile, un indirizzo e-mail, le icone dei social media e le posizioni dei negozi. Impostali a destra o a sinistra, scegli gli stili di animazione e rollover, personalizza i colori e scegli dove mostrare.

Maggiori informazioni

Barra di contatto della velocità

Questo aggiunge una barra dei contatti che include collegamenti cliccabili per un numero di telefono, numero di fax, un titolo, indirizzo, e-mail, social network e URL personalizzati. Imposta la barra in alto o in basso e regola le dimensioni, il colore, il colore del testo e dei collegamenti e come reagisce la barra. Puoi anche regolare le dimensioni. puoi aggiungere più contenuti usando i filtri hook.

Maggiori informazioni

Barra dei contatti mobile

Questo plug-in aggiunge collegamenti al tuo sito Web quando viene visualizzato su dispositivi mobili. Puoi scegliere quali collegamenti visualizzare tra 13 opzioni tra cui telefono, e-mail, Skype, URL personalizzati e social network. Ha l'integrazione di FontAwesome per le icone. Puoi dare uno stile ai collegamenti e scegliere la dimensione, il bordo, l'opacità, ecc. Imposta il menu nella parte superiore o inferiore dello schermo. Il menu rimane sullo schermo quando l'utente scorre. Include anche lo scorrimento verso l'alto e il carrello WooCommerce con i pulsanti del contatore degli articoli.

Maggiori informazioni

Pensieri finali

La popolarità degli smartphone per accedere ai siti Web aumenta ogni giorno. Questa popolarità trasforma i collegamenti di chiamata dall'essere una semplice comodità a una necessità completa. L'aggiunta di numeri di telefono cliccabili può fare la differenza tra gli utenti che chiamano la tua attività o i tuoi concorrenti. Fortunatamente, non è così difficile creare collegamenti cliccabili per aggiungere numeri di telefono HTML a intestazioni, piè di pagina, widget, pagine e post del tuo sito Web WordPress.

Vogliamo sentire da voi. Hai aggiunto un link di chiamata al tuo sito web? Facci sapere la tua esperienza nei commenti qui sotto.

Immagine in primo piano tramite Jane Kelly / shutterstock.com