Net Promoter Score
Unlock the power of your advocacy score and shape our future with your feedback. Help us build trust and create valuable recommendations.
Last updated
Unlock the power of your advocacy score and shape our future with your feedback. Help us build trust and create valuable recommendations.
Last updated
To unlock early access to the component Get Access
To install the Quest react-sdk
into your project, follow these steps:
Open your terminal/command prompt.
Navigate to your project's root directory using the cd
command if you're not already there.
Run the following command to install the quest-sdk
package using npm:
This command will download and install the package and its dependencies into your project.
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
Versatile Net Promoter Score Components: Integrate diverse survey elements into your app, allowing for comprehensive data collection tailored to various use cases.
Seamless Integration: Enable easy incorporation of the survey solution into your customer's application, ensuring a smooth and hassle-free user experience.
Dedicated Surveys Category: Provide a centralized hub within the app, featuring a range of templates for streamlined management and efficient access to different survey types.
Customizable Templates: Tailor surveys to specific needs with customizable templates, empowering users to adapt and optimize data collection for their unique requirements.
The Net Promoter Score
component accepts the following props
You can customize the UI with type of styleConfig would be
To integrate the Net Promoter Score
component into your React application, follow these steps
Import the CSS: In your JavaScript or TypeScript file where you're using the Net Promoter Score
, import the CSS styles for the component. This ensures that the component's styling is applied correctly.
Import the Survey Component: Import the Net Promoter Score
component from the @questlabs/react-sdk
package.
Import the QuestProvider Component: Import the QuestProvider
component from the @questlabs/react-sdk
package.
Pass the Required Props: Pass the required props to the QuestProvider
. The required props are apiKey
, apiSecret
, and entityId
. and required props for the Net Promoter Score
component are userId, questId, token
.
Replace "your-api-key"
and "your-entity-id"
with your actual Quest API credentials
Replace "your-token"
, "your userId", "your-questId"
with your actual configuration details.
Here's an example of how to use the Net Promoter Score
component within your React application
The above example uses all the props.
Prop Name | Type | Required | Details |
---|---|---|---|
userId
string
required
The unique identifier of the user.
token
string
required
An authentication token or API key necessary for accessing Survey or quest data.
questId
string
required
The unique identifier for the Survey or quest
heading
string
required
The title or heading of the Survey
subHeading
string
required
A brief description for the Survey
bgColor
string
optional
This helps to change Background color as per requirements. Works only for liner-gradient and radial-gradient.
ratingType
string
optional
This helps in Change the rating icons
btnTextColor
string
optional
The Text color of continue and Submit button
iconColor
string
optional
The quest logo icon color
onSubmit
function
optional
Callback function triggered on form submission.
uniqueEmailId
string
optional
Unique email identifier.
uniqueUserId
string
optional
Unique user identifier.
questionsPerSections
array of arrays
optional
Specify the number of questions in a section.
entityAuthenticationToken
string
optional
Authentication token for login.
variation
string
optional
To specify variation
showFooter
boolean
optional
To show or hide the component footer
styleConfig
object
optional
An object containing CSS properties for styling various components within the survey process, including form, headings, descriptions, inputs, labels, text area, buttons, modal, and footer .