Rask start (5 min)

Kom i gang med Lumi-widgeten i din app på under 5 minutter. Du trenger tilgang til dashboardet, og team-admin-rollen for å opprette API-nøkler. Har du ikke team-admin, be en team-admin i teamet ditt gjøre steg 2 og gi deg nøkkelen.

1. Logg inn i dashboardet

Åpne dashboardet og logg inn med din OIDC-konto (samme som du bruker for andre interne systemer).

2. Hent en API-nøkkel

1. Gå til Innstillinger → API-nøkler i venstremenyen (krever team-admin)
2. Klikk Ny nøkkel
3. Velg type Publishable (pk) og gi nøkkelen et beskrivende navn, f.eks. min-app-prod
4. Legg til minst én tillatt opprinnelse — URL-en appen din kjører på, f.eks. https://app.din-bedrift.no. Publishable keys er origin-låst og avvises fra andre opprinnelser.
5. Klikk Opprett — kopier nøkkelen som vises (lumi_pk_live_...)

Kun én gang

Nøkkelen vises bare én gang ved opprettelse. Lagre den trygt, f.eks. som en miljøvariabel.

3. Installer widget-pakken

Lumi-widgeten er en React-komponent distribuert via npm:

npm install @lumianalytics/survey

React-integrasjon i dag

Widgeten leveres som en ESM React-komponent. En framework-agnostisk script-tag (web component) er under vurdering, men er foreløpig ikke tilgjengelig.

4. Rendre widgeten

Importer LumiSurveyDock og send publishable key-en (lumi_pk_...) via en transport:

import {
  LumiSurveyDock,
  DEFAULT_SURVEY_RATING,
  type LumiSurveyTransport,
} from "@lumianalytics/survey";
import "@lumianalytics/survey/styles.css";

const transport: LumiSurveyTransport = {
  async submit(submission) {
    const res = await fetch("https://lumi.din-bedrift.no/api/v1/submission", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Api-Key": "lumi_pk_live_...",
      },
      body: JSON.stringify(submission.transportPayload),
    });
    // fetch resolverer også på 403/500 — kast slik at widgeten viser
    // feiltilstand i stedet for falsk suksess.
    if (!res.ok) {
      throw new Error(`Innsending avvist: ${res.status}`);
    }
  },
};

export function App() {
  return (
    <LumiSurveyDock
      surveyId="min-survey-id"
      survey={DEFAULT_SURVEY_RATING}
      transport={transport}
    />
  );
}

Se Installer widget for detaljer og preset-oversikt.

5. Se data i dashboardet

Når en bruker fyller ut surveyen, vises svarene umiddelbart under Dashboard → [ditt team] i Lumi-dashboardet. Filtrer på tidsperiode, spørsmål og konteksttagger.

---

Neste steg

• Installer widget — full installasjonsveiledning med npm-pakken
• Konfigurer survey — spørsmålstyper og logikk
• Produksjonsherdning — origin-validering og nøkkelrotasjon
• Distribuer Lumi — sett opp Lumi på egen infrastruktur