Comment rendre un numéro de téléphone cliquable ?

Rendez votre numéro de téléphone cliquable et améliorez votre expérience client !

En préambule, il convient de préciser que les solutions qui suivent ne présentent d'intérêt que si votre éditeur de site ne prévoit pas la fonction “téléphone cliquable“. À titre d'exemple, c'est actuellement le cas sur la version “Creator“ de Jimdo. A contrario, la version “Dolphin“ du même CMS en est pourvue.

Il m'arrive fréquemment de visiter des sites sur lesquels les numéros de téléphone ne sont pas cliquables.

Si l'absence d'une telle interaction est pratiquement sans conséquence lors d'une navigation sur ordinateur (la lecture du numéro suffit pour le composer simultanément sur le téléphone), le frein est bel et bien réel quand la consultation se fait sur un smartphone. En effet, le mobinaute devra alors jongler entre le navigateur web et l'appli téléphone, mémoriser le numéro, le composer, puis lancer son appel... Peut mieux faire !

Je vous propose ici deux solutions qui vous permettront de pallier cette situation et lancer un appel d'un simple clic.

1 - Code html pour un Numéro de téléphone au format texte

<a href="tel:06XXXXXXXX">texte libre</a>

le numéro destinataire (06XXXXXXXX) peut également être rédigé avec le préfixe national (+336XXXXXXXX)
quel que soit son format, pas d'espace dans le numéro destinataire
s'agissant du texte libre, celui-ci pourra être le numéro de téléphone lui même ou bien une invitation au clic...

2 - Code html pour afficher une image et lui associer un numéro de téléphone

<div style="text-align: center;">

<a href="tel:+336XXXXXXXX"><img src="https://adresse de l'image" width="160" height="40" /></a>

</div>

Dans cet exemple :

l'alignement du visuel est centré "text-align: center;". Il pourra être aligné à gauche "left" ou à droite "right"
l'adresse de l'image est l'URL attribuée par votre CMS après importation du visuel
les dimensions du visuel sont de 160 pixels pour la largeur (width) et 40 pixels pour la hauteur (heigh). Ces valeurs sont à apprécier en fonction de l'image utilisée et de la taille que vous souhaitez lui donner.

N'hésitez pas à me faire part de vos remarques et commentaires...!