Liens téléphoniques : comment ajouter des liens « appelables » et des CTA à votre site Web

Publié: 2019-01-14

De nombreux sites Web d'entreprises affichent un numéro de téléphone afin que leurs clients puissent les contacter. Lorsque les ordinateurs de bureau étaient le moyen le plus populaire d'accéder aux sites, les utilisateurs notaient le numéro de téléphone et appelaient à partir d'un appareil distinct. Bien sûr, la plupart des utilisateurs accèdent désormais au site Web et passent l'appel téléphonique à partir du même appareil. Cela ouvre la possibilité d'ajouter un lien d'appel - créant un numéro de téléphone HTML cliquable.

Dans cet article, nous verrons comment ajouter un lien d'appel ainsi que quelques autres liens cliquables tels que les e-mails et autres CTA.

Abonnez-vous à notre chaîne Youtube

Comment fonctionnent les liens d'appel

Rendre un numéro de téléphone cliquable se fait facilement avec HTML. HTML5 inclut des protocoles tels que tel: et mailto: que les navigateurs peuvent utiliser. Les navigateurs réagissent différemment à ces protocoles. Certains lanceront l'application téléphonique et ajouteront le numéro à l'écran en attendant que vous cliquiez sur le bouton Appeler. D'autres passeront l'appel, tandis que d'autres demanderont d'abord si tout va bien.

Comme il s'agit de HTML, vous pouvez ajouter les protocoles n'importe où sur votre site, y compris l'en-tête, le pied de page, les barres latérales, dans le contenu des articles et des pages et dans les widgets.

Ajout d'un lien d'appel de numéro de téléphone HTML à votre site Web

Ajoutez le code sous forme de texte à l'emplacement où vous souhaitez que le lien apparaisse :

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

Href=tel : crée le lien d'appel. Cela indique au navigateur comment utiliser le numéro.

"Tel: 123-456-7890" crée le numéro de téléphone HTML. Le numéro entre guillemets est le numéro qu'il appellera.

Le numéro dans les balises >< est la partie visuelle et il peut s'agir de tout ce que vous voulez, y compris le numéro de téléphone, une ligne de texte telle que « Cliquez pour appeler » ou « Appeler maintenant », ou tout autre appel à l'action que vous vouloir. Il doit être descriptif de ce qui va se passer lorsqu'ils cliquent.

L'affichage d'un message au lieu du numéro ressemblerait à ceci :

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

Vos visiteurs verront le texte, mais lorsqu'ils cliqueront dessus, ils verront l'écran de numérotation de leurs téléphones avec votre numéro prêt à cliquer sur le bouton d'appel.

Ajout d'une extension

Certains numéros de téléphone ont une extension. Vous pouvez ajouter un code qui créera une brève pause avant de composer le numéro de poste. L'ajout de P devant l'extension ajoutera une pause d'une seconde. Le code pourrait ressembler à ceci :

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

Celui-ci compose le numéro, attend une seconde, puis compose le poste.

Vous pouvez le faire attendre une tonalité en utilisant w au lieu de p .

Ajout de codes de pays

Les codes de pays peuvent être ajoutés en incluant un + avec le code de votre pays avant le numéro de téléphone. Un exemple pourrait ressembler à ceci :

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

Ajout de microdonnées pour le référencement local

L'un de mes avantages préférés pour transporter un smartphone est lorsque je recherche une entreprise locale et que le résultat dans Google me donne un numéro de téléphone cliquable. Je peux cliquer sur le numéro pour passer l'appel sans avoir à le noter ou à essayer de le mémoriser. Cette fonctionnalité est désormais une nécessité. Heureusement, vous pouvez l'ajouter à votre site Web afin que Google puisse fournir votre numéro de téléphone dans les recherches locales.

Cela se fait avec des microdonnées. Les microdonnées informent les moteurs de recherche que les numéros sont un numéro de téléphone, ils sont donc affichés sous la forme d'un lien d'appel cliquable. Vous pouvez le créer en enrichissant le balisage avec quelques balises pour les recherches locales.

Par exemple, le code pourrait ressembler à ceci :

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

Autres appels à l'action

Avec HTML5, vous n'êtes pas limité aux numéros de téléphone. Vous pouvez ajouter d'autres appels à l'action tels que l'e-mail, la messagerie, la télécopie, etc. Les protocoles HTML5 incluent :

tél : – passer un appel téléphonique
mailto : – ouvrir une application de messagerie
callto : ouvrir Skype
sms : – envoyer un SMS
fax : – envoyer un fax

Tous ces protocoles sont utilisés de la même manière que nous l'avons vu ci-dessus. Regardons quelques exemples.

Ajouter le code à votre page de contact

