Carepage-feedback-widget NPM

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

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

@infinitebrahmanuniverse/nolb-care @everything-registry/sub-chunk-1295

3 months ago

3 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago