Aujourd’hui on va en parler Liens HTML vers des numéros de téléphone et comment les inclure sur votre site Web ou votre blog pour répondre aux appels de vos utilisateurs et / ou clients. Merci au protocole tel:nous pouvons signaler tout lien sur un site Web qui, au lieu d’un lien vers une autre section ou page, tente d’appeler le numéro de téléphone donné en ajoutant simplement un lien vers un texte ou une photo.

La bonne chose à propos de cette méthode est que vous pouvez inclure votre numéro de téléphone dans l’en-tête, le pied de page ou un widget WordPress. Le visiteur n’a pas à copier ni à saisir manuellement le numéro sur son téléphone portable. Cliquez simplement sur le lien HTML pour appeler le numéro spécifié. Ceci est particulièrement utile lorsque nous en naviguons à partir de notre smartphone Web avec un design attrayant et nous voulons passer ou recevoir un appel.

De plus, comme nous le verrons plus tard Compatibilité entre navigateurs Attribut et protocole href="https://www.silocreativo.com/como-crear-enlaces-html-para-llamar-por-telefono-desde-tu-web/tel:" c’est Très bien Cela nous permettra d’afficher le lien sur notre blog ou notre site Web et de nous assurer que nous recevons correctement les appels dans la grande majorité des cas.

Mais commençons par la plupart d’entre eux Connaissance de base du HTML.

HTML Element et Tel-Protocol: appel par téléphone

En HTML, les liens sont définis par le élément <a></a>. Si nous incluons l’élément vide, nous n’obtenons rien. Besoin Au moins deux informations pour que le navigateur sache quoi faire::

  • Où le lien doit-il conduire? Dans notre cas, un numéro de téléphone et un journal pour utiliser ce numéro pour passer un appel. Ceci est défini dans l’attribut href
  • Que voulons-nous afficher sur le Web pour que l’utilisateur clique? Cela peut être du texte, un bouton, une image. Nous utiliserons le numéro de téléphone avec un SMS de Appel à l’action. De cette façon, toute personne souhaitant appeler peut cliquer sur le lien HTML ou noter le numéro qu’elle souhaite appeler à un autre moment. Ceci est défini entre le jour d’ouverture du lien <a> et le jour de fermeture </a>

Sur la base de ces données, nous créerons notre lien HTML afin que nous puissions vous appeler par téléphone. Ce serait le code:

<a href="https://www.silocreativo.com/como-crear-enlaces-html-para-llamar-por-telefono-desde-tu-web/tel:600123456">Contacto: 600123456</a>

Le lien serait le suivant:

Juste à droite? Avec cela, nous nous assurons déjà qu’un appel est lancé automatiquement lorsque vous cliquez sur le lien sur un téléphone mobile. Cependant, que se passe-t-il si nous naviguons à partir d’un appareil qui ne le peut pas? Passer des appels téléphoniques comme une tablette ou un ordinateur portable? Dans ce cas, le navigateur nous demande quelle application ou quel programme nous voulons utiliser pour réaliser l’action associée à notre lien (action). Similaire au plan suivant:

Avertissement lors de l'utilisation d'un lien HTML pour accéder à partir de l'ordinateur
Ce serait l’avertissement lorsque nous cliquions sur un lien pour passer un appel depuis un ordinateur en utilisant le navigateur Mozilla Firefox

Si vous avez installé un programme ou une application capable de passer des appels, vous pouvez l’utiliser pour que nous puissions dire l’attribut et le protocole href="https://www.silocreativo.com/como-crear-enlaces-html-para-llamar-por-telefono-desde-tu-web/tel" Ce n’est pas seulement pour appeler des téléphones portables. L’un d’eux est Skype. Cependant, si vous vous demandez comment ajouter un lien sur votre site Web afin que vos utilisateurs puissent démarrer Skype avec vous, lisez la suite car il existe également une option.

Ajoutez du style et du design à nos liens HTML de légende

Exemples de boutons HTML pour les étiquettes
Quelques exemples de liens appelables par téléphone sont devenus des boutons grâce au CSS

Tout ne sera pas HTML. Pour amener un utilisateur à cliquer Dans un lien, sa conception est très importante. Puisque le lien est un élément HTML, tout le répertoire CSS nous est disponible Style au texte, Couleurs, de l’argent… Pour dire au navigateur de n’appliquer ces styles qu’à notre lien d’appel et non à tous les liens de notre site Web, nous pouvons définir une classe ou utiliser un sélecteur CSS avancé. Si vous souhaitez en savoir plus sur CSS, vous pouvez lire notre introduction Ici.

Créons un lien HTML pour appeler sur le téléphone en utilisant quelques exemples de base:

