JavaScript Widget Deployment Guide

Introduction

The JavaScript widget is effectively a single line of front-end only (HTML) code that displays star ratings and comments in multiple configurations and allows you to customize styles, formats, colors, fonts, etc.

There are four versions of the widget to enable flexible deployment and website customization:

• Version 1 – Includes all three sections (Summary, Question Breakdown, Comments)
• Version 2 – Includes only the Summary section
• Version 3 – Includes only the Comments
• Version 4 – Includes only the Question Breakdown section

info

Please note that these Javascript implementations are suitable for small scale organisations with small traffic. If you are a big organization, we always recommend you use the above REST Apis and have a caching layer in your system.

Deployment Instructions

A few steps are required to deploy the JavaScript widget on your website:

Customization

Work with your Press Ganey Implementation Specialist to define any customizations you want to make to the widget font type, font size, font color, etc. The Implementation Specialist will use a customization tool to generate custom JavaScript code for you. If you do not prefer any customizations, you can access the JavaScript snippet and HTML div at the end of this document. Note that if you use the snippet located in this document, you will need to add your App ID (uniquely generated for your account by Press Ganey) to the JavaScript snippet which can be provided by your Implementation Specialist.

The following parameters of the Summary section can be customized:

• Title Font Size
• Overall Satisfaction Font Size
• Overall Rating Size (out of 5)
• Overall Rating Size (numerical X)
• Total Rating Font Size
• Total Comments Font Size
• Star Rating Color
• Title Font Color
• Overall Satisfaction Font Color
• Overall Rating Color (out of 5)
• Overall Rating Color (numerical X)
• Total Rating Color
• Total Comments Color
• Star Rating Size
• Title Font Style
• Overall Satisfaction Font Style
• Overall Rating Font Style (out of 5)
• Overall Rating Font Style (numerical X)
• Total Rating Font Style
• Total Comments Font Style

The following parameters of the Question Breakdown section can be customized:

• Title Font Size
• Score Font Size
• Questions Font Size
• Star Rating Color
• Title Font Color
• Score Font Color
• Questions Font Color
• Star Rating Size
• Title Font Style
• Score Font Style
• Questions Font Style

The following parameters of the Comments section can be customized:

• Title Font Size
• Overall Summary Font Size
• Date Font Size
• Comments Font Size
• View More Font Size
• Star Rating Color
• Title Font Color
• Overall Summary Font Color
• Date Font Color
• Comments Font Color
• View More Font Color
• Star Rating Size
• Title Font Style
• Overall Summary Font Style
• Date Font Style
• Comments Font Style
• View More Font Style

Once you finalize your design, they will provide a JavaScript snippet as well as the HTML div that you will need to deploy on your web pages.

Include Script Tag

The following script tag needs to be included in the head of your web page:

<script type="text/javascript" src="https://surveycompass.binaryfountain.com/public/ratingWidget.js"></script>

Deploy the JavaScript Snippet: Once you have added that script tag to the head of your web page, you need to deploy the JavaScript snippet inline. In the snippet you will be able to adjust the following parameters:

Parameter	Type	Description Required/Optional
appId	String	Application ID of the Application that was created to access the API
personId	String	The physician’s NPI
version	String	The widget version you want displayed. There are four versions
page	Integer	The page to return containing the requested number of testimonials per page. Default value is 1
perPage	Integer	The number of reviews per page. Optional, default is up to 20
days	Integer Maximum age of the reviews in days. For example, days=7 means reviews from the past 1 week	Optional, default is 365 days
minSurveyCount	Integer	Returns responses only when there are at least as many survey responses as specified in minSurveyCount
minRatingCount	Integer	Returns responses only when there are at least as many ratings as specified in minRatingCount
minWordCount	Integer	Returns only those reviews, which have minimum number of words in it. Default is 0, meaning, no restriction on word count.

HTML Div Deployment: The following HTML div has to be deployed in the body of your HTML page where you want the widget to be displayed.

For deployment of a single widget instance on a web page:

<div id="bf-bsr-comments" class="bf-widget"></div>

For deployment of multiple widget instances on a web page:

For first widget instance:

<div id="bf-bsr-comments-first" class="bf-widget"></div>

For second widget instance:

<div id="bf-bsr-comments-second" class="bf-widget"></div>

JavaScript Snippet for Deployment of a Single Widget Instance

