6 étapes pour intégrer un lien téléphonique HTML sur son site web

Rédigé par : Thiso Thach
Guide et modèle gratuits : maîtriser les regex

GUIDE ET MODÈLE GRATUITS : MAÎTRISER LES REGEX

Utilisez les regex de façon optimale pour rechercher des informations ou bien automatiser certaines opérations.

Télécharger gratuitement
Téléphone symbolisant un lien d'appel HTML sur le point d'être ajouté à un site web

Mis à jour :

Publié :

Les entreprises mettant à la disposition de leurs clients un lien qui permet de les appeler directement de leurs smartphones réalisent plus de ventes. Également, le service client est enrichi par ce procédé et ces derniers sont plus en confiance.

Téléchargement  >> Le guide et le modèle pour maîtriser les regex

 

Il existe deux types de numéros de téléphone cliquables :

  • Le click to call consiste à laisser ses coordonnées à l'entreprise en cliquant sur le lien pour être recontacté.
  • Le click to speak, quant à lui, permet d'appeler l'entreprise en cliquant sur le bouton cliquable.

Il est très simple de programmer un lien de téléphone cliquable en HTML. L'HTML5 utilise des protocoles comme « tel: » et « mailto: ». Ce sont des navigateurs comme Chrome, Safari ou Firefox qui interprètent le numéro de téléphone en lien cliquable. Selon le navigateur, l'interaction peut être différente. Parfois, le navigateur ouvre l'application téléphonique et ajoute le numéro de téléphone à l'écran. Ensuite, elle attend que l'internaute clique sur le bouton d'appel. D'autres navigateurs lancent l'appel de manière immédiate. Il est ensuite possible de placer le bouton HTML n'importe où sur le site web ou sur un email.

 

Quel est l'intérêt d'ajouter un lien vers des numéros de téléphones cliquables ?

 

En France, 75 % du trafic internet se fait désormais sur smartphone. Les marques ont donc tout intérêt à faciliter l'accessibilité à leur service en instaurant un lien cliquable vers leur numéro de téléphone. De cette manière, l'internaute n'aura en aucun cas besoin de noter le numéro de l'entreprise sur un papier ou de le retenir pour ensuite le composer. Il suffit de générer l'appel en un seul clic. Cela est plus facile, direct et rapide pour l'internaute.

Faciliter son accessibilité apporte aussi à l'entreprise de la transparence. Le client est rassuré et mis en confiance. Le suivi client est alors plus important et apporte une meilleure compréhension des besoins, ce qui agit sur la satisfaction et la fidélisation des clients.

En plus d'être pratique, le numéro de téléphone cliquable joue sur la qualité de la relation et de l'échange. En effet, un appel téléphonique est plus personnel que de passer par les autres supports. Cela crée de l'engagement vis-à-vis de la marque et une augmentation des ventes.

 

Comment ajouter un lien téléphone cliquable dans une page en HTML ?

 

Pour ajouter un lien téléphonique cliquable dans une page en HTML, il faut prendre exemple sur une des lignes de code suivantes et la placer à l'endroit souhaité dans le site web :

<a href="tel:0132562898">01.32.56.28.98<a/>

<a href="tel:0549586428">Appelez maintenant<a/>

Le code « href="tel:" » crée le lien d'appel et précise au navigateur la façon d'utiliser le numéro. Ensuite, un numéro est placé entre les balises >< de la 1ère ligne de code exemple et un texte « Appelez maintenant » dans la 2ème ligne de code exemple. Il s'agit de la partie visible par le visiteur du site web. La marque est libre d'y inscrire ce qu'elle veut que l'internaute voit. Les internautes qui cliquent sur le lien accèdent à l'écran de numérotation de leur smartphone et le numéro de téléphone qui figure après « tel: » est apparent. L'interlocuteur doit alors cliquer sur le bouton pour contacter la marque par téléphone.

Il est aussi possible d'ajouter des codes de pays. Pour cela, il faut inclure un + avant l'indicatif du pays de la marque avant son numéro de téléphone comme suit :

<a href="tel:+33604565878">06.04.56.58.78<a/>

Aussi, l'entreprise peut ajouter à son numéro de téléphone une extension de poste. Il y aura une courte pause avant la composition du numéro de poste. Le développeur doit ajouter « p » devant l'extension pour qu'il y ait une pause d'une seconde.

<a href="tel:0143549887p123">Appeler le service Après-Vente<a/>

Il peut aussi faire en sorte qu'une tonalité soit diffusée avant que l'extension soit tapée, en utilisant le w au lieu de p.

Pour coder, enrichir son site web et donc son lien de téléphone cliquable, le développeur s'appuie sur un éditeur HTML et un Iframe, élément HTML, permettant l'intégration d'un contenu externe dans une page web.

 

Le guide pour comprendre les langages HTML et CSS.

Découvrez comment utiliser les langages HTML et CSS pour gérer votre site web efficacement.

  • Balises HTML à connaître
  • Mettre à jour un fichier CSS
  • Les écueils à éviter
  • Ressources pédagogiques

    Télécharger

    Tous les champs sont obligatoires.

    Merci d'avoir soumis le formulaire

    Cliquez sur le lien pour accéder au contenu en tout temps

     

     

    Les bonnes pratiques à adopter pour ajouter un lien téléphone cliquable sur sa page web

     

    1 - Définir la volumétrie possible des appels

    Avant de placer le lien de téléphone cliquable sur le site web de la marque, il faut vérifier que celle-ci peut bien répondre au volume d'appels engendré. Cela permettra d'éviter que les appelants soient mis en attente.

     

    2 - Proposer un design attrayant

    L'entreprise a tout intérêt à rendre son lien de téléphone cliquable plus attrayant, attractif et respectueux de la charte graphique de son site web. Pour cela, elle doit porter une attention particulière à la taille du bouton. Il doit être ni trop gros ni trop petit. Pour la couleur, le rouge est à éviter, car il symbolise l'interdiction. Les couleurs de la marque sont à privilégier. La marque peut opter pour une forme qui représente la communication comme une bulle avec, à l'intérieur, un téléphone, suivi du numéro de la marque.

     

    3 - S'assurer de la visibilité du bouton

    Le bouton doit être visible des internautes, quelle que soit leur navigation. Certains professionnels opteront pour faire apparaître ce bouton dans la page de contact, mais il est aussi possible de le mettre en tête ou en pied de page. Aussi, il peut être intégré dans le « Top Bar » qui se situe au-dessus du header et du menu du site.

     

    4 - Valider le bon fonctionnement du bouton

    Avant de proposer ce lien de téléphone cliquable, il faut vérifier son bon fonctionnement. Pour cela, il est nécessaire de faire des tests sur plusieurs appareils. Aussi, il est possible de désactiver le bouton pour les ordinateurs et les tablettes, car il n'est pas forcément utile sur ces supports.

     

    5 - Intégrer un évènement Google Analytics

    L'entreprise doit aussi penser à intégrer un évènement Google Analytics sur le lien de téléphone cliquable pour contrôler le nombre d'utilisateurs qui a cliqué sur le bouton en question.

     

    6 - Vérifier l'atteinte des objectifs de l'entreprise

    Enfin, après avoir mis à disposition ce lien, la marque vérifie auprès de l'équipe d'assistance si les appels sont en augmentation et si le nombre d'appels répond aux objectifs de l'entreprise.

     

    Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code grâce au langage des expressions régulières; ou découvrez le CMS de HubSpot.

    Nouveau call-to-action

    Sujets : HTML

    Articles recommandés

    Un gain de temps pour la gestion de contenu.