All posts
Comment ajouter un widget de feedback à Next.js, React et Vue (étape par étape)
·6 min

Comment ajouter un widget de feedback à Next.js, React et Vue (étape par étape)

Un guide pratique et spécifique par framework pour ajouter un widget de feedback client à votre application Next.js, React ou Vue en moins de 2 minutes.

Alexis Bouchez
X·LinkedIn·alexisbouchez.com

Vous voulez collecter les retours de vos utilisateurs directement dans votre application web ? Un widget de feedback est la solution la plus simple et la plus efficace.

Dans ce guide, nous allons voir comment intégrer le widget Palmframe dans les frameworks les plus populaires : Next.js, React, Vue, Nuxt, Svelte, SvelteKit, et même en HTML classique. Quelle que soit votre stack, l'intégration prend moins de 2 minutes.

Avant de commencer

Avant d'intégrer le widget, vous avez besoin de deux choses :

  1. Un compte Palmframe — Inscrivez-vous sur palmframe.com si ce n'est pas déjà fait
  2. Un identifiant de projet — Créez un projet dans votre tableau de bord Palmframe et notez son identifiant (format : mon-projet)

Le widget Palmframe est un web component standard (). Il fonctionne avec n'importe quel framework car il utilise le Shadow DOM et n'interfère pas avec votre application. Aucune dépendance npm à installer.

Next.js

Next.js est le framework React le plus utilisé. L'intégration diffère légèrement entre l'App Router et le Pages Router.

App Router (Next.js 13+)

Avec l'App Router, le plus simple est de charger le widget dans votre layout principal.

Créez un composant client pour le widget :

// components/feedback-widget.tsx
"use client";

import { useEffect } from "react";

export function FeedbackWidget() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://cdn.palmframe.com/embed.js";
    script.defer = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    // @ts-expect-error - web component
    <palmframe-widget project="votre-projet"></palmframe-widget>
  );
}

Puis ajoutez-le à votre layout :

// app/layout.tsx
import { FeedbackWidget } from "@/components/feedback-widget";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="fr">
      <body>
        {children}
        <FeedbackWidget />
      </body>
    </html>
  );
}

Pages Router

Avec le Pages Router, utilisez le composant Script de Next.js dans votre fichier _app.tsx :

// pages/_app.tsx
import type { AppProps } from "next/app";
import Script from "next/script";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      {/* @ts-expect-error - web component */}
      <palmframe-widget project="votre-projet"></palmframe-widget>
      <Script
        src="https://cdn.palmframe.com/embed.js"
        strategy="lazyOnload"
      />
    </>
  );
}

La stratégie lazyOnload garantit que le script du widget est chargé après le contenu principal de la page, sans affecter les performances.

React (Vite / CRA)

Pour une application React classique (créée avec Vite, Create React App, ou autre), l'intégration est directe.

Méthode 1 : Via le fichier HTML

La méthode la plus simple est d'ajouter le widget directement dans votre fichier index.html :

<!-- index.html -->
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mon Application</title>
  </head>
  <body>
    <div id="root"></div>
    <palmframe-widget project="votre-projet"></palmframe-widget>
    <script src="https://cdn.palmframe.com/embed.js" defer></script>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Méthode 2 : Via un composant React

Si vous préférez contrôler le widget depuis React (par exemple pour le conditionner à l'authentification de l'utilisateur) :

// components/FeedbackWidget.tsx
import { useEffect } from "react";

export function FeedbackWidget() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://cdn.palmframe.com/embed.js";
    script.defer = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    // @ts-expect-error - web component
    <palmframe-widget project="votre-projet"></palmframe-widget>
  );
}

Puis dans votre App.tsx :

// App.tsx
import { FeedbackWidget } from "./components/FeedbackWidget";

function App() {
  return (
    <div>
      {/* Votre application */}
      <FeedbackWidget />
    </div>
  );
}

export default App;

Vue 3

Vue gère nativement les web components, ce qui rend l'intégration particulièrement simple.

Configuration de Vue

D'abord, indiquez à Vue de ne pas traiter palmframe-widget comme un composant Vue. Dans votre vite.config.ts :

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "palmframe-widget",
        },
      },
    }),
  ],
});

Ajout du widget

Ajoutez le script dans votre index.html :

<!-- index.html -->
<script src="https://cdn.palmframe.com/embed.js" defer></script>

Puis ajoutez le composant dans votre App.vue :

<!-- App.vue -->
<template>
  <div id="app">
    <router-view />
    <palmframe-widget project="votre-projet"></palmframe-widget>
  </div>
</template>

C'est tout. Le widget est fonctionnel.

Nuxt 3

Nuxt 3 simplifie encore les choses grâce à sa configuration automatique.

Configuration

Dans votre nuxt.config.ts, ajoutez le script et la configuration des éléments personnalisés :

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://cdn.palmframe.com/embed.js",
          defer: true,
        },
      ],
    },
  },
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag === "palmframe-widget",
    },
  },
});

Ajout du widget

Dans votre app.vue :

<!-- app.vue -->
<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
    <palmframe-widget project="votre-projet"></palmframe-widget>
  </div>
</template>

Svelte / SvelteKit

Svelte reconnaît automatiquement les web components (éléments avec un tiret dans le nom), donc aucune configuration spéciale n'est nécessaire.

SvelteKit

Dans votre layout principal :

<!-- src/routes/+layout.svelte -->
<svelte:head>
  <script src="https://cdn.palmframe.com/embed.js" defer></script>
</svelte:head>

<slot />

<palmframe-widget project="votre-projet"></palmframe-widget>

Svelte (sans SvelteKit)

