Rate out of 10 - Edit Component

Comment display

Comment result label (required)

help

Display text used for comment result controls and headings. Existing blank labels display as "submission".

6/80Comment result renderer (optional)

help

Custom component HTML/JS used to render a compact result with a comment. If left empty, the full component is rendered.

.ratingCommentSelectionVYgq7 {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #d6dbe2;
  border-radius: 10px;
  color: #18202a;
  display: flex;
  gap: 8px;
  min-height: 32px;
  padding: 4px 9px;
  width: fit-content;
}

.ratingCommentImageVYgq7 {
  background: #e9eef5;
  border-radius: 5px;
  flex: 0 0 auto;
  height: 32px;
  margin: 0 0 0 -5px;
  object-fit: cover;
  width: 32px;
}

.ratingCommentEmojiVYgq7 {
  flex: 0 0 auto;
  font-size: 19px;
  line-height: 1;
}

.ratingCommentScoreVYgq7 {
  align-items: center;
  appearance: none;
  background: linear-gradient(165deg, #f7f9fb, #f0f2f4, #e2f3ff, #e2f3ff, #e2f3ff, #e2f3ff);
  background-position: 100% 100%;
  background-size: 1000%;
  border: 1px solid #0af;
  border-radius: 9px;
  box-shadow:
    0 0 0 2px rgba(0, 170, 255, 0.22),
    0 0 10px -2px rgba(0, 10, 20, 0.08);
  box-sizing: border-box;
  color: #00050a;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 800;
  justify-content: center;
  line-height: 1;
  min-height: 30px;
  min-width: 48px;
  padding: 6px 9px;
  white-space: nowrap;
}

.ratingCommentScoreVYgq7--10 {
  background-image: linear-gradient(165deg, #f7f9fb, #f0f2f4, #e2f3ff, #e2f3ff, #ff930f, #fff95b);
  border-color: #ff5e12;
  box-shadow:
    0 0 0 2px rgb(255 88 0 / 22%),
    0 0 10px -2px rgb(20 6 0 / 8%);
}

.ratingCommentScoreVYgq7--9 {
  background-image: linear-gradient(165deg, #f7f9fb, #f0f2f4, #e2f3ff, #e2f3ff, #34ff55, #5de215);
  border-color: #5de215;
  box-shadow:
    0 0 0 2px rgba(51, 255, 0, 0.22),
    0 0 10px -2px rgba(51, 255, 0, 0.08);
}

.ratingCommentScoreVYgq7--2 {
  background-image: linear-gradient(165deg, #f7f9fb, #f0f2f4, #e2f3ff, #e2f3ff, #fff, #fafcfe);
  border-color: #10151a;
  box-shadow:
    0 0 0 2px rgb(100 110 120 / 8%),
    0 0 10px -2px rgb(100 110 120 / 5%);
}

.ratingCommentScoreVYgq7--1 {
  background-image: linear-gradient(165deg, #f7f9fb, #f0f2f4, #e2f3ff, #e2f3ff, #432500, #694900);
  border-color: #6b2200;
  box-shadow:
    0 0 0 2px rgb(255 88 0 / 8%),
    0 0 10px -2px rgb(20 6 0 / 5%);
  color: #fff;
}

.ratingCommentUnavailableVYgq7 {
  color: #5f6b7a;
  font-size: 14px;
}
</style>

if (!rootVYgq7) return;

var ratingVYgq7 =
    dataVYgq7.ratingStore &&
    dataVYgq7.ratingStore.userInput
      ? Number(dataVYgq7.ratingStore.userInput.rating)
      : NaN;

if (
    !Number.isInteger(ratingVYgq7) ||
    ratingVYgq7 < 1 ||
    ratingVYgq7 > 10
  ) {
    var unavailableVYgq7 = document.createElement("div");
    unavailableVYgq7.className = "ratingCommentUnavailableVYgq7";
    unavailableVYgq7.textContent = "Rating unavailable";
    rootVYgq7.appendChild(unavailableVYgq7);
    return;
  }

var rowVYgq7 = document.createElement("div");
  rowVYgq7.className = "ratingCommentSelectionVYgq7";

var imageDataVYgq7 = dataVYgq7.image;
  var imageSrcVYgq7 = "";
  var imageSrcsetVYgq7 = "";

if (typeof imageDataVYgq7 === "string") {
    imageSrcVYgq7 = imageDataVYgq7;
  } else if (
    imageDataVYgq7 &&
    typeof imageDataVYgq7 === "object"
  ) {
    imageSrcVYgq7 = imageDataVYgq7.src || "";
    imageSrcsetVYgq7 = imageDataVYgq7.srcset || "";
  }

if (imageSrcVYgq7) {
    var imageVYgq7 = document.createElement("img");
    imageVYgq7.className = "ratingCommentImageVYgq7";
    imageVYgq7.src = imageSrcVYgq7;
    imageVYgq7.alt = "";
    imageVYgq7.loading = "lazy";
    imageVYgq7.sizes = "32px";

if (imageSrcsetVYgq7) {
      imageVYgq7.srcset = imageSrcsetVYgq7;
    }

rowVYgq7.appendChild(imageVYgq7);
  }

var emojiByRatingVYgq7 = {
    10: "🔥",
    9: "💚",
    2: "💀",
    1: "💩"
  };

if (emojiByRatingVYgq7[ratingVYgq7]) {
    var emojiVYgq7 = document.createElement("span");
    emojiVYgq7.className = "ratingCommentEmojiVYgq7";
    emojiVYgq7.textContent = emojiByRatingVYgq7[ratingVYgq7];
    rowVYgq7.appendChild(emojiVYgq7);
  }

var scoreVYgq7 = document.createElement("span");
  scoreVYgq7.className =
    "ratingCommentScoreVYgq7 ratingCommentScoreVYgq7--" +
    ratingVYgq7;
  scoreVYgq7.textContent = ratingVYgq7 + "/10";

rowVYgq7.appendChild(scoreVYgq7);
  rootVYgq7.appendChild(rowVYgq7);
})();
</script>

4464/200000

Comment display

Component Tips Hide