Ratings

Overview

To configure the ratings, you need to know your ratings id in the KM App. This configuration will go in the creation of the component that has ratings.

Sample

By default, this component looks like this:

Usage

When adding a Rating subcomponent, pass the following objects in the elements array.

Name Type Description
id integer Rating id retrieved from the KM App
label string Rating render
comment boolean If it has comment or not
comment_message String Modify the comment message label of the rating. The default label is RATINGS_COMMENT_INTRODUCTION.
final_message String Modify the final message label of the rating. The default label is RATINGS_GRETTINGS_TEXT

Options

Available options to set in this component:

Name Type Default Description
elements array of rating object Default is defined in each component Ratings array with a rating object

Methods

This subcomponent does not have any methods.

Subcomponents

This subcomponent does not have any subcomponents.

Events

This subcomponent does not have any events.

Tracking

This component calls the API to do the following:

  • use the endpoint /tracking/events to register a rate event when a user rates a content.
  • use the endpoint /tracking/events to register a search_rate event when a user rates the results of a search.

Labels

Labels of this component. The default labels of each component can be rewritten in the SDK creation configuration.

Name Default Description
RATINGS_INTRODUCTION Was this answer helpful? Text to introduce the ratings
RATINGS_COMMENT_INTRODUCTION Why this content is not correct? Text to introduce the rating comment
RATINGS_SUBMIT_COMMENT_BUTTON Send Submit button
RATINGS_GRETTINGS_TEXT Thanks for your comment! Text of greetings
RATINGS_COMMENT_PLACEHOLDER `` Comments placeholder

Example

Create popular with three ratings.

sdk.component('popular', '#popular', {
  contents: {
    ratings: {
      elements:[
        {
          id:1, 
          label: 'This answer help me', 
          comment: false 
        },
        {
          id:2, 
          label: 'This answer partially help me', 
          comment: true 
        },
        {
          id:3, 
          label: 'This answer did not help me', 
          comment: true 
        }
      ]
    }
  }
});