Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.firstflow.app/llms.txt

Use this file to discover all available pages before exploring further.

import { Survey } from "@firstflow/react";
Survey renders a survey experience directly, without requiring FirstflowWidget. Use it to embed a survey in a modal, drawer, or any custom container.

​
Usage

import { Survey } from "@firstflow/react";

function NpsModal({ open, onClose }: { open: boolean; onClose: () => void }) {
  if (!open) return null;

  return (
    <div className="modal-overlay">
      <div className="modal">
        <Survey
          experienceId="your-survey-experience-id"
          layout="paginated"
          onSubmitted={onClose}
          onDismissed={onClose}
        />
      </div>
    </div>
  );
}

​
Props

​
experienceId
string
required
The ID of the survey experience to render. Find the experience ID in the Dashboard under the experience settings.
​
layout
"paginated" | "all"
default:"\"paginated\""
Controls how questions are displayed:
  • paginated — one question at a time, with a next/back navigation
  • all — all questions visible at once, submitted as a single form
​
onSubmitted
() => void
Called when the user submits the survey. Use this to close the container.
​
onDismissed
() => void
Called when the user dismisses the survey without submitting.

​
Notes

  • Survey must be rendered inside FirstflowProvider
  • The survey experience must have status active in the Dashboard
  • Survey answers are submitted to the Firstflow API and trigger survey.submitted and survey.answer webhook events
  • For a fully custom survey UI (custom question rendering, custom layout), use useFirstflowSurvey()