Feedback

Feedback-komponenten lar oss få tilbakemelding fra brukerene våre. Det kan gi oss viktig innsikt om brukeropplevelsen, og avdekke ønsker om funksjonalitet.

Eksempler Bruk Kode

Kom i gang

Installer

npm i @fremtind/jkl-feedback-react

Bruk

import { Feedback } from "@fremtind/jkl-feedback-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-feedback/feedback.min.css";

// Feedback bruker flere andre komponenter og trenger stilarkene deres for å fungere.
import "@fremtind/jkl-button/button.min.css";
import "@fremtind/jkl-input-group/input-group.min-css";
import "@fremtind/jkl-message-box/message-box.min.css";
import "@fremtind/jkl-radio-button/radio-button.min.css";
import "@fremtind/jkl-text-input/text-input.min.css";
import "@fremtind/jkl-icons/icons.min.css";
import "@fremtind/jkl-tooltip/tooltip.min.css";

React

Versjon
Dokumentasjon: Readme; Changelog

Live demo

Feedback

<Feedback
  onSubmit={console.log}
  {...PRESETS['Fant du']}
  maxLength={250}
  followup={
    false
      ? [
          {
            type: "radio",
            label: "Hvordan opplevde du å bestille forsikring på nett?",
            name: "opplevelse",
            options: [
              { label: "Enkelt og greit", value: "enkelt" },
              { label: "Midt på treet", value: "ok" },
              { label: "Tungvindt", value: "tungvindt" },
            ],
          },
          {
            type: "checkbox",
            label: "Hva er viktig for deg?",
            name: "viktig",
            options: [
              { label: "At det går raskt å bestille", value: "hurtighet" },
              { label: "God informasjon", value: "info" },
              { label: "At det ser fint ut", value: "utseende" },
              { label: "At forsikringen er billig", value: "pris" },
            ],
          },
          {
            type: "text",
            label: "Er det noe mer du vil legge til?",
            name: "annet",
          },
        ]
      : undefined
  }
  contactQuestion={
    false
      ? {
          withPhone: true,
          label: "Vil du være med å teste sidene våre?",
          children:
            "Vi gjennomfører jevnlig tester og intervjuer for å forbedre løsningene våre (ca. 30 minutter). Som takk for hjelpen får du et gavekort. Legg igjen din e-postadresse hvis du er interessert.",
          sendButtonLabel: "Skriv meg opp!",
          onSubmit: console.info,
        }
      : undefined
  }
/>

Innsending av data

Du må selv sende inn funksjoner for å håndtere innsending av data. Komponenten sørger for at de blir kalt på riktig tidspunkt:

når brukeren trykker send inn
hvis de forlater siden etter å ha tatt valg i skjemaet.

Du må selv koble opp mot ditt ønskede feedback-endepunkt med eventuell vasking og/eller transformering av data.

Hovedspørsmål

Funksjonen for håndtering av hovedspørmålet får inn et objekt med verdien fra hovedspørsmålet, samt den eventuelle skriftlige tilbakemeldingen:

{ value: string | number; message?: string }

Oppfølgingsspørsmål

Funksjonen for håndtering av oppfølgingsspørmål får inn en liste med objekter etter hvor mange spørsmål som er besvart. Objektene inneholder informasjon om feltet, og verdien eller verdiene som er valgt:

[
  { 
    label: string;
    name: string; type: "radio" | "checkbox" | "text";
    value: string | string[] 
  }
]

React API

Her finner du en oversikt over props på komponentene i pakken.