Freemium-survey-components NPM

freemium-survey-components

Freemium-survey-components renders the survey collection form given the survey object from the survey-serv platform service.

Make sure you have the below installed in your app.

react >= 17.0.2
react-dom >= 17.0.2

  npm i freemium-survey-components

Survey : SurveyProps
WebInAppSurvey : WebInAppSurveyProps
Range : RangeProps
ChannelPreview : ChannelPreviewProps

type SurveyProps = {
  survey: SurveyType
  answers: SurveyResponseType | null
  surveyStyle?: 'standard' | 'card'
  placeholders?: {
    [key: string]: string
  }
  initialPivotAnswer?: number
  onSubmit: (
    data: {
      [key: string]:
        | string
        | number
        | Array<string | number>
        | { [key: string]: string }
        | null
    },
    callback: Function,
    status: AnswerStatus,
  ) => void
  preview?: boolean
  isMobile?: boolean
  closePreview?: () => void
  onAnsweringPrompt: (id: number) => void
}

type ChannelPreviewProps = SurveyProps & PreviewChannelType

type WidgetProps = {
  survey: SurveyType
  answers: SurveyResponseType | null
  preview?: boolean
  placeholders: {
    [key: string]: string
  }
  onSubmit: (
    data: { [key: string]: string | number | Array<string | number> | null },
    callback: Function,
    status: AnswerStatus,
  ) => void
  onDismiss: () => void
  onClose?: () => void
  surveyType: 'default' | 'compact' | 'cozy'
  unsubscribeUrl?: string
  isSurveyCompleted: boolean
  children: React.ReactNode
  onAnsweringPrompt: (id: number) => void
}

type RangeProps = {
  type_info: {
    type_variant: 'NUMBER' | 'TEXT' | 'EMOJI' | 'STAR'
    scale_properties?: {
      order: 'ascending' | 'descending'
      button_style: {
        shape: ButtonShapeType
        type: 'standard' | 'highlighted'
      }
      range: ScalePropertiesRangeType[]
      labels: {
        values: string[]
        preference: 'edges' | 'all' | null
      }
    }
    footer_text: string
  }
  onChangeHandler: (value: number) => void
  value?: number
}

import { Survey } from 'freemium-survey-components';

<Survey
  survey={surveyObjectFromSurveyServ}
  surveyStyle="card"
  onSubmit={async function (
    data: { [key: string]: string | number | boolean | null | string[] },
    callback,
    status: 'PARTIAL' | 'COMPLETE',
  ) {
    await saveToDb(surveyFormData);
    if (status === 'COMPETE')
      // callback should be executed in the caller once the save is done.
      callback?.();
  }}
  // this will get called for every answer selection with status = 'PARTIAL'
  placeholders={{
    '{{account.company_name}}': 'Freshworks',
    '{{account.account_name}}': 'Freshworks Account',
  }}
  // placeholders to resolve against any such placeholder in question's text
  preview={true}
  // preview true will not save the response
  initialPivotAnswer={null}
  // pass a number if pivot qn needed to be prefilled  by default
  onAnsweringPrompt={function (id) {
    console.log(`Prompt ${id ? 'accepted' : 'rejected'}}`);
  }}
/>;

import {WebInAppSurvey} from 'freemium-survey-components'
  const [isSurveyCompleted,setIsSurveyCompleted] = useState(false)
  <WebInAppSurvey
    survey={surveyObjectFromSurveyServ}
    surveyType="compact"
    placeholders={null}
    onSubmit={function (data, callback,status){
      if(status === 'COMPLETE')
      callback?.()
      setIsSurveyCompleted(true)
    }}
    onDismiss={function() {
      // when the widget is dismissed, this gets executed.
    }}
    unsubscribeUrl={'#'}
    isSurveyCompleted={isSurveyCompleted}
    children={null}
    // if we want render with respect to the widget's fixed
    onAnsweringPrompt={function (id){ console.log(`Prompt ${id ? 'accepted' : 'rejected'}`)}}
        />

import { Range } from 'freemium-survey-components';

<Range
  type_info={{
    type_variant: 'TEXT',
    scale_properties: {
      order: 'ascending',
      range: [
        {
          id: '1',
          label: 'detractor',
          min: 1,
          max: 2,
        },
        {
          id: '2',
          label: 'passive',
          min: 3,
          max: 4,
        },
        {
          id: '3',
          label: 'promoter',
          min: 5,
          max: 10,
        },
      ],
      button_style: {
        shape: 'rounded',
        type: 'highlighted',
      },
      labels: {
        preference: 'edges',
        values: [
          'Very dissatisfied',
          'Very dissatisfied',
          'Dissatisfied',
          'Neutral',
          'Satisfied',
          'Dissatisfied',
          'Neutral',
          'Satisfied',
          'Dissatisfied',
          'Satisfied',
        ],
      },
    },
    footer_text: 'We look forward to your feedback.',
  }}
  value={value}
  onChangeHandler={function (value: any) {
    setValue(value);
  }}
/>;

Props (survey,answers) passed to Survey component and WebInAppSurvey component are cached on mount. In order to pass new value, component needs to be remounted.

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

freemium-survey-components

Peer Dependencies

Usage

Exports (Named)

Types

Usage

Rules