<script type="text/javascript" src="https://surveycompass.binaryfountain.com/public/ratingWidget.js"></script>
<script type="text/javascript">
  if (typeof jQuery != 'undefined') {
    loadScript(generateWidget);
  } else {
    if (document.readyState === 'complete') {
      loadScript(generateWidget);
    } else {
      window.addEventListener("load", loadScript(generateWidget));
    }
  }

  function generateWidget() {
    if (typeof(BFWidget) != 'undefined') {
      BFWidget.config({
        "appId": "YOU NEED TO PROVIDE",
        "personId": "YOU NEED TO PROVIDE",
        "version": "1",
        "page": "1",
        "perPage": "50",
        "noOfDays": "365",
        "minSurveyCount": "1",
        "minRatingCount": "0",
        "minWordCount": "0",
        "minThreshold": "0.0",
        "optionalParams": {
          "displayDiv": "bf-bsr-comments",
          "summaryTitleFontStyle": "Times New Roman",
          "summaryTitleFontSize": "24",
          "summaryTitleFontColor": "#000000",
          "overallSatisfactionFontStyle": "Times New Roman",
          "overallSatisfactionFontSize": "13",
          "overallSatisfactionColor": "#000000",
          "summaryStarRatingColor": "#f8af13",
          "summaryStarRatingSize": "17",
          "overallRatingFontStyle": "Times New Roman",
          "overallRatingFontColor": "#000000",
          "overallRatingFontSize": "13",
          "overallRatingFontStyleNumerical": "Times New Roman",
          "overallstarratingcolorNumerical": "#000000",
          "overallRatingFontSizeNumerical": "13.5",
          "totalRatingFontSize": "13",
          "totalRatingFontColor": "#000000",
          "totalRatingFontStyle": "Times New Roman",
          "totalCommentsFontStyle": "Times New Roman",
          "totalCommentsFontSize": "13",
          "totalCommentsFontColor": "#000000",
          "questionBreakdownTitleFontStyle": "Times New Roman",
          "questionBreakdownTitleFontSize": "24",
          "questionBreakdownTitleFontColor": "#000000",
          "questionStarRatingScoreFontSize": "13.5",
          "questionStarRatingScoreFontColor": "#000000",
          "questionStarRatingScoreFontStyle": "Times New Roman",
          "surveyQuestionsFontSize": "13.5",
          "surveyQuestionsFontColor": "#000000",
          "surveyQuestionsFontStyle": "Times New Roman",
          "questionStarRatingStarFontColor": "#f8af13",
          "questionStarRatingStarFontSize": "17",
          "commentsTitleFontSize": "24",
          "commentsTitleFontColor": "#000000",
          "commentsTitleFontStyle": "Times New Roman",
          "overallPerformanceSummaryFontSize": "13",
          "overallPerformanceSummaryFontColor": "#000000",
          "overallPerformanceSummaryFontStyle": "Times New Roman",
          "dateFontSize": "11",
          "dateFontColor": "#000000",
          "dateFontStyle": "Times New Roman",
          "commentsFontSize": "13",
          "commentsFontColor": "#000000",
          "commentsFontStyle": "Times New Roman",
          "starRatingCommentColor": "#f8af13",
          "starRatingCommentSize": "17",
          "viewMoreFontSize": "13",
          "viewMoreFontColor": "#000000",
          "viewMoreFontStyle": "Times New Roman"
        }
      });
    }
  }
</script>

JavaScript Snippet for Deployment of Multiple Widget Instances

if (typeof jQuery != 'undefined') {
  loadScript(generateWidget);
  setTimeout(function() {
    loadScript(generateWidget_second);
  }, 3000);
} else {
  if (document.readyState === 'complete') {
    loadScript(generateWidget);
    setTimeout(function() {
      loadScript(generateWidget_second);
    }, 3000);
  } else {
    window.addEventListener("load", loadScript(generateWidget));
    setTimeout(function() {
      loadScript(generateWidget_second);
    }, 3000);
  }
}

