3.0.4 • Published 3 years ago

kuzco v3.0.4

Weekly downloads
2,274
License
MIT
Repository
github
Last release
3 years ago

kuzco

React Component for product-agnostic NPS survey

Usage

    <NPSModal
        header={'Satisfaction Survey'} // optional
        modalClassName={'revshare'} // optional
        mainQuestion={'How happy are you with our product?'}
        promoterFollowUpQuestion={`We're so happy you're happy! We'd love to hear more about your experience:`}
        neutralFollowUpQuestion={`How can we improve your experience?`}
        detractorFollowUpQuestion={`We're sorry you feel that way! What is our product missing?`}

        minScoreBlurb={'Not Happy'} // optional
        maxScoreBlurb={'Very Happy'} // optional
        maxScore={10}
        detractorUpperBound={6}
        promoterLowerBound={9}

        onScoreClick={(score, question) => {alert('User selected ' + score + ' when asked ' + question)}}
        onCommentSubmit={(comment, question) => {alert('User entered ' + comment + ' when asked ' + question)}}

        contentClassName=""
        overlayClassName=""
    />

Use product-specific rules engine to determine when to add the modal to the ReactDOM.

The question that was asked and the response are passed back to the onScoreClick and onCommentSubmit functions for data collection purposes.

Demo

Run npm run example

Go to localhost:8080

Props

PropertyTypeRequiredDescription
headerStringNoEye catching header for question.
modalClassNameStringNoModal Class Name this product belongs to, for styling purposes.
modalClassPrefixStringNoCustom prefix to add in front of .modal-header and .modal-body elements, for styling purposes
overlayClassNameStringNoClassname to attach to the react-modal overlay component (for custom styling)
mainQuestionStringYesProduct specific first question.
promoterFollowUpQuestionStringYesProduct specific question to ask users who chose a score in the promoter score range [Promoter Lower Bound,..., Maximum Score]
neutralFollowUpQuestionStringYesProduct specific question to ask users who chose a score in the neutral score range. (Detractor Upper Bound,..., Promoter Upper Bound)
detractorFollowUpQuestionStringYesProduct specific question to ask users who chose a score in the detractor score range. [0,..., Detractor Upper Bound]
minScoreBlurbStringNoText associated with the lowest score
maxScoreBlurbStringNoText associated with the highest score
maxScoreNumberYesMaximum score for users to choose from. Zero is the minimum.
detractorUpperBoundNumberYesInclusive upper boundary for detract score range.
promoterLowerBoundNumberYesInclusive lower boundary for promoter score range.
onScoreClickFunctionYesFunction for parent component to handle User selecting score.
onCommentSubmitFunctionYesFunction for parent component to handle User submitting comment.
3.0.4

3 years ago

3.0.3

3 years ago

3.0.2

3 years ago

3.0.1

3 years ago

3.0.0

3 years ago

2.2.0

4 years ago

2.1.0

5 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.1.4

6 years ago

1.0.0

6 years ago