Deux détails intéressants en ce qui concerne le style de nos liens téléphoniques. Nous avons d’abord utilisé un sélecteur par attributCeci est très utile lorsque nous n’avons pas accès au HTML et que nous ne pouvons pas modifier ou ajouter une classe au lien qui contient le numéro de téléphone. En sélectionnant selon les attributs, nous pouvons donner tous les liens, leurs attributs, styles href Commencer avec tel:.

Deuxièmement, la possibilité d’ajouter une icône d’un téléphone pour indiquer plus clairement qu’il s’agit d’un numéro que nous pouvons appeler. Nous pouvons également ajouter l’icône et ne pas afficher de texte si nous voulons ajouter plus de minimalisme au bouton d’appel. Pour cela, nous nous aiderons Pseudo-élément CSS ::before pour ajouter le symbole.

/* Selector CSS por atributo */
a[href^="https://www.silocreativo.com/como-crear-enlaces-html-para-llamar-por-telefono-desde-tu-web/tel:"] {
    font-size: 24px;
    display: inline-block;
    margin: 20px 30px;
}

/* Añadiendo icono como pseudoelemento CSS */
a[href^="https://www.silocreativo.com/como-crear-enlaces-html-para-llamar-por-telefono-desde-tu-web/tel:"]::before {
    content: "260e";
    margin-right: 0.5em;
}

Code de lien HTML pour les appels Skype

Le bouton d’appel fonctionne correctement lorsque nous naviguons sur Internet et cliquons depuis un téléphone mobile. Cependant, cela ne fonctionne pas à partir d’un ordinateur de bureau, d’un ordinateur portable ou d’une tablette sans téléphone d’accompagnement. Si nous voulons passer ou recevoir des appels sur ces appareils à l’aide d’un bouton sur notre site Web, nous avons besoin d’un type d’application Skype Y. Créer un bouton spécifique pour appeler sur Skype.

Nous allons simplement remplacer le protocole que nous avons utilisé pour le numéro de téléphone tel: via le propre protocole de Skype dans l’attribut href. Ensuite, nous devrions utiliser notre nom d’utilisateur suivi du point d’interrogation ? et l’action à entreprendre, auquel cas nous souhaiterions appeler via Skype, serait call. Notre code ressemblerait à ceci:

<a href="https://www.silocreativo.com/como-crear-enlaces-html-para-llamar-por-telefono-desde-tu-web/skype:nombredeusuario?call">Llámeme por Skype</a></code

Si vous souhaitez utiliser les options avancées des liens HTML pour accéder via Skype, vous pouvez consulter la documentation officielle sur Español Ö Anglais. Il ne reste plus qu’à concevoir ces nouveaux boutons en utilisant le même processus que nous utilisons avec les liens HTML pour passer un appel téléphonique.

Lien pour appeler via le menu de navigation WordPress

Si vous utilisez WordPress et que vous souhaitez ajouter votre numéro de téléphone à l’en-tête ou au menu de navigation afin qu’il soit toujours visible et que vous puissiez être appelé, vous devez d’abord configurer un menu personnalisé dans WordPress. Ici Vous avez les étapes, c’est très simple.

Comment créer un lien HTML vers le téléphone dans WordPress

Une fois que vous avez créé le menu et ajouté vos pages et catégories, Vous pouvez ajouter un élément supplémentaire appelé « Lien personnalisé ». Ici, au lieu d’un lien commun, vous pouvez spécifier le protocole et l’attribut dont vous avez besoin. Dans notre cas tel:600123456. Dans le deuxième champ, nous pouvons insérer le texte qui doit être affiché dans le bouton d’appel. Enfin, nous ajouterons cette nouvelle entrée au menu de navigation.

Enfin nous pouvons Donnez au bouton d’appel un style spécial pour le faire ressortir d’une certaine manière, soit par un arrière-plan coloré, soit en modifiant une valeur dans le style des textes à l’aide de CSS. Pour ce faire, suivez-vous ce tutoriel avec quelques exemples.

Ajouter des liens pour appeler en HTML n’a jamais été aussi simple

Comme vous l’avez vu grâce au HTML, créer des liens et des boutons pour passer des appels téléphoniques n’a jamais été aussi simple. On peut trouver un lien sur divers sites représentatifs d’un web ou d’un blog (en-tête, pied de page, zone de widgets …), mais aussi dans n’importe quelle partie du contenu (intégré dans un article ou dans les commentaires).

J’espère que le didacticiel vous a été utile et que vous recevez déjà des appels de votre site Web. Si vous avez des questions, n’hésitez pas à commenter. Heureux!



Source link

Recent Posts