Personnalisation du widget de feedback

Le widget s'adapte visuellement à votre application grâce aux options de configuration. Vous pouvez modifier les couleurs, les textes, la position et le comportement responsive.

Options de configuration complètes

Option	Type	Valeur par défaut	Description
publicKey	string	-- (obligatoire)	Clé publique de votre projet
position	string	'bottom-right'	Position du bouton : 'bottom-right', 'bottom-left', 'top-right', 'top-left'
theme	string	'auto'	Thème visuel : 'light', 'dark', 'auto'
accentColor	string	'#6366f1'	Couleur principale du widget (bouton, bordures, liens)
labels	object	Voir ci-dessous	Textes personnalisables du widget
labels.title	string	'Envoyer des retours'	Titre du formulaire
labels.placeholder	string	'Décrivez votre idée ou votre problème...'	Texte indicatif du champ de texte
labels.submitButton	string	'Envoyer'	Texte du bouton d'envoi
labels.successMessage	string	'Merci pour vos retours'	Message après un envoi réussi
labels.triggerButton	string	'Feedback'	Texte du bouton flottant
showTriggerLabel	boolean	true	Afficher le texte à côté de l'icône du bouton flottant
zIndex	number	9999	z-index CSS du widget
metadata	object	{}	Données supplémentaires envoyées avec chaque retour (utilisateur, page, etc.)

Personnalisation visuelle

Couleur d'accentuation

accentColor définit la couleur principale du widget. Elle s'applique au bouton flottant, aux bordures de focus et au bouton d'envoi.

<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    accentColor: '#e11d48',
  });
</script>

Dans React :

<FeedbackWidget
  publicKey="pk_tu_clave_publica"
  accentColor="#e11d48"
/>

Textes personnalisés

Personnalisez tous les textes du widget pour les adapter à votre marque ou à votre langue :

<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    labels: {
      title: 'Dites-nous ce que vous pensez',
      placeholder: 'Écrivez votre suggestion ici...',
      submitButton: 'Envoyer la suggestion',
      successMessage: 'Bien reçu. Merci de nous aider à nous améliorer.',
      triggerButton: 'Suggestions',
    },
  });
</script>

Dans React :

<FeedbackWidget
  publicKey="pk_tu_clave_publica"
  labels={{
    title: 'Dites-nous ce que vous pensez',
    placeholder: 'Écrivez votre suggestion ici...',
    submitButton: 'Envoyer la suggestion',
    successMessage: 'Bien reçu. Merci de nous aider à nous améliorer.',
    triggerButton: 'Suggestions',
  }}
/>

Bouton flottant

Contrôlez l'apparence et la position du bouton qui active le widget :

<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    position: 'bottom-left',
    showTriggerLabel: false,    // Affiche uniquement l'icône, sans texte
  });
</script>

Les positions disponibles sont :

Valeur	Description
'bottom-right'	Angle inférieur droit (valeur par défaut)
'bottom-left'	Angle inférieur gauche
'top-right'	Angle supérieur droit
'top-left'	Angle supérieur gauche

z-index

Si le widget est masqué derrière d'autres éléments de votre interface, ajustez zIndex :

<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    zIndex: 50000,
  });
</script>

Métadonnées personnalisées

Vous pouvez envoyer des données supplémentaires avec chaque retour afin de faciliter le tri. Les métadonnées sont jointes à l'élément d'idées dans Almirant.

<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    metadata: {
      userId: '12345',
      plan: 'enterprise',
      page: window.location.pathname,
    },
  });
</script>

Dans React, vous pouvez transmettre des métadonnées dynamiques :

function App() {
  const { user } = useAuth();

  return (
    <FeedbackWidget
      publicKey="pk_tu_clave_publica"
      metadata={{
        userId: user?.id,
        email: user?.email,
        plan: user?.plan,
        page: window.location.pathname,
      }}
    />
  );
}

Conseil

Incluez au minimum userId et la page actuelle dans les métadonnées. Vous pourrez ainsi associer les retours à des utilisateurs précis et savoir depuis quelle partie de l'application ils ont été envoyés.

Comportement responsive

Le widget s'adapte automatiquement aux différentes tailles d'écran :

Écran	Comportement
Ordinateur (> 768px)	Le formulaire s'ouvre dans un popover à côté du bouton flottant
Tablette (481px - 768px)	Le formulaire s'ouvre centré avec un overlay semi-transparent
Mobile (< 480px)	Le formulaire occupe toute la largeur sous la forme d'un panneau inférieur (bottom sheet)

Le bouton flottant conserve sa position à toutes les résolutions. Sur mobile, showTriggerLabel est désactivé automatiquement afin de gagner de la place.

Remarque

Vous n'avez rien à faire pour que le widget soit responsive. Il s'adapte automatiquement selon le viewport de l'appareil.

Mode sombre

Avec theme: 'auto', le widget détecte la préférence du système d'exploitation (prefers-color-scheme) et s'adapte.

Si votre application possède son propre sélecteur de thème, vous pouvez le contrôler directement :

function App() {
  const { theme } = useTheme(); // votre hook de thème

  return (
    <FeedbackWidget
      publicKey="pk_tu_clave_publica"
      theme={theme} // 'light' ou 'dark'
    />
  );
}

Exemple complet

<script src="https://cdn.almirant.ai/feedback-widget.iife.js"></script>
<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    position: 'bottom-right',
    theme: 'auto',
    accentColor: '#2563eb',
    showTriggerLabel: true,
    zIndex: 9999,
    labels: {
      title: 'Votre avis compte',
      placeholder: 'Que pouvons-nous améliorer ?',
      submitButton: 'Envoyer',
      successMessage: 'Merci. Vos retours ont été enregistrés.',
      triggerButton: 'Feedback',
    },
    metadata: {
      page: window.location.pathname,
      userAgent: navigator.userAgent,
    },
  });
</script>