kuzco

React Component for product-agnostic NPS survey

Usage no npm install needed!

<script type="module">
  import kuzco from 'https://cdn.skypack.dev/kuzco';
</script>

README

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

Property Type Required Description
header String No Eye catching header for question.
modalClassName String No Modal Class Name this product belongs to, for styling purposes.
modalClassPrefix String No Custom prefix to add in front of .modal-header and .modal-body elements, for styling purposes
overlayClassName String No Classname to attach to the react-modal overlay component (for custom styling)
mainQuestion String Yes Product specific first question.
promoterFollowUpQuestion String Yes Product specific question to ask users who chose a score in the promoter score range [Promoter Lower Bound,..., Maximum Score]
neutralFollowUpQuestion String Yes Product specific question to ask users who chose a score in the neutral score range. (Detractor Upper Bound,..., Promoter Upper Bound)
detractorFollowUpQuestion String Yes Product specific question to ask users who chose a score in the detractor score range. [0,..., Detractor Upper Bound]
minScoreBlurb String No Text associated with the lowest score
maxScoreBlurb String No Text associated with the highest score
maxScore Number Yes Maximum score for users to choose from. Zero is the minimum.
detractorUpperBound Number Yes Inclusive upper boundary for detract score range.
promoterLowerBound Number Yes Inclusive lower boundary for promoter score range.
onScoreClick Function Yes Function for parent component to handle User selecting score.
onCommentSubmit Function Yes Function for parent component to handle User submitting comment.