L'un des meilleurs endroits pour ajouter un lien d'appel se trouve dans vos coordonnées sur votre page Contactez-nous.

Que vous utilisiez l'éditeur classique ou le nouvel éditeur Gutenberg, vous devrez afficher la version texte de la page. Dans l'éditeur classique, cliquez sur l'onglet Texte . Dans Gutenberg, cliquez sur les trois points en haut à droite et sélectionnez Éditeur de code .

Ajoutez le code à la place de votre numéro de téléphone.

Quittez l'éditeur de code ou prévisualisez la page et vous verrez que votre numéro de téléphone est maintenant un lien cliquable.

Création de code pour un lien de courrier électronique ou une URL

Le code HTML pour l'e-mail est mailto : L'adresse e-mail est ajoutée à la fin, comme ceci :

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

Tout comme le lien téléphonique, vous pouvez utiliser la partie visuelle pour ajouter un message, tel que :

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

Voici un exemple de la page de contact du pack d'aménagement Spa. J'ai ajouté un module de présentation avec une icône et le texte Envoyer un e-mail. J'ai sélectionné l'onglet Texte et ajouté le HTML de l'e-mail. Le texte est maintenant cliquable et ouvrira votre application de messagerie.

Ajout de code aux URL ouvertes

Vous pouvez avoir le code HTML pour ouvrir n'importe quelle URL que vous voulez. C'est bien si vous souhaitez envoyer les lecteurs vers des pages d'inscription à la newsletter, d'événements, etc. Afin de créer un lien vers eux, votre code HTML inclura l'URL. Par exemple:

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

J'ai ajouté un autre texte de présentation avec du code pour voir la page des événements.

Désactiver sur le bureau et la tablette

Un problème avec les liens d'appel est qu'ils ne sont pas utiles pour les ordinateurs de bureau ou les tablettes. Vous pouvez résoudre ce problème avec Divi en créant des modules spécifiques à chaque type d'appareil, puis en les désactivant sur les autres appareils.

Ici, j'ai créé deux modules avec le numéro de téléphone : l'un inclut un numéro de téléphone HTML et l'autre pas. J'ai désactivé celui avec le numéro cliquable sur les tablettes et les ordinateurs de bureau, ils ne verront donc jamais le lien. J'ai également désactivé le module sans le lien pour les téléphones, afin que les utilisateurs de téléphones ne voient que le module avec le lien.

Ajouter le code à votre en-tête ou pied de page

Vous pouvez ajouter le code à votre en-tête ou pied de page à l'aide de l'éditeur de thème. Utilisez toujours un thème enfant ou votre code PHP sera écrasé lorsque vous mettez à jour le thème. Cela nécessitera un certain style CSS pour bien paraître.

Dans votre tableau de bord, accédez à Apparence > Éditeur > En-tête du thème (ou Pied de page du thème ). Placez le code dans la partie <body> du code. J'ai cherché une balise de fin </a>, j'ai cliqué sur Entrée pour ajouter quelques lignes supplémentaires et j'ai collé mon code. Vous pouvez voir le code ici aux lignes 28 et 29.

Voici à quoi cela ressemble lorsque j'ai placé le lien d'appel et le lien de courrier électronique dans l'en-tête du thème Twenty Nineteen. C'est là et ça marche, mais ce n'est pas très joli. Ceci est réparable en ajoutant de la couleur et un espace de marge afin qu'ils se démarquent les uns des autres. Bien sûr, cela se fait en CSS.

Styliser les liens

Vous devrez ajouter du code au champ CSS supplémentaire dans le personnalisateur.

Votre code pourrait ressembler à ceci :

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

Cela indique au CSS comment styliser le texte pour tel: et mailto:. Il change la police du numéro de téléphone en marron, la police de l'e-mail en orange et ajoute une petite marge à droite de chaque lien.

Le CSS fonctionne partout où le code est inclus dans les widgets, les publications, etc. Vous pouvez même utiliser des icônes au lieu de texte.

Ajouter le code au menu secondaire Divi

Divi peut inclure votre numéro de téléphone et votre e-mail dans le menu secondaire au-dessus de l'en-tête. Le bouton e-mail est déjà cliquable par défaut, mais pas le numéro de téléphone. Le numéro de téléphone peut être transformé en lien d'appel en utilisant un numéro de téléphone HTML similaire à celui que nous avons utilisé dans les exemples précédents.

Accédez au Personnalisateur de thème > En-tête et navigation > Éléments d'en-tête . Cela vous donnera une zone de texte où vous pourrez ajouter votre numéro de téléphone. Heureusement, vous n'êtes pas limité aux chiffres. Vous pouvez également ajouter du HTML. J'ai ajouté le code HTML des exemples précédents. J'ai également augmenté la taille de la police du numéro de téléphone pour faciliter la lecture des images.

