API

Pakkens default export er SDK-singleton’en. Brug den direkte — der er ingen new.

import magicfeedback from "@magicfeedback/native";

init(options?)

Konfigurerer SDK’et. Kald én gang før alle andre metoder.

magicfeedback.init({
  env: "prod",
  debug: false,
  dryRun: false,
});

Option	Type	Default	Beskrivelse
env	"prod" | "dev"	"prod"	Vælger produktions- eller dev-API-host.
debug	boolean	false	Slår SDK-log til i konsollen.
dryRun	boolean	false	Indlæser og navigerer formularer uden at indsende feedback eller hente followups.

dryRun er den sikreste måde at QA’e en undersøgelse på, før du giver den til en klient.

form(appId, publicKey, profile?, metadata?)

Opretter en form-instans bundet til en integration.

const form = magicfeedback.form("APP_ID", "PUBLIC_KEY");

Valgfri profile og metadata prepende på hver indsendelse af denne form.

session(sessionId)

Genoptager en eksisterende session.

const form = magicfeedback.session("SESSION_ID");

Returnerer samme Form-type som form(...) — render den med form.generate(...).

send(appId, publicKey, feedback, completed?, id?, privateKey?)

Indsender feedback direkte uden at rendere UI. Brug det når du ejer UI’et og bare vil have SDK’et til at levere svarene.

await magicfeedback.send(
  "APP_ID",
  "PUBLIC_KEY",
  {
    text: "",
    answers: [
      { key: "nps", value: ["9"] },
      { key: "favorite-feature", value: ["Conditional logic"] },
    ],
    metadata: [{ key: "source", value: ["pricing-page"] }],
    metrics:  [{ key: "plan",   value: ["pro"] }],
    profile:  [{ key: "email",  value: ["user@example.com"] }],
  },
  true, // completed
);

completed: false er tænkt til partielle gem af multi-step-flows.

previewPage(selector, input, options?)

Renderer én side (med dens spørgsmål) fra creatoren uden at ramme API’en og uden at persistere svar. Bruges af MagicFeedback-dashboardet til live previews.

await magicfeedback.previewPage("preview-root", {
  page: { /* side-definition */ },
  language: "da",
});

dryRun er aktiveret internt — der sendes ingen POST /feedback.

---

Form-metoder

Objektet returneret af form(...) og session(...).

form.generate(containerId, options?)

Renderer formularen ind i DOM-elementet med det givne id (ikke en CSS-selektor).

await form.generate("survey-root", {
  addButton: true,
  sendButtonText: "Send",
  backButtonText: "Tilbage",
  nextButtonText: "Næste",
  startButtonText: "Kør!",
  addSuccessScreen: true,
  successMessage: "Tak for din feedback!",
  questionFormat: "standard",
  getMetaData: true,
  customMetaData: [
    { key: "customer-id", value: ["acme-42"] },
    { key: "plan",        value: ["enterprise"] },
  ],
  autofocus: "navigation",
  onLoadedEvent:     ({ formData, progress, total, error }) => {},
  beforeSubmitEvent: ({ progress, total }) => {},
  afterSubmitEvent:  ({ response, progress, total, completed, followup, error }) => {},
  onBackEvent:       ({ progress, followup, error }) => {},
});

