# Rating Popup

## Overview

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MW7i1Q5cl02M-5QQJkj%2F-MW7iZYXQxrW28X4HqGa%2Fimage.png?alt=media\&token=7ffde294-e3bd-4705-99f1-5367ee93ea0c)

A popup with a star rating and input fields for submitting a rating or review.

## Structure

The popup includes the following:

* **Group Collapsible rating** 
  * This group contains a star rating input where a user can click on one of the stars to submit a rating.
  * The user's rating will be temporarily stored in **Group inner rating\_number** which has a number data type.
  * This group will be hidden when **Group inner rating\_number's** data source is not empty (i.e., the user has selected a star rating).
* **Group Collapsible feedback**
  * This group contains a multiline input for user feedback and two buttons.
  * This group will be hidden when **Group inner rating\_number's** data source is empty (i.e., the user hasn't selected a star rating yet).
* The popup can't be closed by pressing 'Esc'.
* Clicking on Button Not now or Button Send feedback will close the popup.

## How to set up

* Update the content in **Group Inner top section rating**
  * You can use this [website](https://www.manypixels.co/gallery/) to add new graphics or change colors
  * Update title 
  * Update background color
* Add a workflow on the page to show **Popup ratingPopup**
  * In this workflow, before the show popup step, add a new workflow step to Reset Group inner rating\_number (this will reset the popup to show **Group Collapsible rating**).
* Add a workflow to **Button Send feedback**
  * For example, you may want to send an email or save the rating to the database