CarePage Feedback Widget
npm install carepage-feedback-widgetnpm run develop`
Run repository in development mode
`npm run build`
Build repository to generate minified carepage-feedback-widget.min.js
How to Use
Use carepage-feedback-widget.min.js in your website to use widget components.
- Set review=stats|percentage to change card stats or percentage.
- Set arrow=true|false to show arrow icon.
- Set modal-data=object to override modal texts.
- Set token & facilityId to access widget.
- Set starRating to override review rating value.
- Set percentageRating to override resident percentage rating value.
- Set percentageSatisfaction to override resident satisfaction value.
- Set percentageRecommendation to override review percentage recommendation value.
- Set surveyResponses to override survey responses value.
- Set minimumSurveyResponse to override minimum accepted survey response value.
- Set excludePercentageRating to hide widget when percentage rating is less than or equal to set value.
- Set excludePercentageSatisfaction to hide widget when percentage satisfaction is less than or equal to set value.
- Set excludePercentageRecommendation to hide widget when percentage recommendation is less than or equal to set value.
`
`
`
token="sdasdasda"
review="stats"
starRating=3
percentageRating=96
percentageSatisfaction=96.5
percentageRecommendation=80
surveyResponses=0
facilityId="5"
review="stats"
arrow=true>
`
Styling the component
Override variables:
- --card-font-family -> change font
- --card-text-color -> change font color
- --star-color -> change star color
- --theme-primary-color -> change theme color
- --theme-circle-color -> change circle wrapper color
- --card-background -> change card background
- --background-star-fill -> change radial fill background
In your css you can set variable values.
`
carepage-review-rating {
--card-font-family: 'Arial', sans-serif;
--card-text-color: #321960;
--star-color: #FF0000;
--theme-primary-color: green;
--theme-circle-color: #D6F3F4;
--card-background: #1C004F;
--background-star-fill: #1C004F;
}
``