Installation du widget de feedback

Le widget de feedback d'Almirant permet aux utilisateurs de votre application d'envoyer des retours directement à votre projet. Les retours arrivent sous forme d'éléments dans le tableau d'idées d'Almirant, où vous pouvez les trier, les prioriser et les convertir en éléments de travail.

Vous pouvez l'installer de deux façons : avec une balise script (pour tout site web) ou avec le package React/Next.js.

Balise script (HTML)

La méthode la plus simple. Elle fonctionne sur tout site web, quel que soit le framework.

1. Obtenir la clé publique

Accédez à Configuration > Intégrations > Feedback Widget dans votre projet Almirant
Copiez la clé publique (pk_...)

2. Ajouter le script

Ajoutez ces lignes avant la balise fermante </body> de votre HTML :

<script src="https://cdn.almirant.ai/feedback-widget.iife.js"></script>
<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    position: 'bottom-right',
    theme: 'auto',
  });
</script>

C'est tout. Un bouton flottant apparaîtra dans l'angle inférieur droit de votre site. En cliquant dessus, un formulaire permettant d'envoyer des retours s'ouvre.

Exemple HTML complet

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon application</title>
</head>
<body>
  <h1>Bienvenue dans mon application</h1>

  <!-- Widget de feedback Almirant -->
  <script src="https://cdn.almirant.ai/feedback-widget.iife.js"></script>
  <script>
    FeedbackWidget.init({
      publicKey: 'pk_tu_clave_publica',
      position: 'bottom-right',
      theme: 'auto',
    });
  </script>
</body>
</html>

React / Next.js

Si votre application utilise React ou Next.js, vous pouvez utiliser le package officiel, qui comprend un composant et un hook.

1. Installer le package

bun add @almirant/feedback-react

Ou avec npm :

npm install @almirant/feedback-react

2. Utiliser le composant

import { FeedbackWidget } from '@almirant/feedback-react';

export default function App() {
  return (
    <>
      <main>
        <h1>Mon application</h1>
      </main>

      <FeedbackWidget
        publicKey="pk_tu_clave_publica"
        position="bottom-right"
        theme="auto"
      />
    </>
  );
}

Utilisation avec Next.js App Router

Dans Next.js avec App Router, placez le widget dans votre layout racine afin qu'il soit disponible sur toutes les pages :

// app/layout.tsx
import { FeedbackWidget } from '@almirant/feedback-react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        {children}
        <FeedbackWidget
          publicKey="pk_tu_clave_publica"
          position="bottom-right"
          theme="auto"
        />
      </body>
    </html>
  );
}

Remarque

Le composant FeedbackWidget est rendu uniquement côté client. Il n'est pas nécessaire d'utiliser 'use client' dans le layout ; le composant le gère déjà en interne.

Utilisation avec Next.js Pages Router

// pages/_app.tsx
import { FeedbackWidget } from '@almirant/feedback-react';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <FeedbackWidget
        publicKey="pk_tu_clave_publica"
        position="bottom-right"
        theme="auto"
      />
    </>
  );
}

Options de configuration

La balise script et le composant React acceptent les mêmes options :

Option	Type	Valeur par défaut	Description
`publicKey`	`string`	-- (obligatoire)	Clé publique de votre projet (`pk_...`)
`position`	`string`	`'bottom-right'`	Position du bouton : `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'`
`theme`	`string`	`'auto'`	Thème visuel : `'light'`, `'dark'`, `'auto'` (détecte la préférence système)

Conseil

Utilisez theme: 'auto' afin que le widget s'adapte automatiquement au mode clair ou sombre du navigateur de l'utilisateur. Si votre application dispose de son propre sélecteur de thème, vous pouvez transmettre 'light' ou 'dark' dynamiquement.

Pour les options avancées de personnalisation visuelle, consultez la page Personnalisation.

Balise script (HTML)​

1. Obtenir la clé publique​

2. Ajouter le script​

Exemple HTML complet​

React / Next.js​

1. Installer le package​

2. Utiliser le composant​

Utilisation avec Next.js App Router​

Utilisation avec Next.js Pages Router​

Options de configuration​