Rating Template

Overview

Marketers often want to gauge user sentiment on their website, for which there are several potential use cases, such as measuring customer satisfaction, collecting product and service feedback, gathering feedback on events, getting employee feedback, and receiving feedback on content. This guide will explain how to request user ratings using On-Site Messaging (OSM) and provide the necessary code to create a rating popup, as shown in the accompanying image.

Campaign Creation

Refer to this document to learn how to create an event triggered OSM campaign. The content and placement of the OSM require a Custom HTML template.

Custom HTML


<!DOCTYPE html>
<html>

<head>
    <title>HTML Rating Experiment</title>
    <script src="https://kit.fontawesome.com/a50bd68991.js" crossorigin="anonymous"></script>
    <style>
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#container {
  padding: 10px;
  border: solid 1px black;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
    background-color: white;
}
.title {
  padding: 0 10px 10px 10px;
  font-size: 2rem;
    text-align: center;
}
.star_rating {
  user-select: none;
}

.star {
  font-size: 3rem;
  color: black;
  background-color: unset;
  border: none;
  padding: 10px;
}

.star:hover {
  cursor: pointer;
}

.btn {
  width: 100%;
  padding: 5px;
  line-height: 2rem;
  font-size: 2rem;
  border-radius: 10px;
  border: none;
  background-color: green;
}
.close {
  margin-left: auto;
  border: none;
  background-color: white;
  padding: 5px;
}

.btn:hover {
  background-color: white;
  border: solid black;
  cursor: pointer;
}
        
.close:hover {
  background-color: black;
  color:white;
  
}
</style>
</head>

<body>
<div id="container">
  <button class="close moe-inapp-close">X</button>
<div id="change">
  <div class="title">How would you rate us?</div>
  <div class="star_rating">
    <i class="fa-regular fa-star star"></i>
    <i class="fa-regular fa-star star"></i>
    <i class="fa-regular fa-star star"></i>
    <i class="fa-regular fa-star star"></i>
    <i class="fa-regular fa-star star"></i>
  </div>
  <button class="btn" id="submit">Submit</button>
</div>
</div>
    <script>
const allStars = document.querySelectorAll(".star");

var rating;

allStars.forEach((star, i) => {

  star.onclick = function () {
     current_star_level = i + 1;
    rating=current_star_level;
    allStars.forEach((star, j) => {
      if (current_star_level >= j + 1) {
        star.classList.remove("fa-regular");
        star.classList.add("fa-solid");
      } else {
        star.classList.remove("fa-solid");
        star.classList.add("fa-regular");
      }

    });
  };
});

const submit = document.getElementById("submit")
const bod = document.getElementById("change")

submit.onclick = function(){
    window.parent.Moengage.track_event('Rating Submitted', {
    "rating": rating});
    bod.innerHTML = '<h1>Thanks for Submitting your rating!</h1>'
};
        
</script>
</body>

</html>

info	Note User Ratings can be analysed using Ratings Submitted event. This event can be located under User Behavior in Segmentation.