TutorielsLien téléphone pour appel direct depuis les smartphones

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.

Lien téléphone pour appel direct depuis les smartphones

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.

29 commentaires

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

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

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

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

  5. 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!!!

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

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

  8. 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 ?

  9. 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 ?

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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée Champs requis marqués avec *

Poster commentaire