Option	Default	Beskrivelse
addButton	true	Renderer indbyggede action-knapper. Slå fra for selv at styre navigation (behold en Næste-knap, se Automatisk videre).
sendButtonText	"Send"	Label på den endelige submit-knap.
backButtonText	"Back"	Label på tilbage-knappen.
nextButtonText	"Next"	Label på næste-knappen i multi-step-flows.
startButtonText	"Go!"	Label på start-knappen når formularen har en backend-startbesked.
addSuccessScreen	true	Viser indbygget success-visning ved flow-afslutning.
successMessage	"Thank you for your feedback!"	Brugerdefineret success-tekst.
questionFormat	"standard"	"standard" eller "slim". Se Customization.
getMetaData	true	Appender browser- og side-metadata automatisk.
customMetaData	[]	Ekstra metadata fusioneret ind i feedback.metadata.
onLoadedEvent	undefined	Kaldes efter formular eller start-skærm er klar.
beforeSubmitEvent	undefined	Kaldes før en side indsendes.
afterSubmitEvent	undefined	Kaldes efter side-indsendelse, followup-render eller endelig færdiggørelse.
onBackEvent	undefined	Kaldes efter tilbage-navigation.
autofocus	false	"always" eller "navigation". Sætter fokus i sidens første spørgsmål, når det er et tekstfelt. Se Fokus på tekstspørgsmål.

Når getMetaData: true tilføjer SDK’et: nuværende URL, origin, pathname, query string, user agent, browsersprog, platform, app-metadata, skærmstørrelse og session-id ved render fra session(). Query params udvides som query-<param>.

Fokus på tekstspørgsmål

Tilgængelig fra 2.2.31.

Med autofocus placeres markøren i sidens første spørgsmål, når det er et tekstfelt: TEXT, LONGTEXT, EMAIL, NUMBER eller det første felt i CONTACT. Kun det første spørgsmål tæller: en side, der starter med en rating og har et tekstfelt bagefter, lades i fred.

• "always": også på første side, så snart surveyen er renderet. Passer til en survey, der fylder hele siden.
• "navigation": kun efter Start, Næste eller Tilbage, når brugeren lige har trykket. Passer til en indlejret survey, hvor fokus ved indlæsning ville åbne tastaturet på en telefon, før brugeren har rørt noget.
• Udeladt eller false: intet automatisk fokus (adfærden før 2.2.31).

Fokus flyttes aldrig væk fra et redigerbart felt uden for surveyen, så en bruger, der skriver i din sides egen formular, beholder markøren. Det anvendes efter onLoadedEvent, afterSubmitEvent eller onBackEvent: deaktiverer du spørgsmålene, mens en side indlæses, så aktivér dem igen i det hook, og fokus lander stadig. Det anvendes ikke i konversationelle (AGENT) surveys.

Viser du surveyen senere, end den renderes (f.eks. en popup, der først vises, når den er tegnet), kan et skjult felt ikke få fokus: brug "navigation" og kald form.focusFirstQuestion(), når den bliver synlig.

form.send(metadata?, metrics?, profile?, answers?)

Indsender den aktuelle side.

Som standard scanner SDK’et de renderede spørgsmål fra DOM’en, validerer påkrævede felter og indsender det, brugeren har udfyldt via de indbyggede widgets. Brug dette kald, når du har sat addButton: false og vil styre dine egne next/back-knapper.

På en side med ét valg- eller rating-spørgsmål indsender SDK’et også selv siden, når en mulighed vælges. Se Automatisk videre.

form.send(
  [{ key: "source", value: ["pricing-page"] }], // metadata
  [{ key: "score",  value: ["92"] }],           // metrics
  [{ key: "email",  value: ["user@example.com"] }], // profile
);

Programmatiske svar — styr surveyen fra dine egne widgets

Tilgængelig fra 2.2.4.

Send et fjerde answers-argument for at springe DOM-scanningen og valideringsløkken for påkrævede felter helt over. SDK’et tilføjer dine svar direkte til feedback.answers og indsender.

Dette åbner for et fuldt custom UI: render dine egne inputs (i hvilket som helst framework, med hvilket som helst komponentbibliotek), opsaml selv svarene, og lad SDK’et håndtere netværk og livscyklus-events.

const form = magicfeedback.form("APP_ID", "PUBLIC_KEY");

// Valgfrit: spring generate() over helt, hvis du ikke vil have SDK'et til at rendere noget.
// Du har stadig brug for form-instansen for at holde sessionsstatus.

