QR Code Reveal permet d’afficher un QR code uniquement lorsque l’utilisateur en a besoin. Une petite icône s’intègre discrètement à votre interface et, au clic, ouvre un panneau contenant un véritable QR code généré en temps réel à partir de l’URL de votre choix.

L’icône peut prendre différentes formes : symbole QR code, icône de scan, image personnalisée ou même un QR code miniature. Le résultat reste épuré et n’encombre pas votre mise en page tant que le panneau n’est pas ouvert.

Fonctionnalités principales

Icône

• Quatre styles d’icône disponibles : QR Code, Scan, Image personnalisée ou QR code en direct

• Taille, padding, rayon des angles, couleur de fond et bordure entièrement personnalisables

• États de survol optionnels pour chaque élément visuel

• Texte cliquable optionnel à côté de l’icône, partageant les mêmes effets de survol

Panneau

• Ouverture depuis la gauche ou la droite sous forme de panneau coulissant pleine hauteur

• Fond assombri pour mettre le contenu en évidence

• Titre, description et texte d’accompagnement entièrement personnalisables

• QR code réel et scannable généré dynamiquement à partir de l’URL fournie

• Taille et couleur du QR code ajustables

• Contrôle de la largeur du panneau, des espacements internes, des couleurs de fond, du texte et de l’overlay

• Card personnalisable avec bordure et rayon des angles

• Adaptation automatique des éléments lorsque l’espace disponible est réduit

• Fermeture via le bouton de fermeture, un clic sur l’overlay ou la touche Échap

Prévisualisation dans Framer

• Option « Preview Panel » disponible uniquement dans le canvas Framer

• Permet de concevoir et ajuster le panneau ouvert directement sur le canvas

• N’a aucun impact sur le comportement du composant une fois publié

Note d'usage

QR Code Reveal adapte automatiquement sa taille à l’icône et au texte associé. Pour modifier les dimensions de l’icône, utilisez le paramètre « Size » plutôt que de redimensionner manuellement le composant.

Le QR code est généré localement, sans dépendance externe ni script tiers, ce qui garantit son fonctionnement même dans les environnements où certains scripts sont bloqués.

Installation

1. Glissez QR Code Reveal sur votre canvas Framer

2. Définissez l’URL vers laquelle le QR code doit pointer

3. Choisissez un style d’icône et personnalisez ses couleurs, espacements et effets de survol

4. Publiez