Copier un lien, un code, un texte ou une information en un clic est devenu un standard d’expérience utilisateur.
Sur Framer, c’est possible sans code grâce au composant Copy Clipboard.

Dans ce guide, tu vas apprendre à créer un bouton qui copie automatiquement un texte dans le presse papier quand l’utilisateur clique dessus.

Aucun code.
Aucune intégration externe.
Résultat propre et professionnel.

Pourquoi utiliser un bouton copier dans le presse papier

Un bouton de copie améliore immédiatement l’UX dans plusieurs cas :

• partager une URL
• copier un code promo
• récupérer un lien de ressource
• copier une commande ou un snippet
• faciliter l’action sur mobile
• réduire les erreurs de sélection manuelle

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

Où se trouve le bouton Copy Clipboard dans Framer

Dans l’éditeur Framer :

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

C’est un composant natif Framer, donc totalement fiable et rapide.

Comment fonctionne le composant Copy Clipboard

Le composant a un seul rôle
Copier un texte précis dans le presse papier au clic

Tu définis le texte à copier et Framer s’occupe du reste.

Aucune logique à construire.
Aucune interaction à créer.

Paramétrer le texte à copier

Dans le panneau de droite, section Content :

• Content
C’est le texte exact qui sera copié dans le presse papier
Exemple : https://www.framer-campus.fr

• Label
C’est le texte visible sur le bouton
Exemple : Copier le lien

• Success
C’est le message affiché après le clic
Exemple : Copié !

Astuce :
Utilise un message court, ça rend l’interaction plus fluide.

Personnaliser le style du bouton

Tu peux styliser le bouton comme n’importe quel élément Framer.

Couleurs

• Fill pour la couleur de fond
• Text pour la couleur du texte

Typographie

• Font pour choisir la police
• Taille et graisse comme un bouton normal

Et si tu ne sais pas comment importer une police custom : Le guide est ici

Forme

• Padding pour l’espace intérieur
• Radius pour arrondir le bouton

Ajouter un effet hover

Dans la section Hover, tu peux :

• changer la couleur de fond
• modifier l’opacité
• donner un effet interactif plus vivant

C’est fortement recommandé pour le feedback utilisateur.

Cas d’usage concrets

Voici quelques idées d’utilisation :

• bouton copier l’URL d’un article
• bouton copier un prompt IA
• bouton copier un code promo
• bouton copier une adresse mail
• bouton copier une commande terminal
• bouton copier un lien d’affiliation

Bonnes pratiques UX

• ne copie jamais sans feedback
• affiche toujours le message Success
• garde un texte clair sur le bouton
• utilise un bouton bien visible
• évite les textes trop longs à copier sur mobile

Résumé rapide

Tu veux copier un texte en un clic sur Framer :

1. Utilise Copy Clipboard

2. Définis le texte dans Content

3. Personnalise le bouton

4. Ajoute un message Success

Et ton UX passe instantanément au niveau supérieur !