Free Testimonial & Review Widget for Carrd

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 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap">
<div class="ctr-widget" style="--ctr-font:&quot;Inter&quot;, Arial, sans-serif" data-ctr-widget data-ctr-layout="slider" data-theme="dark" data-ctr-per-view="1" data-ctr-visible="1" data-ctr-min-width="210" data-ctr-total="3" onclick="var c=event.target&&event.target.closest?event.target.closest('[data-ctr-prev],[data-ctr-next],[data-ctr-dot]'):null;if(!c)return;var a=window.__ctrReviewWidgetV2;if(a&&a.has&&a.has(this))return;var s=Array.prototype.slice.call(this.querySelectorAll('.ctr-slide')),p=this.querySelector('.ctr-page'),g=p?parseFloat(getComputedStyle(p).columnGap)||0:0,r=Math.max(1,Number(this.dataset.ctrPerView)||1),m=Math.max(1,Number(this.dataset.ctrMinWidth)||210),w=(p&&p.clientWidth)||this.clientWidth,f=w?Math.floor((w+g)/(m+g)):r,v=Math.max(1,Math.min(r,f)),n=Math.max(1,Math.ceil(s.length/v)),d=c.getAttribute('data-ctr-dot'),q=Number(this.dataset.ctrPage)||0;q=d!==null?(Number(d)||0):((q+(c.hasAttribute('data-ctr-next')?1:-1))%n+n)%n;var b=q*v,e=Math.min(b+v,s.length);this.dataset.ctrFallbackReady='true';this.dataset.ctrPage=String(q);this.dataset.ctrVisible=String(v);if(p)p.style.setProperty('--ctr-visible-columns',String(v));s.forEach(function(x,i){x.hidden=!(i>=b&&e>i)});var h=this.querySelector('.ctr-dots'),z=h?Array.prototype.slice.call(h.querySelectorAll('button')):[];if(h&&z.length!==n){h.innerHTML='';for(var i=0;n>i;i++){var o=document.createElement('button'),j=i*v+1,k=Math.min(j+v-1,s.length);o.type='button';o.dataset.ctrDot=String(i);o.setAttribute('aria-label',j===k?'Show review '+j:'Show reviews '+j+' to '+k);h.appendChild(o)}z=Array.prototype.slice.call(h.querySelectorAll('button'))}z.forEach(function(o,i){if(i===q)o.setAttribute('aria-current','true');else o.removeAttribute('aria-current')});var y=this.querySelector('[data-ctr-count]');if(y)y.textContent=(e>b+1?b+1+'–'+e:b+1)+' / '+s.length;var l=this.querySelector('[data-ctr-prev]'),t=this.querySelector('[data-ctr-next]');if(l)l.disabled=2>n;if(t)t.disabled=2>n;" tabindex="0" aria-label="Customer reviews">
  <div class="ctr-card">
    <div class="ctr-pages">
    <div class="ctr-page">
      <article class="ctr-slide" data-ctr-index="0">
      <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>
      <article class="ctr-slide" data-ctr-index="1" hidden>
      <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>
      <article class="ctr-slide" data-ctr-index="2" hidden>
      <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-card-bg:#242424;--ctr-card-radius:0.75rem;--ctr-gutter:0.75rem;--ctr-slider-columns:1;--ctr-visible-columns:1;--ctr-min-card-width:210px;--ctr-grid-track:max(210px,calc(100% - 0rem));--ctr-text:#FFFFFF;--ctr-muted:#FFFFFF99;--ctr-line:#FFFFFF1F;--ctr-quote-weight:600;position:relative;display:block;width:100%;max-width:none;color:var(--ctr-text);font-family:var(--ctr-font,Inter,Arial,sans-serif);box-sizing:border-box;margin:0;padding:0;background:transparent;border:0}
