Adding Rosie Reviews to a Site

Add an HTML block to the site with this code. Change out the image file with a customized image matching the site.

<div class="review-wrapper">
  <div class="stars">
    <!-- Add as many stars as you need -->
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
  </div>

  <div class="reviews-btn-area">
    <button class="reviews-submit-btn">
        <img src="https://2020searchpartners.com/wp-content/uploads/2024/05/reviewsbutton-1.png" style="width: 100%;" />
    </button>
  </div>
</div>

Under the Advanced section tab on the HTML box, add this CSS code. Change colors for the stars to brand colors.

:root {
  --star-stroke: #050608;
  --star-fill: #9E1C36;
  --star-stroke-width: 1;
  --submit-btn-bg-color: #9E1C36;
  --submit-btn-color: #fff;
}

body {
  width: 100vw;
  height: 100vh;
}
.review-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stars {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.star {
  width: 100px;
  height: 100px;
  /* background-color: #f1c40f; */
  /* border-radius: 50%; */
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.star-svg path {
    transition: fill 0.1s ease;
}

.star:hover {
  transform: scale(1.2);
}

.star-svg path {
  stroke: var(--star-stroke);
  fill: var(--star-fill);
  stroke-width: var(--star-stroke-width);
}

.reviews-btn-area {
  padding: 10px;
  margin: 20px;
}

.reviews-submit-btn {
    max-width: 300px;
  /*padding: 10px 20px;*/
  /*background-color: var(--submit-btn-bg-color);*/
  /*color: var(--submit-btn-color);*/
  border: none;
  /*border-radius: 5px;*/
  cursor: pointer;
  /*text-transform: uppercase;*/
  /*font-weight: bold;*/
}

.reviews-submit-btn:hover {
    background: none;
  /*transform: scale(1.1);*/
}:root {
  --star-stroke: #050608;
  --star-fill: #9E1C36;
  --star-stroke-width: 1;
  --submit-btn-bg-color: #9E1C36;
  --submit-btn-color: #fff;
}

body {
  width: 100vw;
  height: 100vh;
}
.review-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stars {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.star {
  width: 100px;
  height: 100px;
  /* background-color: #f1c40f; */
  /* border-radius: 50%; */
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.star-svg path {
    transition: fill 0.1s ease;
}

.star:hover {
  transform: scale(1.2);
}

.star-svg path {
  stroke: var(--star-stroke);
  fill: var(--star-fill);
  stroke-width: var(--star-stroke-width);
}

.reviews-btn-area {
  padding: 10px;
  margin: 20px;
}

.reviews-submit-btn {
    max-width: 300px;
  /*padding: 10px 20px;*/
  /*background-color: var(--submit-btn-bg-color);*/
  /*color: var(--submit-btn-color);*/
  border: none;
  /*border-radius: 5px;*/
  cursor: pointer;
  /*text-transform: uppercase;*/
  /*font-weight: bold;*/
}

.reviews-submit-btn:hover {
    background: none;
  /*transform: scale(1.1);*/
}


/* star adjustment */

@media screen and (max-width: 800px) {
    .star { width: 70px!important; height: 70px!important; }
}

Go to gear at the bottom of the sidebar and click the Advanced tab. Add this code to the Custom JS section and customize the redirectForReviewsSites URL to the provided URL.

// *****************************************************
// Configuration
const starOutline = "#050608";
const starFill = "#9E1C36";
const starEmptyColor = "white"
const starStrokeWidth = 1;
const submitBtnBgColor = "#9E1C36";
const submitBtnColor = "#ffffff";
const redirectForReviewsSite = 'https://r.vsms.cc/#/2020search?rating=';
// *****************************************************

// update stars based on checked state
const updateStars = () => {
  const stars = jQuery(".star");
  stars.each((index, star) => {
    const starSvg = jQuery(star).find("svg");
    const isChecked = jQuery(star).hasClass("star-checked");
    if (isChecked) {
      jQuery(starSvg).find("path").css("fill", starFill);
    } else {
      jQuery(starSvg).find("path").css("fill", starEmptyColor);
    }
  });
};

// Sets the initial css variables
// and run intial update
const initializeReviewsWidget = () => {
  document.documentElement.style.setProperty("--star-stroke", starOutline);
  document.documentElement.style.setProperty("--star-fill", starFill);
  document.documentElement.style.setProperty(
    "--star-stroke-width",
    starStrokeWidth
  );
  document.documentElement.style.setProperty(
    "--submit-btn-bg-color",
    submitBtnBgColor
  );
  document.documentElement.style.setProperty(
    "--submit-btn-color",
    submitBtnColor
  );

  updateStars();
};

const onSubmit = () => {
  const numSelectedStars = jQuery(".star-checked").length;
  console.log(numSelectedStars);
  
  window.location.href=redirectForReviewsSite + numSelectedStars;
};

// MAIN
// *****************************************************
document.addEventListener("DOMContentLoaded", () => {
  // Create the star svg inside each star div
  jQuery(".star").html(function () {
    return `<svg style="width: 100%; height: 100%" viewBox="0 0 24 24" class="star-svg">
            <path
              d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
            />
          </svg>`;
  });

  initializeReviewsWidget();

  // When hovering over stars, it shows the state you may be setting
  // so when the mouse leaves the area, update and make sure the stars
  // are in the correct state
  jQuery(".stars").hover(
    () => {},
    () => {
      updateStars();
    }
  );

  // when hovering over a star, all stars before it should be filled
  // when hovering out, all stars should return to their original state
  jQuery(".star").hover(
    function () {
      // mouse enter
      jQuery(this).find("path").css("fill", starFill);
      jQuery(this).prevAll().find("path").css("fill", starFill);
      jQuery(this).nextAll().find("path").css("fill", starEmptyColor);
    },
    function () {
      // mouse leave
      jQuery(this).find("path").css("fill", starEmptyColor);
      jQuery(this).prevAll().find("path").css("fill", starEmptyColor);
    }
  );

  // sets the state of the stars to checked or unchecked
  // when clicking on a star, all stars before it should be have
  // the star-checked class toggled and then update the stars
  jQuery(".star").click(function () {
    jQuery(this).addClass("star-checked");
    jQuery(this).prevAll().addClass("star-checked");
    jQuery(this).nextAll().removeClass("star-checked");
    updateStars();
  });

  jQuery(".reviews-submit-btn").click(onSubmit);
});