Introduction

CarePage Feedback Widget

Getting Started

Installation Guide:
1. NodeJS 18+
2. Webpack
3. Babel
4. Web components

Build and Test

- src
- lib
- components
- carepage-xx.js
- scss
- xxx.scss
- index.js
- index.html

1. lib - Javascript web components
2. scss - styling for the web components
3. index.js - define the customElements created in lib
4. 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.

`



`

`
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;
}
``