@athome-solution/feedjet NPM

Feedjet

Installation

Ajoutez la librairie à votre projet en utilisant npm, yarn ou pnpm :

# npm
npm install @athome-solution/feedjet
# yarn
yarn add @athome-solution/feedjet
# pnpm
pnpm add @athome-solution/feedjet

Feedjet Feedback

Feedjet Feedback est une librairie JavaScript permettant d’intégrer un widget de feedback personnalisé à votre application. Elle permet aux utilisateurs de soumettre des problèmes, des suggestions ou des améliorations via un formulaire interactif.

Fonctionnalités

Collecte de feedback utilisateur avec un formulaire personnalisable.
Capture d’écran automatique incluse dans les feedbacks.
Gestion des erreurs de validation.
URL d'API configurable pour s'adapter à votre environnement.

Utilisation

Intégration dans un Framework JS

Ajoutez le widget dans votre projet en initialisant la classe Feedback.

import { Feedback } from '@athome-solution/feedjet'
import '@athome-solution/feedjet/css/feedback.css'

const feedback = new Feedback({
  target: document.getElementById('feedback-widget'),
  projectId: '12345',
  apiUrl: 'https://api.example.com/api/import_feedback',
  user: {
    id: '1',
    fullName: 'John Doe',
  },
})

Ajoutez le conteneur HTML dans votre page :

<div id="feedback-widget"></div>

Le widget sera automatiquement rendu dans le conteneur avec l'ID feedback-widget.

Intégration Nuxt 3/4 (SSR)

import { Feedback } from '@athome-solution/feedjet'
import '@athome-solution/feedjet/css/feedback.css'

const { user } = useAuth()

const feedbackBtn = ref()

watch([feedbackBtn], () => {
  if (!feedbackBtn.value)
    return

  const feedback = new Feedback({
    target: { feedback: feedbackBtn.value.$el },
    projectId: $config.public.feedjetProjectId,
    apiUrl: $config.public.feedjetApiUrl,
    user: () => ({
      id: user.value.id,
      fullName: `${user.value.firstName} ${user.value.lastName}`,
    })
  })
})

<Button ref="feedbackBtn">
  Retour
</Button>

Exemple avec JavaScript Vanilla

Voici un exemple complétement fonctionnel utilisant uniquement du JavaScript Vanilla :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Feedjet Feedback</title>
  <link rel="stylesheet" href="https://unpkg.com/@athome-solution/feedjet/dist/css/feedback.css">
  <script src="https://unpkg.com/@athome-solution/feedjet"></script>
</head>
<body>
  <div id="feedback-widget"></div>

  <script>
    const feedback = new Feedjet.Feedback({
      target: document.getElementById('feedback-widget'),
      projectId: '12345',
      apiUrl: 'https://api.example.com/api/import_feedback',
      user: {
        id: '1',
        fullName: 'John Doe',
      },
    });
  </script>
</body>
</html>

Options disponibles

Paramètres de `Feedback`

interface FeedbackOptions {
  target: HTMLElement | null | undefined | {
    feedback?: HTMLElement | null | undefined
  }
  projectId?: string
  apiUrl?: string
  user?: {
    id: string
    fullName?: string
  } | undefined | (() => ({ id: string, fullName?: string } | undefined))
}

Paramètre	Description	Obligatoire
`target`	L’élément HTML où le widget sera rendu.	Oui
`projectId`	L'identifiant du projet Feedjet.	Oui
`apiUrl`	L'URL de l'API pour envoyer les feedbacks.	Oui
`user`	Les informations de l'utilisateur qui envoie le feedback.	Non

Customisation

Vous pouvez personnaliser le widget en modifiant les variables CSS suivantes :

.fj-feedback-modal.fj-feedback-issue {
  --color: #ff0000; /* Couleur de la bordure haute de la modale */
  --robot-color: #ff0000; /* Couleur du robot dans la modale */
}

.fj-feedback-modal.fj-feedback-enhancement {
  --color: #00ff00; /* Couleur de la bordure haute de la modale */
  --robot-color: #00ff00; /* Couleur du robot dans la modale */
}

Toutes les classes CSS sont préfixées par .fj-feedback- pour éviter les conflits avec d'autres styles.

Feedjet Feedbot

Feedjet Feedbot est une librairie JavaScript permettant d’intégrer un widget de questionnaire Feedbot à votre application. Il permet de collecter des feedbacks utilisateurs à l'aide de questions personnalisées.