Free website tool

Build a review widget. Keep it forever.

Add your reviews, see the result instantly, then copy one self-contained block of HTML, CSS, and JavaScript. No account, database, or monthly bill.

No accountNo trackingNo dependencies

01Add your reviews

02Style the live preview

03Copy the finished code

Your reviews

3 / 8

Review 1

NameDetailRatingReview text

Review 2

NameDetailRatingReview text

Review 3

NameDetailRatingReview text

Your ready-to-use code

HTML + CSS + JavaScript in one block

<!-- Free review widget by CarrdTemplates.com -->
<div class="ctr-widget" data-ctr-widget data-theme="dark" data-ctr-per-view="1" data-ctr-total="3" tabindex="0" aria-label="Customer reviews">
  <div class="ctr-card">
    <div class="ctr-pages">
    <div class="ctr-page" data-ctr-start="1" data-ctr-end="1">
      <article class="ctr-slide">
      <div class="ctr-stars" aria-label="5 out of 5 stars">★★★★★<span></span></div>
      <blockquote>The whole experience felt effortless. Everything was clear, fast, and thoughtfully handled.</blockquote>
      <footer>
        <span class="ctr-avatar" aria-hidden="true">MC</span>
        <span class="ctr-person">
          <strong>Maya Chen</strong>
          <small>Verified customer</small>
        </span>
      </footer>
    </article>
    </div>
    <div class="ctr-page" data-ctr-start="2" data-ctr-end="2" hidden>
      <article class="ctr-slide">
      <div class="ctr-stars" aria-label="5 out of 5 stars">★★★★★<span></span></div>
      <blockquote>Fast, thoughtful, and exactly what I needed. I would happily recommend them to anyone.</blockquote>
      <footer>
        <span class="ctr-avatar" aria-hidden="true">JR</span>
        <span class="ctr-person">
          <strong>Jonas Reed</strong>
          <small>Local client</small>
        </span>
      </footer>
    </article>
    </div>
    <div class="ctr-page" data-ctr-start="3" data-ctr-end="3" hidden>
      <article class="ctr-slide">
      <div class="ctr-stars" aria-label="5 out of 5 stars">★★★★★<span></span></div>
      <blockquote>Great communication from start to finish, and the final result was even better than expected.</blockquote>
      <footer>
        <span class="ctr-avatar" aria-hidden="true">EM</span>
        <span class="ctr-person">
          <strong>Elena Martin</strong>
          <small>Returning customer</small>
        </span>
      </footer>
    </article>
    </div>
    </div>
    <div class="ctr-controls">
      <div class="ctr-arrows">
        <button class="ctr-arrow" type="button" data-ctr-prev aria-label="Previous reviews">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
        </button>
        <button class="ctr-arrow" type="button" data-ctr-next aria-label="Next reviews">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
        </button>
      </div>
      <div class="ctr-dots" aria-label="Choose review page">
      <button type="button" data-ctr-dot="0" aria-label="Show review 1" aria-current="true"></button>
      <button type="button" data-ctr-dot="1" aria-label="Show review 2"></button>
      <button type="button" data-ctr-dot="2" aria-label="Show review 3"></button>
      </div>
      <span class="ctr-count" data-ctr-count>1 / 3</span>
    </div>
  </div>
