NPS Survey - Frigade

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

Launch surveys with no-code using Collections
Target your survey to specific users with Targeting
See industry examples of surveys

Demo

See surveys in action in our live 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:

  import * as Frigade from '@frigade/react';
  
  const App = () => {
    return (
      <Frigade.Survey.NPS
       flowId="my-flow-id"
       dismissible={true}
       alignSelf="flex-end"
       justifySelf="flex-end"
       positiveLabel="Very good"
       negativeLabel="Very bad"
       options={[
        { label: "😞", value: "0" },
        { label: "😕", value: "1" },
        { label: "😐", value: "2" },
        { label: "🙂", value: "3" },
        { label: "😍", value: "4" },
        ]}
      />
    );
  };

Installation

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

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

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

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

NPS Surveys can be be deployed with no-code using Collections.

Customization

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

SDK Properties

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.

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.

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

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.

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>

steps

array

The individual steps/pages of the form

steps[].id

string

Unique identifier for the step. Do not change this once the step has been created.

steps[].title

string

The title of the step

steps[].subtitle

string

The description of the step

steps[].imageUri

string

Url to an image to display in the step

steps[].iconUri

string

Url to an icon to display in the step. This is only supported by the carousel checklist component.

steps[].videoUri

string

Url to a video to display in the step such as YouTube, Vimeo, or a direct link to an mp4 file

steps[].primaryButton

object

Config for the primary button in this step.

steps[].primaryButton.action

boolean,string

Primary button action. (defaults to step.complete).
Possible values: false, flow.back, flow.complete, flow.forward, flow.restart, flow.skip, flow.start, step.complete, step.skip, step.reset, step.start

steps[].primaryButton.target

string

Primary button URI target (defaults to _self).

steps[].primaryButton.title

string

Primary button title. If omitted, the primary button will not be shown.

steps[].primaryButton.uri

string

Primary button URI.

steps[].primaryButtonTitle

string

Deprecated: use primaryButton.title instead. The title of the primary button

steps[].primaryButtonUri

string

Deprecated: use primaryButton.uri instead. The url to open when the primary button is clicked

steps[].primaryButtonUriTarget

string

Deprecated: use primaryButton.target instead. The target of the primary button url (default: _blank; use _self to open in the same window). Setting it to # will open the existing page and dismiss any Frigade modals.

steps[].secondaryButton

object

Config for the secondary button in this step.

steps[].secondaryButton.action

boolean,string

Secondary button action. (defaults to step.complete).
Possible values: false, flow.back, flow.complete, flow.forward, flow.restart, flow.skip, flow.start, step.complete, step.skip, step.reset, step.start

steps[].secondaryButton.target

string

Secondary button URI target (defaults to _self).

steps[].secondaryButton.title

string

Secondary button title. If omitted, the secondary button will not be shown.

steps[].secondaryButton.uri

string

Secondary button URI.

steps[].secondaryButtonTitle

string

Deprecated: use secondaryButton.title instead. The title of the secondary button

steps[].secondaryButtonUri

string

Deprecated: use secondaryButton.uri instead. The url to open when the secondary button is clicked

steps[].secondaryButtonUriTarget

string

Deprecated: use secondaryButton.target instead. The target of the secondary button url (default: _blank; use _self to open in the same window). Setting it to # will open the existing page and dismiss any Frigade modals.

steps[].completionCriteria

string

Targeting that automatically completes the step. E.g.: user.property(‘connectedBank’) == true

steps[].startCriteria

string

Targeting that automatically blocks the step from starting until it becomes true. E.g.: user.property(‘connectedBank’) == true

steps[].visibilityCriteria

string

Targeting that automatically shows the step when it becomes true. E.g.: user.property(‘connectedBank’) == true

steps[].props

object

Override the default UI props for the corresponding component

steps[].fields

array

The data contained on the form step, typically text input boxes, multiple choice questions, etc.

steps[].fields[].id

string

Unique identifier for the step. Do not change this once the step has been created.

steps[].fields[].label

string

The label of the field

steps[].fields[].value

string

The default value of the field (used for prefilling). For checkboxes, use ‘true’ or ‘false’.

steps[].fields[].multiple

boolean

Whether the field can accept multiple values. Only used for the select type field.

steps[].fields[].type

string

The type of the field. The built-in supported types are: text, textarea, select, checkbox, and radio. If you are using custom form field types, the name here should match it.

steps[].fields[].placeholder

string

The placeholder of the field

steps[].fields[].maxLength

integer

The maximum length of the field

steps[].fields[].required

any

Whether the field is required or not. Use a string here to show a custom error message.

steps[].fields[].options

array

The options for the field. Only used for select fields.

steps[].fields[].options[].label

string

The label of the option

steps[].fields[].options[].value

any

The value of the option

steps[].fields[].pattern

object

The validation rules for the field. See documentation for more information.

steps[].fields[].pattern.value

string

Regex pattern to match the field against

steps[].fields[].pattern.message

string

The error message to display if the pattern does not match

steps[].fields[].props

object

Optional additional properties for the field. These will be passed to the frontend component as HTML attributes and merged with the default props for the given field type.

Components

​About this component

​Resources

​Demo

​Alternative scales

​Installation

​Customization

​SDK Properties

About this component

Resources

Demo

Alternative scales

Installation

Customization

SDK Properties