Installer widget

Denne siden viser deg hvordan du installerer lumi-survey og får widgeten til å rendre i appen din.

1. Installer pakken

npm install lumi-survey

2. Importer CSS

Importer stilarkene i appens entry-punkt (f.eks. main.tsx, App.tsx eller layout-filen din):

import "lumi-survey/styles.css";

3. Rendre widgeten

Enterprise: API-nøkkel (anbefalt)

Med API-nøkkel sender widgeten svar direkte til Lumi API fra nettleseren. Ingen backend-ruting nødvendig.

import {
  LumiSurveyDock,
  DEFAULT_SURVEY_RATING,
  type LumiSurveyTransport,
} from "lumi-survey";

const transport: LumiSurveyTransport = {
  async submit(submission) {
    await fetch("https://lumi.din-bedrift.no/api/v1/submission", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Api-Key": "lumi_pk_live_...",  // din public key
      },
      body: JSON.stringify(submission.transportPayload),
    });
  },
};

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

Bruk kun pk_ (public key) i frontend-kode

pk_-nøkler er ment for bruk i nettleseren. De kan kun sende inn svar (POST /api/v1/submission). Bruk aldri sk_-nøkler (secret keys) i frontend — de gir admin-tilgang.

Opprett API-nøkler

API-nøkler opprettes via admin-API-et. Se API-endepunkter for detaljer.

For NAIS-kunder: Token exchange

På NAIS sender widgeten til ditt eget endepunkt, som gjør token exchange og videresender til Lumi API:

import {
  LumiSurveyDock,
  DEFAULT_SURVEY_RATING,
  type LumiSurveyTransport,
} from "lumi-survey";

const transport: LumiSurveyTransport = {
  async submit(submission) {
    await fetch("/api/lumi/feedback", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(submission.transportPayload),
    });
  },
};

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

Transport-endepunktet

/api/lumi/feedback i eksempelet over er ditt eget endepunkt. Det mottar payloaden fra widgeten, gjør token exchange, og videresender til Lumi API. Vi setter opp dette i Koble til backend.

Nøkkelkonsepter

• surveyId — en unik identifikator for surveyen din (f.eks. "soknad-kvittering")
• survey — konfigurasjonen for spørsmålene. Her bruker vi den ferdiglagde DEFAULT_SURVEY_RATING-preseten
• transport — et objekt med en submit-funksjon som sender data. Widgeten kaller denne med submission.transportPayload som inneholder alle svar

Verifiser at det fungerer

Når du starter appen din bør du se en survey-widget nederst på siden. Den viser en emoji-rating med valgfri fritekst — det er DEFAULT_SURVEY_RATING-preseten.

Neste steg

Widgeten kjører! Gå videre til Konfigurer survey for å velge riktig surveytype for ditt behov.