await form.send(
  [{ key: "source", value: ["custom-ui"] }], // metadata
  [{ key: "plan",   value: ["pro"] }],       // metrics
  [],                                        // profile
  [
    { key: "nps",              value: ["9"] },
    { key: "favorite-feature", value: ["Conditional logic"] },
  ],
);

Livscyklus-hooks (beforeSubmitEvent, afterSubmitEvent) udløses stadig på den programmatiske vej, så analytics og UX-kobling fortsætter med at virke som med de renderede widgets.

Bemærk

Programmatisk form.send() indsender altid med completed: false (delvis gem). Hvis du har brug for at markere en engangsindsendelse som fuldt færdig, brug top-level magicfeedback.send(...), der accepterer et eksplicit completed-flag.

Tip

Det er det rigtige kald, når dit produkt allerede har et stærkt design system, og du ikke vil have nogen SDK-renderet widget på skærmen. For blandede flows — SDK-widgets plus din egen action-bar — kald form.send() uden det fjerde argument og lad SDK’et scanne sine egne widgets.

form.back()

Navigerer til forrige side. Brug det med addButton: false.

form.back();

form.focusFirstQuestion()

Tilgængelig fra 2.2.31.

Flytter fokus til første spørgsmål på den aktuelle side, når det er et tekstfelt, med samme regler som autofocus-optionen. Brug det, når surveyen bliver synlig senere, end den renderes. Returnerer true, hvis fokus blev flyttet.

await form.generate("survey-root", { autofocus: "navigation" });

// Senere, når popup'en er synlig:
openPopup();
form.focusFirstQuestion(); // false, når første spørgsmål ikke er et tekstfelt

form.previewQuestion(containerId, question, options?)

Renderer ét spørgsmål uden at ændre intern flow-tilstand. Nyttigt til QA, lokale demos og visuel regressionstest.

form.previewQuestion("preview-root", {
  id: "q_text",
  title: "Hvad hedder du?",
  type: "TEXT",
  questionType: { conf: [] },
  ref: "name",
  require: true,
  external_id: "",
  value: [],
  defaultValue: "",
  followup: false,
  position: 1,
  assets: { placeholder: "Skriv dit navn" },
  refMetric: "",
  integrationId: "demo",
  integrationPageId: "demo",
}, {
  format: "standard",
  language: "da",
  product: { customIcons: false },
  clearContainer: true,
  wrap: true,
});

---

Understøttede spørgsmålstyper

Rendereren understøtter aktuelt disse spørgsmålstyper:

TEXT, LONGTEXT, NUMBER, RADIO, MULTIPLECHOICE, SELECT, DATE, EMAIL, PASSWORD, BOOLEAN, CONSENT, RATING_STAR, RATING_EMOJI, RATING_NUMBER, MULTIPLECHOISE_IMAGE, MULTI_QUESTION_MATRIX, POINT_SYSTEM, PRIORITY_LIST, INFO_PAGE, UPLOAD_FILE, UPLOAD_IMAGE.

Payload-noter

• EMAIL-svar kopieres også ind i feedback.profile som email.
• POINT_SYSTEM-svar serialiseres som "Label:60%".
• MULTI_QUESTION_MATRIX-svar samles til én JSON-streng-entry. Krævede matricer skal have en værdi i hver række før indsendelse tillades.
• INFO_PAGE, UPLOAD_FILE og UPLOAD_IMAGE renderes i UI’et, men opretter ikke svar-entries.

For det præcise JSON-output produceret af Form.answer(), se docs/answer-format.md i SDK-repository’et.

---

TypeScript

Pakken leverer typer på dist/types/src/index.d.ts. Default export’et er fuldt typet — du behøver ingen ekstra imports for autocomplete og type-checking.

import magicfeedback from "@magicfeedback/native";

const form = magicfeedback.form("APP_ID", "PUBLIC_KEY"); // typet
await form.generate("survey-root", {
  addButton: true,
  afterSubmitEvent: (e) => console.log(e.completed),     // typet
});