Ajoutez le script dans votre index.html et le composant dans votre App.svelte :

<!-- src/App.svelte -->
<main>
  <!-- Votre application -->
</main>

<palmframe-widget project="votre-projet"></palmframe-widget>

HTML classique

Pas de framework ? Pas de problème. Le widget fonctionne avec du HTML pur :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mon Site</title>
  </head>
  <body>
    <h1>Bienvenue sur mon site</h1>

    <!-- Widget Palmframe -->
    <palmframe-widget project="votre-projet"></palmframe-widget>
    <script src="https://cdn.palmframe.com/embed.js" defer></script>
  </body>
</html>

Deux lignes de code. Votre widget de feedback est opérationnel.

Configuration du widget

Le widget Palmframe accepte plusieurs attributs pour personnaliser son comportement :

`project` (obligatoire)

L'identifiant de votre projet Palmframe. C'est le seul attribut obligatoire.

<palmframe-widget project="mon-projet"></palmframe-widget>

`position`

Contrôle la position du bouton de feedback sur l'écran. Quatre options sont disponibles :

  • bottom-right (par défaut)
  • bottom-left
  • top-right
  • top-left
<palmframe-widget
  project="mon-projet"
  position="bottom-left"
></palmframe-widget>

`lang`

Définit la langue de l'interface du widget. Langues supportées : en (anglais, par défaut) et fr (français).

<palmframe-widget
  project="mon-projet"
  lang="fr"
></palmframe-widget>

`mode`

Permet de basculer entre le mode production et le mode test. En mode test, les feedbacks sont marqués comme tels et peuvent être filtrés dans le tableau de bord.

  • live (par défaut) — Les feedbacks sont enregistrés normalement
  • test — Les feedbacks sont marqués comme des tests
<palmframe-widget
  project="mon-projet"
  mode="test"
></palmframe-widget>

`api-url`

Par défaut, le widget envoie les données à https://www.palmframe.com. Si vous utilisez une instance self-hosted ou un environnement de staging, vous pouvez modifier l'URL de l'API :

<palmframe-widget
  project="mon-projet"
  api-url="https://staging.palmframe.com"
></palmframe-widget>

Exemple complet avec tous les attributs

<palmframe-widget
  project="mon-projet"
  position="bottom-right"
  lang="fr"
  mode="live"
></palmframe-widget>
<script src="https://cdn.palmframe.com/embed.js" defer></script>

Tester votre intégration

Une fois le widget installé, voici comment vérifier que tout fonctionne :

  1. Ouvrez votre application dans le navigateur. Vous devriez voir le bouton de feedback dans le coin de l'écran (en bas à droite par défaut)
  1. Cliquez sur le bouton pour ouvrir le formulaire de feedback
  1. Soumettez un feedback de test — Choisissez un sentiment et tapez un message. Pensez à utiliser mode="test" pendant le développement
  1. Vérifiez dans votre tableau de bord Palmframe que le feedback apparaît bien dans la liste
  1. Testez sur mobile — Le widget est responsive et s'adapte automatiquement aux petits écrans

Problèmes courants

Le widget ne s'affiche pas

  • Vérifiez que le script est bien chargé — Ouvrez les outils de développement de votre navigateur (onglet Network) et vérifiez que embed.js est téléchargé avec un statut 200
  • Vérifiez l'attribut project — L'identifiant du projet doit correspondre exactement à celui de votre tableau de bord Palmframe
  • Vérifiez l'ordre des éléments — Le tag doit être présent dans le DOM avant ou en même temps que le script s'exécute. L'attribut defer gère cela automatiquement

Le feedback n'arrive pas dans le tableau de bord

  • Vérifiez la console du navigateur — Des erreurs CORS ou réseau apparaîtront ici
  • Vérifiez le mode — Si vous êtes en mode="test", assurez-vous de filtrer les feedbacks de test dans votre tableau de bord
  • Vérifiez votre connexion — Le widget a besoin d'une connexion internet pour envoyer les feedbacks

Conflit de style avec votre application

Le widget utilise le Shadow DOM, ce qui signifie que vos styles CSS ne peuvent pas affecter le widget, et inversement. Si vous constatez un problème visuel, c'est probablement lié au z-index. Assurez-vous qu'aucun élément de votre application n'a un z-index supérieur à celui du widget.

TypeScript signale une erreur sur le web component

Si TypeScript ne reconnaît pas , ajoutez cette déclaration de type :

// types/palmframe.d.ts
declare namespace JSX {
  interface IntrinsicElements {
    "palmframe-widget": React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement> & {
        project: string;
        position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
        lang?: "en" | "fr";
        mode?: "live" | "test";
        "api-url"?: string;
      },
      HTMLElement
    >;
  }
}

Ou plus simplement, utilisez le commentaire // @ts-expect-error comme montré dans les exemples ci-dessus.

Conclusion

Ajouter un widget de feedback à votre application est l'une des actions les plus simples et les plus impactantes que vous puissiez prendre pour améliorer votre produit.

Quel que soit votre framework — Next.js, React, Vue, Nuxt, Svelte ou HTML classique — l'intégration du widget Palmframe ne prend que quelques lignes de code et moins de 2 minutes.

Une fois installé, vous commencerez à recevoir des retours concrets de vos utilisateurs. Des retours qui vous aideront à prioriser les bonnes fonctionnalités, à corriger les vrais problèmes, et à construire un produit que vos utilisateurs adorent.

Créez votre compte Palmframe et commencez à collecter du feedback dès aujourd'hui.

Want to start collecting feedback? Try Palmframe for free — takes 2 minutes to set up.