API reference

<Interview>

The full styled drop-in. Renders exactly one screen per journey phase, wrapped in a theme root and an error boundary.

Import

import { Interview } from '@dialogueai/react-ui';
import '@dialogueai/react-ui/styles.css';

Props

studyIdstringrequired

The study to run. <Interview> auto-opens it on mount.

onCompleted(payload) => voidoptional

Fires when the interview completes. Payload: { interviewId, durationSeconds, completionToken }. Note completionToken may be null (end-tokens are not minted yet) — handle both.

onError(payload) => voidoptional

Fires on error. Payload: { code, message, recoverable }. See Errors.

onFinish() => voidoptional

Fires when the participant dismisses the widget via the completion screen’s Finish button. The widget renders nothing afterward, so use this to tear down or navigate.

appearanceAppearanceoptional

Theming + layout. See Appearance & theming.

slotsInterviewSlotsoptional

Override individual phase screens without leaving the styled layer.

Must be mounted inside <DialogueProvider>. It renders the journey but does not create the provider.

Slots

Each slots key swaps one screen; everything else keeps its branded default. Slot keys are not the phase names — several phases share one slot. The mapping:

interface InterviewSlots {
  pending?:          ReactNode;
  studyClosed?:      ReactNode;
  alreadyCompleted?: ReactNode;
  consent?:          ReactNode;
  profile?:          ReactNode;
  screener?:         ReactNode;
  deviceCheck?:      ReactNode;
  connecting?:       ReactNode;
  room?:             ReactNode;
  completion?:       ReactNode;
  screenedOut?:      ReactNode;
  error?:            ReactNode | ((error: Error) => ReactNode);
}

Slot	Renders for phase(s)
`pending`	idle, bootstrapping, ready, study, creatingInterview
`studyClosed`	studyClosed
`alreadyCompleted`	alreadyCompleted
`consent`	consent
`profile`	profile
`screener`	screener
`deviceCheck`	deviceCheck
`connecting`	connecting
`room`	live, ending
`completion`	processing, completed
`screenedOut`	screenedOut
`error`	errored (ReactNode form only — see below)

The error slot has two forms with different jobs. A ReactNode replaces the errored-phase screen (the SDK state-machine error). A function (error: Error) => ReactNode is wired only as the React error-boundary fallback for render crashes — it does not render on the errored phase, and it receives a JS Error, not the { code, message, recoverable } payload. To customize SDK errors, pass a ReactNode and read state via useInterview().error.

The aborted phase has no slot: the drop-in renders nothing and the host decides what to show next (use onFinish / your own routing).

Per-phase screens

Every screen is also exported individually, so you can compose your own flow inside <DialogueProvider> while reusing branded screens:

import {
  PendingScreen, StudyClosedScreen, ConsentScreen, ParticipantForm,
  AnonymousNamePicker, ScreenerForm, DeviceCheck, ConnectingScreen,
  InterviewRoom, CompletionScreen, ScreenedOutScreen, ErrorScreen,
} from '@dialogueai/react-ui';