1. Pourquoi rendre une adresse email et un numéro de téléphone cliquables

Rendre ces informations cliquables améliore immédiatement l’expérience utilisateur.
En un clic, le visiteur peut appeler ou envoyer un email sans copier-coller.

Bénéfices concrets

• Gain de temps pour l’utilisateur

• Augmentation des prises de contact

• Meilleure accessibilité sur mobile

• Site plus professionnel et plus crédible

Dans Framer, cette mise en place est simple et ne nécessite aucune ligne de code.

2. Rendre une adresse email cliquable dans Framer

Une adresse email cliquable utilise le lien spécial mailto:.
Ce lien ouvre automatiquement le logiciel de messagerie de l’utilisateur.

2.1 Méthode avec un texte ou un bouton

1. Sélectionne ton Text layer ou ton Button

2. Dans le panneau de droite, ouvre la section Link

3. Choisis URL

4. Entre l’adresse sous cette forme :
   mailto:contact@tonsite.com

   
   

👉 Au clic, le client email par défaut s’ouvre (PC ou Tel) avec l’adresse déjà remplie.

2.2 Ajouter un objet d’email pré-rempli (optionnel)

Tu peux pré-remplir l’objet du message avec un paramètre supplémentaire.

Exemple :
mailto:contact@tonsite.com?subject=Demande%20d'information

Astuce Framer
Remplace les espaces par %20 pour éviter les erreurs dans le lien.

3. Rendre un numéro de téléphone cliquable

Pour les téléphones, on utilise le lien tel:.
C’est indispensable pour les sites consultés sur mobile.

3.1 Format recommandé

Le numéro doit être au format international, sans espaces.

Exemple correct :
tel:+33612345678

3.2 Étapes dans Framer

1. Sélectionne le texte ou le bouton contenant le numéro

2. Active Link

3. Choisis URL

4. Colle le lien tel:+33612345678

5. Teste sur mobile

   
   

👉 Sur smartphone, un clic lance directement l’appel.

4. Rendre seulement une partie du texte cliquable

Framer permet de rendre cliquable uniquement un mot ou une partie d’un paragraphe.

Étapes

1. Double-clique sur ton texte

2. Sélectionne uniquement l’email ou le numéro

3. Clique sur l’icône Link

4. Ajoute mailto: ou tel:

Exemple :
Contactez-nous à contact@tonsite.com

Seule l’adresse devient cliquable, pas toute la phrase.

5. Bonnes pratiques à respecter

5.1 Toujours afficher une information lisible

Le lien technique reste invisible pour l’utilisateur.

✔️ Texte affiché
contact@tonsite.com

✔️ Lien utilisé
mailto:contact@tonsite.com

5.2 Tester sur tous les supports

• Mobile : vérifier que l’appel se lance

• Mobile et Desktop : vérifier l’ouverture du client email

5.3 Améliorer l’accessibilité

• Contraste suffisant

• Zone cliquable assez large

• Boutons pour les actions importantes

6. Cas d’usage courants dans Framer

• Page Contact

• Footer de site

• Landing page

• Site vitrine

• Portfolio freelance

💡 Astuce Framer : Associe un bouton “Appeler maintenant” avec un lien tel: pour maximiser les conversions mobiles.

7. Erreurs fréquentes à éviter

• Oublier mailto: ou tel:

• Ajouter des espaces dans le numéro

• Ne pas tester sur mobile

• Rendre tout un paragraphe cliquable par erreur

8. Conclusion

Rendre une adresse email ou un numéro de téléphone cliquable dans Framer est une optimisation simple mais essentielle.
Grâce aux liens mailto: et tel:, tu facilites le contact, améliores l’accessibilité et augmentes les conversions.

👉 Un petit détail technique qui fait une vraie différence.