Lien téléphone pour appel direct depuis les smartphones
Lorsque l’on visite votre site depuis un smartphone, quoi de plus normal que de souhaiter vous joindre directement par téléphone ?
Voici quelques astuces pour ajouter dans WebAcappella Responsive un Lien téléphone pour appel direct depuis les smartphones.
Deux méthodes s’offrent à nous pour afficher un numéro de téléphone et proposer à ses visiteurs de cliquer pour nous appeler directement. Voyons ensemble quelles sont ces méthodes et comment procéder.
Méthode 1 :
Le lien hypertexte.
La méthode la plus simple et rapide consiste à ajouter un élément html là où l’on souhaite afficher son numéro de téléphone et d’y insérer le code suivant :
<a href="tel:+33711223344">Cliquez ici pour appeler le 07 11 22 33 44</a>
Le lien href=”tel” ne doit pas comporter d’espace, vous devez écrire l’indicatif international du pays et ne pas inscrire le premier 0 du numéro de téléphone.
- Pour la France : +33
- Pour la Belgique : +32
- Pour la Suisse : +41
- Pour les autres pays : Débrouillez vous j’ai pas que ça à faire
Méthode 2 :
L’image cliquable.
Une méthode un peu plus design qui consiste à insérer une image designée par vos soins avec un lien cliquable. Toujours à l’aide d’un élément html dans WARC, collez le code suivant.
<a href="tel:+33711223344"> <img src="../bouton-appel.png"> </a>
Il vous faudra téléverser à la racine de votre serveur via votre client FTP l’image .png que vous souhaitez.
Il est préférable d’avoir une image qui ne dépasse pas les 100px de large.
Méthode bonus :
Le lien pour envoyer un sms
Si vous le souhaitez, vous pouvez également créer un lien qui ouvre directement l’éditeur de sms des smartphones. Grâce à ce lien, au clic, le visiteur et automatiquement redirigé vers son application sms native et peut vous envoyer un message.
Pour reprendre la méthode 1 voici le code
<a href ="sms:+33711223344">Cliquez ici pour envoyer un SMS</a>
Pour reprendre la méthode 2
<a href="sms:+33711223344"> <img src="../bouton-appel.png"> </a>
Je vous conseil néanmoins d’avoir recours aux propriétés de masquage et de ne pas afficher ces liens sur desktop, ça n’a aucun intérêt.
Voilà, vous savez à présent comment créer un Lien téléphone pour appel direct depuis les smartphones !
Bisous les neveux.
Simple et efficace
Merci
Bravo il y a tout 😉
la grande classe
Merci
Merci beaucoup
ça n’a pas fonctionner pour moi. est ce qu’il faut écrire le chemin complet pour l’appel à l’image ?
mais top 🙂 MERCI <3
j'ai un peu amélioré avec un centrage de l'image et forcé la taille pour avoir un rendu fixe.
voir sur le site, visible uniquement depuis un smartphone, (site en construction) :
https://www.garage-du-littoral.ch
le template est celui de crazyseven, Crazy Grarage, dispo sur tontonduweb
Grand merci à vous
Bonjour, quel est le code pour le centrer ? Merci
Je n’arrive pas à avoir accès au téléphone depuis mon site web
OK mais à partir du moment ou on met un numéro de téléphone, en cliquant sur celui-ci sur un smartphone, cela ouvre l’appli des contacts pour pouvoir appeler directement ! En tout cas c’est ce qui se passe sur tous mes sites quand je les teste sur mon smartphone (il est vrai que je suis sous WindowsPhone et que je n’ai pas encore tester sous Iphone et Android, mais je serai quand même étonné que cela soit différent).
Si quelqu’un a un retour à ce sujet ?!
Merci
Oui, ça ouvre l’application native pour téléphoner, idem pour la fonction SMS… Mais c’est pratique pour l’utilisateur, pas besoin de noter ou mémoriser le numéro, ce dernier s’inscrit à l’emplacement prévu…
Bonjour Gilles. Je me suis, je pense, mal exprimé dans mon précédent post. Je voulais juste dire que sur mes sites je met juste un message du genre “appelez-nous au 0600000000” et lorsque l’on clique sur le numéro de téléphone cela ouvre l’appli contact. Donc ce tuto, à mon avis, n’apporte pas grand chose de plus si ce n’est la partie image cliquable qui est, pour reprendre les termes des Tontons, “un peu plus design” !
Bonjour Michel, j’ai essayé sur un site que je suis en train de développer, si je mets juste le n° de téléphone, sur un smartphone android il ne se passe rien, si ce n’est que cela met en surbrillance le n° et permet de le copier dans le presse-papier. Après je ne sais pas sous quel format vous mettez le ” appelez-nous au 0600000000 “, lien cliquable ou juste du texte ?
bonne journée
gilles
Bonjour Gilles. c’est peut être une spécificité de Windows Phone ?! Tu peut peut-être faire un essai avec ton smartphone Android sur mon site (made with WARC) https://mg-diff.fr
Bonjour il semble que les iphone intègre cette fonction. J’ai un client qui a appuyé sur le numéro qui était juste écrit en “texte” sur le site et ça a ouvert l’appli pour téléphoner. Mais sur mon téléphone (pas iphone) cela m’a pas ouvert mon appli. Donc ce tuto est très pratique pour ceux qui m’ont pas iphone mais des smatphone.
Merci la team Tonton
Suite : et à partir du moment ou l’appli contacts et ouverte, j’ai le choix entre téléphoner ou envoyer un sms
Moi je crée simplement un bouton pour la version mobile et je clique sur “lien url” et là je mets “tel:0033” et je mets à la suite le numéro de téléphone en enlevant le premier 0.
Exemple avec le 06 50 32 32 32, je mets le lien url : tel:0033650323232
Merci Annabelle pour l’info. Je vais tester !
Bonjour
Une petite question! Le lien s’affiche sur le site en bleu. Est-il possible (par une ligne de code ou autre) de changer cette couleur par du blanc par exemple. Et changer à tout hasard la police.
Merci à vous chez moi le bouton marche très bien
Hello et merci pour toutes ces infos pour les nuls comme moi !
Par contre j’avoue je n’ai pas réussi à insérer un bouton d’appel (genre une image d’un tél). Est-ce qu’il y a d’autres méthodes plus simples pour les nuls du web 😉
Merci!!!
Claire et utile
Merci beaucoup
Bonjour,
Super et simple, merci beaucoup !
Question : j’ai une même page de contact pour les versions mobile ou desktop de mon site (sur magento), quel code écrire pour que le lien du tel ne soit visible et cliquable que sur la version mobile ?
Merci
Merci pour l’info que je viens de mettre en place sur mon site. excellent cela fonctionne. Merci
Super simple bravo et merci pour cet article.
j’avoue que je l’utilise toujours bien mais je ne comprend pas pourquoi bit.ly trouve que c’est un lien erroné. :/
Merci de m’éclairer tonton_du_web
Bonjour,
j’essaie la méthode 2; j’ai bien mis l’image via le ftp, mais celle-ci n’apparaît pas sur le site, peut être me trompé-je dans l’adresse ?
que doit contenir le code src qui lie vers l’image : nom du site/dossier/sous dossier/ nom de l’image ?
Bonjour,
Est il possible de faire en sorte que le numéro ne soit pas vu par la personne quand elle clique sur le lien pour le sms ?
Il y’a t’il pas un code pour lancer les syntaxes, par exemple : #144# ? car lorsque je fais tel:#144#, car ne s’affiche pas chez l’utilisateur mobile quand il clique sur le lien, apparemment ça marche que pour les numéro de téléphone.
Avez-vous une idée sur ce cas ?
Bonjour
Le lien s’affiche sur le site en bleu, or j’ai un fond orange donc c’est très laid. Est-il possible (par une ligne de code ou autre) de changer cette couleur par du blanc par exemple ?
Merci à vous
Très utile. Merci et bon travail