carepage-feedback-widget
v1.1.4
Published
CarePage Feedback Widget
Downloads
379
Readme
Introduction
CarePage Feedback Widget
Getting Started
Installation Guide:
- NodeJS 18+
- Webpack
- Babel
- Web components
Build and Test
- src
- lib
- components
- carepage-xx.js
- scss
- xxx.scss
- lib
- index.js
- index.html
- lib - Javascript web components
- scss - styling for the web components
- index.js - define the customElements created in lib
- index.html - export customElements to be used by legacy systems.
npm 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.
<body>
<script src="https://unpkg.com/carepage-feedback-widget@<version>/public/carepage-feedback-widget.min.js"></script>
</body> <carepage-review-rating
token="sdasdasda"
review="stats"
starRating=3
percentageRating=96
percentageSatisfaction=96.5
percentageRecommendation=80
surveyResponses=0
facilityId="5"
review="stats"
arrow=true>
<carepage-review-hli></carepage-review-hli>
</carepage-review-rating>
<carepage-modal include="carepage-review-rating"></carepage-modal>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;
}