function generateWidget() {
  if (typeof(BFWidget) != 'undefined') {
    BFWidget.config({
      "appId": "YOU NEED TO PROVIDE",
      "personId": "YOU NEED TO PROVIDE",
      "version": "1",
      "page": "1",
      "perPage": "50",
      "noOfDays": "365",
      "minSurveyCount": "1",
      "minRatingCount": "0",
      "minWordCount": "0",
      "minThreshold": "0.0",
      "optionalParams": {
        "displayDiv": "bf-bsr-comments-first",
        "summaryTitleFontStyle": "Times New Roman",
        "summaryTitleFontSize": "24",
        "summaryTitleFontColor": "#000000",
        "overallSatisfactionFontStyle": "Times New Roman",
        "overallSatisfactionFontSize": "13",
        "overallSatisfactionColor": "#000000",
        "summaryStarRatingColor": "#f8af13",
        "summaryStarRatingSize": "17",
        "overallRatingFontStyle": "Times New Roman",
        "overallRatingFontColor": "#000000",
        "overallRatingFontSize": "13",
        "overallRatingFontStyleNumerical": "Times New Roman",
        "overallstarratingcolorNumerical": "#000000",
        "overallRatingFontSizeNumerical": "13.5",
        "totalRatingFontSize": "13",
        "totalRatingFontColor": "#000000",
        "totalRatingFontStyle": "Times New Roman",
        "totalCommentsFontStyle": "Times New Roman",
        "totalCommentsFontSize": "13",
        "totalCommentsFontColor": "#000000",
        "questionBreakdownTitleFontStyle": "Times New Roman",
        "questionBreakdownTitleFontSize": "24",
        "questionBreakdownTitleFontColor": "#000000",
        "questionStarRatingScoreFontSize": "13.5",
        "questionStarRatingScoreFontColor": "#000000",
        "questionStarRatingScoreFontStyle": "Times New Roman",
        "surveyQuestionsFontSize": "13.5",
        "surveyQuestionsFontColor": "#000000",
        "surveyQuestionsFontStyle": "Times New Roman",
        "questionStarRatingStarFontColor": "#f8af13",
        "questionStarRatingStarFontSize": "17",
        "commentsTitleFontSize": "24",
        "commentsTitleFontColor": "#000000",
        "commentsTitleFontStyle": "Times New Roman",
        "overallPerformanceSummaryFontSize": "13",
        "overallPerformanceSummaryFontColor": "#000000",
        "overallPerformanceSummaryFontStyle": "Times New Roman",
        "dateFontSize": "11",
        "dateFontColor": "#000000",
        "dateFontStyle": "Times New Roman",
        "commentsFontSize": "13",
        "commentsFontColor": "#000000",
        "commentsFontStyle": "Times New Roman",
        "starRatingCommentColor": "#f8af13",
        "starRatingCommentSize": "17",
        "viewMoreFontSize": "13",
        "viewMoreFontColor": "#000000",
        "viewMoreFontStyle": "Times New Roman"
      }
    });
  }
}

function generateWidget_second() {
  if (typeof(BFWidget) != 'undefined') {
    BFWidget.config({
      "appId": "YOU NEED TO PROVIDE",
      "personId": "YOU NEED TO PROVIDE",
      "version": "2",
      "page": "1",
      "perPage": "50",
      "noOfDays": "365",
      "minSurveyCount": "1",
      "minRatingCount": "0",
      "minWordCount": "0",
      "minThreshold": "0.0",
      "optionalParams": {
        "displayDiv": "bf-bsr-comments-second",
        "summaryTitleFontStyle": "Times New Roman",
        "summaryTitleFontSize": "24",
        "summaryTitleFontColor": "#000000",
        "overallSatisfactionFontStyle": "Times New Roman",
        "overallSatisfactionFontSize": "13",
        "overallSatisfactionColor": "#000000",
        "summaryStarRatingColor": "#f8af13",
        "summaryStarRatingSize": "17",
        "overallRatingFontStyle": "Times New Roman",
        "overallRatingFontColor": "#000000",
        "overallRatingFontSize": "13",
        "overallRatingFontStyleNumerical": "Times New Roman",
        "overallstarratingcolorNumerical": "#000000",
        "overallRatingFontSizeNumerical": "13.5",
        "totalRatingFontSize": "13",
        "totalRatingFontColor": "#000000",
        "totalRatingFontStyle": "Times New Roman",
        "totalCommentsFontStyle": "Times New Roman",
        "totalCommentsFontSize": "13",
        "totalCommentsFontColor": "#000000",
        "questionBreakdownTitleFontStyle": "Times New Roman",
        "questionBreakdownTitleFontSize": "24",
        "questionBreakdownTitleFontColor": "#000000",
        "questionStarRatingScoreFontSize": "13.5",
        "questionStarRatingScoreFontColor": "#000000",
        "questionStarRatingScoreFontStyle": "Times New Roman",
        "surveyQuestionsFontSize": "13.5",
        "surveyQuestionsFontColor": "#000000",
        "surveyQuestionsFontStyle": "Times New Roman",
        "questionStarRatingStarFontColor": "#f8af13",
        "questionStarRatingStarFontSize": "17",
        "commentsTitleFontSize": "24",
        "commentsTitleFontColor": "#000000",
        "commentsTitleFontStyle": "Times New Roman",
        "overallPerformanceSummaryFontSize": "13",
        "overallPerformanceSummaryFontColor": "#000000",
        "overallPerformanceSummaryFontStyle": "Times New Roman",
        "dateFontSize": "11",
        "dateFontColor": "#000000",
        "dateFontStyle": "Times New Roman",
        "commentsFontSize": "13",
        "commentsFontColor": "#000000",
        "commentsFontStyle": "Times New Roman",
        "starRatingCommentColor": "#f8af13",
        "starRatingCommentSize": "17",
        "viewMoreFontSize": "13",
        "viewMoreFontColor": "#000000",
        "viewMoreFontStyle": "Times New Roman"
      }
    });
  }
}