Tu veux permettre à tes visiteurs de copier un texte en un clic ? Un lien, un code promo, une adresse email ?

Sur Framer, c'est possible sans écrire une seule ligne de code.

Le composant Copy Clipboard fait exactement ça. Et en quelques minutes, tu peux l'ajouter à n'importe quelle page de ton site.

Pourquoi ajouter un bouton copier sur ton site

Un bouton de copie automatique améliore l'expérience utilisateur de façon immédiate.

Plutôt que de demander à ton visiteur de sélectionner un texte manuellement, de faire clic droit puis "Copier", tu lui offres un raccourci en un clic.

Concrètement, ça sert à copier une URL (pour partager un article ou une page), copier un code promo (sur une landing page ou une page de vente), récupérer un lien de ressource (PDF, template, outil), copier une adresse email ou un numéro de téléphone, ou encore copier une commande terminal pour les sites tech.

C'est un micro détail, mais ça fait une vraie différence sur la perception de qualité de ton site.

Sur mobile, c'est encore plus important. Sélectionner un texte avec le doigt est souvent pénible. Un bouton de copie élimine cette friction.

Trouver le composant Copy Clipboard dans Framer

Le bouton copier n'est pas un plugin externe. C'est un composant natif de Framer, disponible directement dans l'éditeur.

Pour le trouver :

1. Clique sur Insert dans la barre du haut

2. Va dans la section Utility

3. Sélectionne Copy Clipboard

4. Glisse le composant dans ta page

Pas besoin d'installer quoi que ce soit. Si tu débutes sur Framer et que tu ne connais pas encore bien l'interface, le guide pour créer ton premier site t'aidera à te repérer.

Comprendre le fonctionnement du composant

Le composant Copy Clipboard a un rôle unique : copier un texte défini dans le presse-papier quand l'utilisateur clique dessus.

Tu choisis le texte à copier. Framer gère le reste.

Aucune logique à construire. Aucune interaction à configurer manuellement. C'est l'un des composants natifs de Framer les plus simples à utiliser.

Configurer le texte à copier

Dans le panneau de droite, tu trouveras la section Content avec trois champs :

Content : c'est le texte exact qui sera copié dans le presse-papier. C'est ce que le visiteur récupérera quand il cliquera sur le bouton. Par exemple : https://www.framer-campus.fr

Label : c'est le texte visible sur le bouton, ce que l'utilisateur voit avant de cliquer. Par exemple : "Copier le lien"

Success : c'est le message qui s'affiche après le clic pour confirmer que la copie a fonctionné. Par exemple : "Copié !"

Utilise un message Success court et explicite. "Copié !" fonctionne mieux que "Le texte a été copié dans votre presse-papier avec succès".

Personnaliser le style du bouton

Tu peux styliser le bouton Copy Clipboard exactement comme n'importe quel autre élément dans Framer.

Couleurs

Utilise Fill pour modifier la couleur de fond et Text pour la couleur du texte. Si tu utilises des variables dans tes composants, tu peux rendre les couleurs dynamiques et cohérentes sur tout ton site.

Typographie

Change la police avec Font, ajuste la taille et la graisse comme pour un bouton classique. Si tu veux utiliser une police personnalisée, le guide d'import de polices sur Framer t'explique la méthode à jour.

Forme

Ajuste le Padding pour l'espace intérieur du bouton et le Radius pour arrondir les coins. Un radius entre 8px et 12px donne un rendu moderne. Un radius à 999px crée un bouton totalement arrondi (style "pill").

Ajouter un effet au survol

Un bouton sans effet hover donne l'impression d'être inactif. L'utilisateur a besoin d'un retour visuel pour savoir que l'élément est cliquable.

Dans la section Hover du panneau de droite, tu peux changer la couleur de fond, modifier l'opacité ou ajouter une légère transformation (scale).

C'est un point souvent négligé, mais essentiel pour l'UX. Si tu veux aller plus loin sur les animations de boutons, le cours sur les boutons animés au survol couvre le sujet en détail.

Utiliser Copy Clipboard avec le CMS Framer

C'est là que le composant devient vraiment puissant.

Si tu as une collection CMS sur Framer (des articles, des ressources, des outils), tu peux connecter le champ Content du composant à un champ CMS.

Par exemple, imagine une page qui liste des templates. Chaque template a son URL. En connectant le champ Content à l'URL du template via le CMS, chaque bouton copie automatiquement la bonne URL sans que tu aies à la saisir manuellement.

Pour ça, ajoute le composant Copy Clipboard dans ton template CMS, puis connecte le champ Content au champ CMS correspondant via le panneau de droite.

Erreurs fréquentes à éviter

Pas de message Success. Sans feedback visuel, l'utilisateur ne sait pas si la copie a fonctionné. Il va recliquer, douter, quitter. Toujours remplir le champ Success.

Un label trop vague. "Cliquer ici" ne dit rien. Préfère "Copier le lien", "Copier le code promo" ou "Copier l'adresse". Le label doit décrire l'action.

Un texte trop long dans Content. Sur mobile, copier un paragraphe entier n'a pas de sens. Le composant est fait pour des textes courts : une URL, un code, une adresse.

Oublier le hover. Un bouton plat, sans aucun changement au survol, semble cassé. Ajoute toujours un effet visuel, même subtil.

Accessibilité et compatibilité

Le composant Copy Clipboard fonctionne sur tous les navigateurs modernes (Chrome, Firefox, Safari, Edge), y compris sur mobile. La seule condition technique est que ton site soit en HTTPS, ce qui est automatiquement le cas pour tous les sites publiés sur Framer.

Quelques points à garder en tête : le bouton doit avoir un contraste suffisant entre le texte et le fond, le message Success doit être visible et lisible, et sur les navigateurs très anciens, la fonctionnalité peut ne pas être supportée (mais ça concerne moins de 1% des utilisateurs aujourd'hui).

Résumé

Tu veux copier un texte en un clic sur Framer :

1. Insère le composant Copy Clipboard depuis Insert > Utility

2. Définis le texte à copier dans Content

3. Personnalise le bouton (couleurs, typo, forme)

4. Ajoute un message Success pour le feedback

5. Configure un effet Hover pour le retour visuel

C'est simple, natif, et ça améliore immédiatement l'expérience sur ton site.

👉 Pour continuer à améliorer ton site, découvre les ressources et templates Framer Campus.