Widgets

Rating cards

<!-- Widget -->
<div>
  <!-- Widget iframe -->
  <iframe class="widget-card-basic" src="widgets/rating-card-basic/index.html" style="width: 100%; border: 0;" loading="lazy" title="Rating card"></iframe>
  <!-- Widget iframe auto-height script on resize -->
  <script>window.addEventListener("message",e=>{if("resize-iframe"===e.data.type){let t=document.querySelectorAll(".widget-card-basic");t.forEach(t=>{t.contentWindow===e.source&&(t.style.height=e.data.height+"px")})}});</script>
</div>

<!-- Widget -->
<div>
  <!-- Widget iframe -->
  <iframe class="widget-card-compact" src="widgets/rating-card-compact/index.html" style="width: 100%; border: 0;" loading="lazy" title="Rating card"></iframe>
  <!-- Widget iframe auto-height script on resize -->
  <script>window.addEventListener("message",e=>{if("resize-iframe"===e.data.type){let t=document.querySelectorAll(".widget-card-compact");t.forEach(t=>{t.contentWindow===e.source&&(t.style.height=e.data.height+"px")})}});</script>
</div>

<!-- Widget -->
<div>
  <!-- Widget iframe -->
  <iframe class="widget-card-flat" src="widgets/rating-card-flat/index.html" style="width: 100%; border: 0;" loading="lazy" title="Rating card"></iframe>
  <!-- Widget iframe auto-height script on resize -->
  <script>window.addEventListener("message",e=>{if("resize-iframe"===e.data.type){let t=document.querySelectorAll(".widget-card-flat");t.forEach(t=>{t.contentWindow===e.source&&(t.style.height=e.data.height+"px")})}});</script>
</div>

Rating bars

<!-- Widget -->
<div>
  <!-- Widget iframe -->
  <iframe class="widget-bar-basic" src="widgets/rating-bar-basic/index.html" style="width: 100%; border: 0;" loading="lazy" title="Rating bar"></iframe>
  <!-- Widget iframe auto-height script on resize -->
  <script>window.addEventListener("message",e=>{if("resize-iframe"===e.data.type){let t=document.querySelectorAll(".widget-bar-basic");t.forEach(t=>{t.contentWindow===e.source&&(t.style.height=e.data.height+"px")})}});</script>
</div>

<!-- Widget -->
<div>
  <!-- Widget iframe -->
  <iframe class="widget-bar-score" src="widgets/rating-bar-score/index.html" style="width: 100%; border: 0;" loading="lazy" title="Rating bar"></iframe>
  <!-- Widget iframe auto-height script on resize -->
  <script>window.addEventListener("message",e=>{if("resize-iframe"===e.data.type){let t=document.querySelectorAll(".widget-bar-score");t.forEach(t=>{t.contentWindow===e.source&&(t.style.height=e.data.height+"px")})}});</script>
</div>

<!-- Widget -->
<div>
  <!-- Widget iframe -->
  <iframe class="widget-bar-review" src="widgets/rating-bar-review/index.html" style="width: 100%; border: 0;" loading="lazy" title="Rating bar"></iframe>
  <!-- Widget iframe auto-height script on resize -->
  <script>window.addEventListener("message",e=>{if("resize-iframe"===e.data.type){let t=document.querySelectorAll(".widget-bar-review");t.forEach(t=>{t.contentWindow===e.source&&(t.style.height=e.data.height+"px")})}});</script>
</div>

Reviews

<!-- Widget -->
<div>
  <!-- Widget iframe -->
  <iframe class="widget-review-basic" src="widgets/review-basic/index.html" style="width: 100%; border: 0;" loading="lazy" title="Review"></iframe>
  <!-- Widget iframe auto-height script on resize -->
  <script>window.addEventListener("message",e=>{if("resize-iframe"===e.data.type){let t=document.querySelectorAll(".widget-review-basic");t.forEach(t=>{t.contentWindow===e.source&&(t.style.height=e.data.height+"px")})}});</script>
</div>

<!-- Widget -->
<div>
  <!-- Widget iframe -->
  <iframe class="widget-review-slider" src="widgets/review-slider/index.html" style="width: 100%; border: 0;" loading="lazy" title="Review"></iframe>
  <!-- Widget iframe auto-height script on resize -->
  <script>window.addEventListener("message",e=>{if("resize-iframe"===e.data.type){let t=document.querySelectorAll(".widget-review-slider");t.forEach(t=>{t.contentWindow===e.source&&(t.style.height=e.data.height+"px")})}});</script>
</div>