​
About this component

The Survey component is a fantastic way to engage users right when it matters and gather valuable feedback or data. Whether you’re looking to measure satisfaction or collect insights, targeted in-app surveys can help you connect with users at key moments in their journey. When to Use Surveys:
  • User Research: Deploy surveys like NPS (Net Promoter Score) right after users complete specific actions. This is a great way to capture their feelings while the experience is fresh in their minds.
  • Data Collection: Use surveys to collect additional data after user signups, helping you enrich your CRM and tailor your communications.
Best Practices for Surveys:
  • Flexible Display Options: By default, NPS surveys typically float on the screen, ensuring they don’t take over the entire user experience. This keeps the process smooth and non-intrusive.
  • Full-Screen Takeovers: For the highest engagement rates, for custom surveys or other input forms, they can be displayed inline within the page or as a full page modal. Just be sure to use these methods thoughtfully to avoid annoying users.
Custom Surveys:
  • Built on Forms: Custom surveys utilize the same underlying components as Forms, which means you can refer to the Forms documentation for more details on how to create and implement them effectively.

​
Resources

​
Demo

​
Alternative scales

The component comes with a default NPS scale of 0-10. You can also use a custom scale by passing the options property either directly in the React component or in the YAML config via the props property. For instance, in the example below, we’re using an emoji scale:

​
Installation

import * as Frigade from '@frigade/react';

const App = () => {
  return (
    <Frigade.Survey.NPS flowId="my-flow-id" dismissible={true} />
  );
};

​
Customization

To learn about how to customize Frigade components, see the customization documentation and examples of custom themes in action.

​
SDK Properties

​
as
ElementType<any, keyof IntrinsicElements>
Optional component to wrap the child components in, e.g. as={Dialog} will render the Flow in a modal Dialog. Defaults to Box.
​
autoStart
boolean
Whether to automatically mark the Flow started (i.e. in progress) when the Flow is eligible to be shown. You will need to call flow.start() or step.start() from the parent component if you set this to false. Most components should not need to override this behavior.Defaults to true.
​
css
Interpolation<Theme>
Emotion CSS prop to apply to the component. See Theming documentation for more information.Example usage:
<Frigade.Checklist css={{ backgroundColor: "pink", ".fr-button-primary": { backgroundColor: "fuchsia" } }} />
​
dismissible
boolean
Whether the Flow is dismissible or not
​
fieldTypes
FieldTypes
Custom field types to be used in the Form. You can use this to build your own custom form fields in a Form.For example, if you want to use a custom field type called calendar:
import { Form, FormFieldProps } from "@frigade/react";

function CalendarField({ field, submit }: FormFieldProps) {
  return (
    <div>
      <input type="date" onChange={field.onChange} value={field.value} />
    </div>
  );
}

// ...

<Form flowId="my-flow-id" fieldTypes={{ calendar: CalendarField }} />;
​
flowId
string
The Flow ID to render. You can find the Flow ID in the Frigade dashboard.
​
forceMount
boolean
If true, the Flow will be mounted even if it has already been completed or dismissed. However, if the user does not match the Flow’s targeting, the Flow will not be mounted.
​
modal
boolean
Register the Flow as a modal to prevent popup collisions (only one modal Flow will render at a time).
​
negativeLabel
string
The label to display for the negative end of the NPS scale. If not provided, the default label “Not likely at all” will be used.
​
onComplete
FlowHandlerProp
Handler for when the Flow is completed. This is event is fired immediately after the user completes the Flow.
​
onDismiss
FlowHandlerProp
Handler for when the Flow is dismissed (skipped). This is event is fired immediately after the user dismisses the Flow.
​
onPrimary
StepHandlerProp
Handler for when primary button is clicked. If this function returns false or a promise that resolves to false, the step will not be automatically completed when clicked.
​
onSecondary
StepHandlerProp
Handler for when secondary button is clicked. If this function returns false or a promise that resolves to false, the step will not be automatically completed when clicked.
​
options
NPSOptions
The options to display in the NPS field. If not provided, the default NPS numbers from 0 to 10 will be used.
​
positiveLabel
string
The label to display for the positive end of the NPS scale. If not provided, the default label “Extremely likely” will be used.
​
variables
Record<string, unknown>
Variables to pass to the Flow. You can use variables in the Flow configuration to customize copy. For instance, you can use title: Hello, ${name}! in the Flow configuration and pass variables={{name: 'John'}} to customize the copy.