</div>
<style>
.ctr-widget{--ctr-accent:#2EA0FF;--ctr-radius:16px;--ctr-bg:#151515;--ctr-text:#FFFFFF;--ctr-muted:#FFFFFF99;--ctr-line:rgba(255,255,255,.12);--ctr-avatar:#242424;position:relative;width:100%;max-width:1120px;color:var(--ctr-text);font-family:inherit;box-sizing:border-box}
.ctr-widget[data-ctr-per-view="1"]{max-width:760px}
.ctr-widget[data-theme="light"]{--ctr-bg:#fff;--ctr-line:rgba(0,0,0,.12);--ctr-avatar:#f1f3f5}
.ctr-widget *{box-sizing:border-box}
.ctr-card{min-height:310px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(24px,5vw,48px);background:var(--ctr-bg);border:1px solid var(--ctr-line);border-radius:var(--ctr-radius);overflow:hidden}
.ctr-pages{min-width:0}
.ctr-page{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px}
.ctr-page[hidden]{display:none!important}
.ctr-slide{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-width:0;margin:0}
.ctr-widget[data-ctr-per-view="1"] .ctr-slide{min-height:220px}
.ctr-widget:not([data-ctr-per-view="1"]) .ctr-card{padding:16px}
.ctr-widget:not([data-ctr-per-view="1"]) .ctr-slide{min-height:260px;padding:22px;background:var(--ctr-avatar);border:1px solid var(--ctr-line);border-radius:max(8px,calc(var(--ctr-radius) - 4px))}
.ctr-stars{color:var(--ctr-accent);font-size:18px;line-height:1;letter-spacing:2px}
.ctr-stars span{opacity:.28}
.ctr-slide blockquote{margin:0;color:var(--ctr-text);font-size:clamp(22px,4vw,34px);font-weight:600;line-height:1.2;letter-spacing:-.035em}
.ctr-widget:not([data-ctr-per-view="1"]) .ctr-slide blockquote{font-size:19px;letter-spacing:-.025em}
.ctr-slide footer{display:flex;align-items:center;gap:12px;margin-top:4px}
.ctr-avatar{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:var(--ctr-avatar);border:1px solid var(--ctr-line);color:var(--ctr-text);font-size:13px;font-weight:700}
.ctr-widget:not([data-ctr-per-view="1"]) .ctr-avatar{background:var(--ctr-bg)}
.ctr-person{display:flex;flex-direction:column;gap:3px;min-width:0}
.ctr-person strong{font-size:14px;line-height:1.2}
.ctr-person small{color:var(--ctr-muted);font-size:13px;line-height:1.25}
.ctr-controls{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ctr-arrows{display:flex;gap:8px}
.ctr-arrow{width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid var(--ctr-line);border-radius:10px;background:transparent;color:var(--ctr-text);cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.ctr-arrow:hover{background:var(--ctr-avatar);border-color:var(--ctr-accent)}
.ctr-arrow:active{transform:scale(.96)}
.ctr-arrow:disabled{opacity:.35;cursor:not-allowed;transform:none}
.ctr-arrow svg{width:16px;height:16px}
.ctr-dots{display:flex;align-items:center;gap:7px}
.ctr-dots button{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:var(--ctr-muted);opacity:.35;cursor:pointer;transition:width .2s ease,opacity .2s ease,background .2s ease}
.ctr-dots button[aria-current="true"]{width:24px;background:var(--ctr-accent);opacity:1}
.ctr-count{color:var(--ctr-muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:520px){.ctr-card{min-height:290px;padding:24px}.ctr-widget:not([data-ctr-per-view="1"]) .ctr-card{padding:12px}.ctr-widget:not([data-ctr-per-view="1"]) .ctr-slide{min-height:230px;padding:18px}.ctr-slide blockquote{font-size:24px}.ctr-widget:not([data-ctr-per-view="1"]) .ctr-slide blockquote{font-size:18px}.ctr-controls{gap:10px}}
@media(prefers-reduced-motion:reduce){.ctr-widget *{scroll-behavior:auto!important;transition:none!important}}
</style>
<script>
(function(){
  function init(root){
    if(root.dataset.ctrReady) return;
    root.dataset.ctrReady="true";
    var pages=Array.prototype.slice.call(root.querySelectorAll(".ctr-page"));
    var dots=Array.prototype.slice.call(root.querySelectorAll("[data-ctr-dot]"));
    var count=root.querySelector("[data-ctr-count]");
    var current=0;
    function show(next){
      current=(next+pages.length)%pages.length;
      pages.forEach(function(page,index){page.hidden=index!==current});
      dots.forEach(function(dot,index){
        if(index===current){dot.setAttribute("aria-current","true")}
        else{dot.removeAttribute("aria-current")}
      });
      var page=pages[current];
      var start=Number(page.dataset.ctrStart)||1;
      var end=Number(page.dataset.ctrEnd)||start;
      var total=Number(root.dataset.ctrTotal)||end;
      if(count) count.textContent=(end>start?start+"–"+end:start)+" / "+total;
    }
    var prev=root.querySelector("[data-ctr-prev]");
    var next=root.querySelector("[data-ctr-next]");
    if(prev) prev.disabled=pages.length<=1;
    if(next) next.disabled=pages.length<=1;
    if(prev) prev.addEventListener("click",function(){show(current-1)});
    if(next) next.addEventListener("click",function(){show(current+1)});
    dots.forEach(function(dot){dot.addEventListener("click",function(){show(Number(dot.dataset.ctrDot))})});
    root.addEventListener("keydown",function(event){
      if(event.key==="ArrowLeft") show(current-1);
      if(event.key==="ArrowRight") show(current+1);
    });
    show(0);
  }
  document.querySelectorAll("[data-ctr-widget]").forEach(init);
})();
</script>

Paste the complete block into any HTML or Embed element. Reviews are stored inside the code itself; nothing is sent to us or loaded from a server.

CarrdFramerWebflowWordPressAny HTML site

CARRD TEMPLATES

CARRD TEMPLATES

Build a review widget. Keep it forever.

Your reviews

Your ready-to-use code

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1395+ customers.

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1327+ customers.

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1395+ customers.