Vous pouvez indiquer clairement qu'il est cliquable en ajoutant un message à la partie visuelle du lien. Vous pouvez remplacer le numéro par le message ou ajouter le message à la fin du numéro. Cela pourrait ressembler à ceci :

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

Cet exemple montre juste le texte.

Dans celui-ci, j'ai ajouté le numéro de téléphone avec le texte.

Test sur mobile

Je recommande de tester les liens avec les appareils mobiles pour s'assurer que cela fonctionne. Si vous n'avez pas accès à un smartphone, vous pouvez utiliser les outils de développement de Google Chrome.

Faites un clic droit sur votre page d'accueil et sélectionnez Inspecter . Dans le coin supérieur gauche de votre écran, vous verrez une liste d'appareils. Sélectionnez celui pour voir à quoi ressemble votre site Web sur cet écran. Cliquer sur le lien du numéro de téléphone HTML devrait ouvrir une boîte de dialogue vous demandant de choisir une application. Si vous voyez cela, le lien fonctionne. Je recommande toujours de l'essayer sur un vrai smartphone, mais c'est une bonne indication que le lien fait quelque chose.

Ajout de liens d'appel avec des plugins

Vous pouvez également ajouter un lien d'appel à votre en-tête avec un plugin. Ils incluent généralement des fonctionnalités de style, d'ajout de plusieurs appels à l'action et la possibilité d'être activés ou désactivés en fonction de l'appareil du visiteur. Ils sont également faciles à installer et à utiliser. Ce sont d'excellents choix si vous ne voulez pas manipuler de code. Voici quelques-unes des meilleures options.

Bouton Appeler maintenant

Le bouton Appeler maintenant ajoute un bouton d'appel en un clic au bas de l'écran pour vos visiteurs mobiles. Il ne s'affiche pas sur les autres appareils. Vous pouvez également ajouter du texte si vous le souhaitez. Le bouton est une icône de téléphone, il est donc facile de comprendre à quoi il sert. Tout ce que vous avez à faire est d'activer le bouton et d'entrer votre numéro de téléphone. Vous pouvez modifier le comportement par défaut dans les paramètres avancés.

Plus d'information

Boutons latéraux collants

Ce plugin vous permet d'ajouter des boutons qui collent sur le côté de votre site Web et restent à l'écran lorsque l'utilisateur fait défiler. Vous pouvez ajouter un numéro de téléphone cliquable, une adresse e-mail, des icônes de réseaux sociaux et des emplacements de magasin. Placez-les à droite ou à gauche, choisissez les styles d'animation et de survol, personnalisez les couleurs et choisissez où elles s'affichent.

Plus d'information

Barre de contact de vitesse

Celui-ci ajoute une barre de contact qui comprend des liens cliquables pour un numéro de téléphone, un numéro de fax, un titre, une adresse, un e-mail, des réseaux sociaux et des URL personnalisées. Placez la barre en haut ou en bas et ajustez la taille, la couleur, la couleur du texte et des liens, ainsi que la façon dont la barre réagit. Vous pouvez également ajuster la taille. vous pouvez ajouter plus de contenu en utilisant des crochets de filtre.

Plus d'information

Barre de contact mobile

Ce plugin ajoute des liens vers votre site Web lorsqu'il est consulté sur des appareils mobiles. Vous pouvez choisir les liens à afficher parmi 13 options, notamment téléphone, e-mail, Skype, URL personnalisées et réseaux sociaux. Il a une intégration FontAwesome pour les icônes. Vous pouvez styliser les liens et choisir la taille, la bordure, l'opacité, etc. Définissez le menu en haut ou en bas de l'écran. Le menu reste à l'écran lorsque l'utilisateur fait défiler. Il comprend également un défilement vers le haut et un panier WooCommerce avec des boutons de compteur d'articles.

Plus d'information

Dernières pensées

La popularité des smartphones pour accéder aux sites Web augmente chaque jour. Cette popularité fait passer les liens d'appel d'une simple commodité à une nécessité absolue. L'ajout de numéros de téléphone cliquables peut faire la différence entre les utilisateurs qui appellent votre entreprise ou vos concurrents. Heureusement, il n'est pas si difficile de créer des liens cliquables pour ajouter des numéros de téléphone HTML à vos en-têtes, pieds de page, widgets, pages et publications de votre site Web WordPress.

Nous voulons de vos nouvelles. Avez-vous ajouté des liens d'appel à votre site Web ? Faites-nous part de votre expérience dans les commentaires ci-dessous.

Image en vedette via Jane Kelly / shutterstock.com