.ctr-widget *{box-sizing:border-box}
.ctr-widget[data-ctr-widget],.ctr-widget[data-ctr-widget] *{font-family:var(--ctr-font,Inter,Arial,sans-serif)!important}
.ctr-card{width:100%;min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px;margin:0;padding:0;background:transparent;border:0;border-radius:0;overflow:hidden}
.ctr-pages{width:100%;min-width:0}
.ctr-page{width:100%;align-items:stretch;gap:var(--ctr-gutter)}
.ctr-widget[data-ctr-layout="grid"] .ctr-page{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--ctr-grid-track)),1fr))}
.ctr-widget[data-ctr-layout="slider"] .ctr-pages{overflow:hidden}
.ctr-widget[data-ctr-layout="slider"] .ctr-page{display:grid;grid-template-columns:repeat(var(--ctr-visible-columns),minmax(min(100%,var(--ctr-min-card-width)),1fr))}
.ctr-widget .ctr-slide[hidden]{display:none!important}
.ctr-slide{display:flex;width:100%;height:100%;flex-direction:column;justify-content:space-between;gap:24px;min-width:0;min-height:260px;margin:0;padding:22px;background:var(--ctr-card-bg);border:0;border-radius:var(--ctr-card-radius)}
.ctr-widget[data-ctr-layout="slider"][data-ctr-visible="1"] .ctr-slide{min-height:290px;padding:clamp(24px,5vw,48px)}
.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:var(--ctr-quote-size,clamp(22px,4vw,34px));font-weight:var(--ctr-quote-weight,600);line-height:1.2;letter-spacing:-.035em;overflow-wrap:anywhere}
.ctr-widget[data-ctr-layout="grid"] .ctr-slide blockquote,.ctr-widget[data-ctr-layout="slider"]:not([data-ctr-visible="1"]) .ctr-slide blockquote{font-size:var(--ctr-quote-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-line);border:0;color:var(--ctr-text);font-size:13px;font-weight:700}
.ctr-person{display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
.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-card-bg);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:0;padding:0}.ctr-slide{min-height:230px;padding:18px}.ctr-widget[data-ctr-layout="slider"][data-ctr-visible="1"] .ctr-slide{min-height:260px;padding:24px}.ctr-slide blockquote{font-size:var(--ctr-quote-size,24px)}.ctr-widget[data-ctr-layout="grid"] .ctr-slide blockquote,.ctr-widget[data-ctr-layout="slider"]:not([data-ctr-visible="1"]) .ctr-slide blockquote{font-size:var(--ctr-quote-size,18px)}.ctr-controls{gap:10px}.ctr-widget[data-ctr-layout="slider"]:not([data-ctr-ready]):not([data-ctr-fallback-ready]) .ctr-page{grid-template-columns:minmax(0,1fr)}.ctr-widget[data-ctr-layout="slider"]:not([data-ctr-ready]):not([data-ctr-fallback-ready]) .ctr-slide:not(:first-child){display:none!important}}
@media(prefers-reduced-motion:reduce){.ctr-widget *{scroll-behavior:auto!important;transition:none!important}}
</style>
<script>
(function(){
  var globalKey="__ctrReviewWidgetV2";
  var api=window[globalKey];
  if(!api){
    var states=new WeakMap();
    function pages(state){return Math.max(1,Math.ceil(state.slides.length/state.perView))}
    function rebuildDots(state){
      if(!state.dotsHost) return;
      state.dotsHost.innerHTML="";
      state.dots=[];
      for(var index=0;index<pages(state);index++){
        var dot=document.createElement("button");
        var start=index*state.perView+1;
        var end=Math.min(start+state.perView-1,state.slides.length);
        dot.type="button";
        dot.dataset.ctrDot=String(index);
        dot.setAttribute("aria-label",start===end?"Show review "+start:"Show reviews "+start+" to "+end);
        state.dotsHost.appendChild(dot);
        state.dots.push(dot);
      }
    }
    function show(state,target){
      var pageCount=pages(state);
      state.current=((target%pageCount)+pageCount)%pageCount;
      var start=state.current*state.perView;
      var end=Math.min(start+state.perView,state.slides.length);
      state.root.dataset.ctrVisible=String(state.perView);
      state.root.dataset.ctrPage=String(state.current);
      if(state.page) state.page.style.setProperty("--ctr-visible-columns",String(state.perView));
      state.slides.forEach(function(slide,index){slide.hidden=index<start||index>=end});
      state.dots.forEach(function(dot,index){
        if(index===state.current){dot.setAttribute("aria-current","true")}
        else{dot.removeAttribute("aria-current")}
      });
      if(state.prevButton) state.prevButton.disabled=pageCount<=1;
      if(state.nextButton) state.nextButton.disabled=pageCount<=1;
      if(state.count) state.count.textContent=(end>start+1?start+1+"–"+end:start+1)+" / "+state.slides.length;
    }
    function resize(state){
      if(!state.page) return;
      state.gap=parseFloat(getComputedStyle(state.page).columnGap)||0;
      var width=state.page.clientWidth||state.root.clientWidth;
      var fitted=width>0?Math.floor((width+state.gap)/(state.minimum+state.gap)):state.requested;
      var nextPerView=Math.max(1,Math.min(state.requested,fitted));
      if(nextPerView!==state.perView){
        var anchor=state.current*state.perView;
        state.perView=nextPerView;
        state.current=Math.floor(anchor/state.perView);
        rebuildDots(state);
      }
      show(state,state.current);
    }
    function init(root){
      var existing=states.get(root);
      if(existing) return existing;
      if(root.dataset.ctrLayout!=="slider") return null;
      var state={
        root:root,
        page:root.querySelector(".ctr-page"),
        slides:Array.prototype.slice.call(root.querySelectorAll(".ctr-slide")),
        dotsHost:root.querySelector(".ctr-dots"),
        count:root.querySelector("[data-ctr-count]"),
        prevButton:root.querySelector("[data-ctr-prev]"),
        nextButton:root.querySelector("[data-ctr-next]"),
        requested:Math.max(1,Number(root.dataset.ctrPerView)||1),
        minimum:Math.max(1,Number(root.dataset.ctrMinWidth)||210),
        gap:parseFloat(getComputedStyle(root.querySelector(".ctr-page")).columnGap)||0,
        perView:Math.max(1,Number(root.dataset.ctrPerView)||1),
        current:0,
        dots:[]
      };
      states.set(root,state);
      root.dataset.ctrReady="true";
      rebuildDots(state);
      resize(state);
      if(typeof ResizeObserver!=="undefined"&&state.page){
        state.observer=new ResizeObserver(function(){resize(state)});
        state.observer.observe(state.page);
      }
      return state;
    }
    function boot(scope){
      if(scope&&scope.nodeType===1&&scope.matches("[data-ctr-widget]")) init(scope);
      if(scope&&scope.querySelectorAll){
        Array.prototype.forEach.call(scope.querySelectorAll("[data-ctr-widget]"),init);
      }
    }
    function findControl(target){
      return target&&target.closest?target.closest("[data-ctr-prev],[data-ctr-next],[data-ctr-dot]"):null;
    }
    document.addEventListener("click",function(event){
      var control=findControl(event.target);
      if(!control) return;
      var root=control.closest("[data-ctr-widget]");
      if(!root) return;
      var state=init(root);
      if(!state) return;
      if(control.hasAttribute("data-ctr-prev")) show(state,state.current-1);
      else if(control.hasAttribute("data-ctr-next")) show(state,state.current+1);
      else show(state,Number(control.dataset.ctrDot)||0);
    },true);
    document.addEventListener("keydown",function(event){
      if(event.key!=="ArrowLeft"&&event.key!=="ArrowRight") return;
      var root=event.target&&event.target.closest?event.target.closest("[data-ctr-widget]"):null;
      if(!root) return;
      var state=init(root);
      if(state) show(state,state.current+(event.key==="ArrowRight"?1:-1));
    },true);
    api=window[globalKey]={boot:boot,has:function(root){return states.has(root)}};
    if(typeof MutationObserver!=="undefined"){
      api.mutationObserver=new MutationObserver(function(records){
        records.forEach(function(record){
          Array.prototype.forEach.call(record.addedNodes,function(node){boot(node)});
        });
      });
      api.mutationObserver.observe(document.documentElement,{childList:true,subtree:true});
    }
    document.addEventListener("DOMContentLoaded",function(){boot(document)});
    window.addEventListener("pageshow",function(){boot(document)});
  }
  api.boot(document);
})();
</script>

Paste the complete block into any HTML or Embed element. Reviews are stored in the code. The selected font loads from Google Fonts. Set the section background and outer spacing in your site builder.

CarrdFramerWebflowWordPressAny HTML site

The Review Widget Builder is free thanks to you. Say thanks with a coffee on Ko-fi.

CARRD TEMPLATES

CARRD TEMPLATES

Build a review widget your way.

Build a review widget your way.

Your reviews

Your ready-to-use code

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Tools

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1486+ customers.

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Tools

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1486+ customers.

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Tools

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1486+ customers.