Badge AI est un badge discret permettant d’indiquer quel outil d’IA a contribué à la conception, au développement ou à la rédaction de votre site. Il utilise les logos officiels des plateformes prises en charge, plutôt que des icônes génériques.

Choisissez parmi 13 outils d’IA populaires, puis sélectionnez le niveau de visibilité souhaité : icône seule, icône accompagnée du nom, ou logo complet. Le badge s’adapte automatiquement aux couleurs et proportions officielles de chaque marque, avec la possibilité d’utiliser un mode monochrome personnalisé.

Tous les aspects visuels du badge sont personnalisables afin de s’intégrer naturellement à votre design : couleurs, bordures, rayon des angles, typographie, espacements, dimensions et bien plus encore.

Features

Fournisseurs et styles

• 13 fournisseurs d’IA avec leurs logos et identités visuelles officielles : Claude, ChatGPT, Gemini, Grok, DeepSeek, Mistral AI, Perplexity, Codex, Midjourney, GitHub Copilot, Cursor, Meta AI et Copilot

• Trois modes d’affichage : Icône, Icône + Nom ou Logo complet

• Mode monochrome avec couleur personnalisable indépendamment

• Message personnalisable pour chaque fournisseur ou texte entièrement libre

Couleurs et typographie

• Thèmes clair et sombre intégrés

• Couleurs entièrement personnalisables, y compris pour les états de survol

• Contrôle complet de la typographie pour le texte principal et le nom du fournisseur

Lien et mise en page

• Lien optionnel avec effets de survol activés uniquement lorsque le badge est cliquable

• Réglages de l’espacement interne, des marges, du rayon des angles et de l’ombre

• Dimensionnement automatique pour s’adapter à tous les types de mises en page

Note d'usage

Badge AI s’intègre aussi bien dans un footer que dans une section hero, une page à propos ou toute autre zone de votre site. Par défaut, les couleurs suivent le thème sélectionné afin de conserver une cohérence visuelle, même en cas de changement de thème ultérieur.

Installation

1. Glissez Badge AI sur votre canvas Framer

2. Sélectionnez un fournisseur d’IA et un mode d’affichage

3. Personnalisez les couleurs, la typographie et les espacements

4. Publiez