Free Testimonial Slider Widget

<script src="https://hayneslab.dev/widgets/testimonial-slider.js" data-hl-config='[{"quote":"They rebuilt our site in two weeks and online bookings doubled the first month. Easiest money we ever spent.","name":"Maria S.","role":"Owner, Bloom Boutique"},{"quote":"Finally a web team that answers the phone. The new page loads instantly and customers mention it constantly.","name":"James T.","role":"GM, Ridgeline Auto"},{"quote":"We went from invisible to booked out three weeks ahead. The testimonials section alone sells the job.","name":"Priya K.","role":"Founder, Lumen Studio"}]' async></script>
<!-- Free Testimonial Slider widget by haynes lab — https://hayneslab.dev/tools/widgets/testimonial-slider -->

<!-- Free Testimonial Slider widget by haynes lab — https://hayneslab.dev/tools/widgets/testimonial-slider -->
<script data-hl-config='[{"quote":"They rebuilt our site in two weeks and online bookings doubled the first month. Easiest money we ever spent.","name":"Maria S.","role":"Owner, Bloom Boutique"},{"quote":"Finally a web team that answers the phone. The new page loads instantly and customers mention it constantly.","name":"James T.","role":"GM, Ridgeline Auto"},{"quote":"We went from invisible to booked out three weeks ahead. The testimonials section alone sells the job.","name":"Priya K.","role":"Founder, Lumen Studio"}]'>
/*!
 * haynes lab — Testimonial Slider widget (free)
 * Docs & embed code: https://hayneslab.dev/tools/widgets/testimonial-slider
 */
(function () {
  'use strict';

  var PREFIX = 'hlw-testimonial-slider';
  var STYLE_ID = 'hlw-testimonial-slider-styles';

  function findScript() {
    return document.currentScript ||
      document.querySelector('script[src*="widgets/testimonial-slider.js"]');
  }

  function injectStyles() {
    if (document.getElementById(STYLE_ID)) return;
    var css =
      '.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
      '.' + PREFIX + ' { position: relative; max-width: 720px; margin: 0 auto; padding: 32px 56px 40px;' +
      ' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
      ' font-size: 16px; line-height: 1.5; color: #1f2937; background: #ffffff;' +
      ' border: 1px solid #e5e7eb; border-radius: 12px; text-align: center; }' +
      '.' + PREFIX + '__mark { font-size: 48px; line-height: 1; display: block; margin-bottom: 8px;' +
      ' font-family: Georgia, "Times New Roman", serif; }' +
      '.' + PREFIX + '__viewport { overflow: hidden; }' +
      '.' + PREFIX + '__track { display: flex; transition: transform 0.45s ease; }' +
      '.' + PREFIX + '__slide { flex: 0 0 100%; min-width: 0; padding: 0 4px; }' +
      '.' + PREFIX + '__quote { margin: 0 0 16px; font-size: 17px; color: #374151; }' +
      '.' + PREFIX + '__name { font-weight: 600; font-size: 15px; color: #111827; }' +
      '.' + PREFIX + '__role { font-size: 13px; color: #6b7280; margin-top: 2px; }' +
      '.' + PREFIX + '__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px;' +
      ' border: 1px solid #e5e7eb; border-radius: 50%; background: #ffffff; color: #6b7280; font-size: 18px;' +
      ' line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }' +
      '.' + PREFIX + '__arrow:hover { color: var(--hlw-accent); border-color: var(--hlw-accent); }' +
      '.' + PREFIX + '__arrow:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
      '.' + PREFIX + '__arrow--prev { left: 10px; }' +
      '.' + PREFIX + '__arrow--next { right: 10px; }' +
      '.' + PREFIX + '__dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }' +
      '.' + PREFIX + '__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;' +
      ' background: #d1d5db; cursor: pointer; }' +
      '.' + PREFIX + '__dot[aria-current="true"] { background: var(--hlw-accent); }' +
      '.' + PREFIX + '__dot:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
      '.' + PREFIX + '__credit { position: absolute; right: 10px; bottom: 6px; font-size: 11px;' +
      ' display: inline-flex; align-items: center; gap: 4px; color: #9ca3af; text-decoration: none; }' +
      '.' + PREFIX + '__credit svg { display: block; }' +
      '.' + PREFIX + '__credit:hover { color: #6b7280; text-decoration: underline; }' +
      '@media (max-width: 560px) { .' + PREFIX + ' { padding: 24px 44px 38px; } }';
    var style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = css;
    document.head.appendChild(style);
  }

  function parseTestimonials(script) {
    var raw = script.getAttribute('data-hl-config');
    if (!raw) {
      console.warn('[haynes lab testimonial-slider] Missing required data-hl-config attribute (JSON array of {quote, name, role}). Nothing rendered.');
      return null;
    }
    var items;
    try {
      items = JSON.parse(raw);
    } catch (e) {
      console.warn('[haynes lab testimonial-slider] data-hl-config is not valid JSON. Nothing rendered.', e);
      return null;
    }
    if (!Array.isArray(items)) {
      console.warn('[haynes lab testimonial-slider] data-hl-config must be a JSON array. Nothing rendered.');
      return null;
    }
    var valid = items.filter(function (t) {
      return t && typeof t.quote === 'string' && t.quote && typeof t.name === 'string' && t.name;
    });
    if (!valid.length) {
      console.warn('[haynes lab testimonial-slider] data-hl-config has no valid testimonials (each needs at least "quote" and "name"). Nothing rendered.');
      return null;
    }
    return valid;
  }

  function el(tag, className, text) {
    var node = document.createElement(tag);
    if (className) node.className = className;
    if (text != null) node.textContent = text;
    return node;
  }

  function logoSvg() {
    var svgNS = 'http://www.w3.org/2000/svg';
    var svg = document.createElementNS(svgNS, 'svg');
    svg.setAttribute('viewBox', '0 0 32 32');
    svg.setAttribute('width', '13');
    svg.setAttribute('height', '13');
    svg.setAttribute('aria-hidden', 'true');
    svg.setAttribute('focusable', 'false');
    function circle(cx, cy, r, attrs) {
      var c = document.createElementNS(svgNS, 'circle');
      c.setAttribute('cx', cx);
      c.setAttribute('cy', cy);
      c.setAttribute('r', r);
      for (var key in attrs) c.setAttribute(key, attrs[key]);
      svg.appendChild(c);
    }
    circle(16, 16, 16, { fill: '#0f0a0a' });
    circle(16, 16, 12, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.3 });
    circle(16, 16, 9, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.5 });
    circle(16, 16, 6, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1.2, opacity: 0.9 });
    circle(16, 16, 3, { fill: '#06b6d4' });
    circle(24.5, 7.5, 2, { fill: '#f97316' });
    circle(7, 16, 1.8, { fill: '#f97316' });
    circle(20, 20, 1.5, { fill: '#f97316' });
    return svg;
  }

  function build(script) {
    var items = parseTestimonials(script);
    if (!items) return;

    var autoplay = script.getAttribute('data-hl-autoplay') !== 'false';
    var interval = parseInt(script.getAttribute('data-hl-interval'), 10);
    if (isNaN(interval) || interval < 3000) interval = 6000;
    var accent = script.getAttribute('data-hl-accent') || '#f97316';

    injectStyles();

    var root = el('div', PREFIX);
    root.setAttribute('role', 'region');
    root.setAttribute('aria-roledescription', 'carousel');
    root.setAttribute('aria-label', 'Testimonials');
    root.style.setProperty('--hlw-accent', accent);

    root.appendChild(el('span', PREFIX + '__mark', '“')).style.color = accent;

    var viewport = el('div', PREFIX + '__viewport');
    var track = el('div', PREFIX + '__track');
    viewport.appendChild(track);
    root.appendChild(viewport);

    items.forEach(function (t) {
      var slide = el('div', PREFIX + '__slide');
      slide.appendChild(el('p', PREFIX + '__quote', t.quote));
      slide.appendChild(el('div', PREFIX + '__name', t.name));
      if (t.role) slide.appendChild(el('div', PREFIX + '__role', String(t.role)));
      track.appendChild(slide);
    });

    var dots = el('div', PREFIX + '__dots');
    var index = 0;
    var timer = null;

    function go(i) {
      index = (i + items.length) % items.length;
      track.style.transform = 'translateX(-' + index * 100 + '%)';
      Array.prototype.forEach.call(dots.children, function (d, di) {
        d.setAttribute('aria-current', di === index ? 'true' : 'false');
      });
    }

    function stop() {
      if (timer) { clearInterval(timer); timer = null; }
    }
    function start() {
      if (autoplay && items.length > 1 && !timer) {
        timer = setInterval(function () { go(index + 1); }, interval);
      }
    }

    if (items.length > 1) {
      var prev = el('button', PREFIX + '__arrow ' + PREFIX + '__arrow--prev', '‹');
      prev.type = 'button';
      prev.setAttribute('aria-label', 'Previous testimonial');
      var next = el('button', PREFIX + '__arrow ' + PREFIX + '__arrow--next', '›');
      next.type = 'button';
      next.setAttribute('aria-label', 'Next testimonial');
      prev.addEventListener('click', function () { stop(); go(index - 1); start(); });
      next.addEventListener('click', function () { stop(); go(index + 1); start(); });
      root.appendChild(prev);
      root.appendChild(next);

      items.forEach(function (_, di) {
        var dot = el('button', PREFIX + '__dot');
        dot.type = 'button';
        dot.setAttribute('aria-label', 'Go to testimonial ' + (di + 1));
        dot.setAttribute('aria-current', di === 0 ? 'true' : 'false');
        dot.addEventListener('click', function () { stop(); go(di); start(); });
        dots.appendChild(dot);
      });
      root.appendChild(dots);

      root.addEventListener('mouseenter', stop);
      root.addEventListener('mouseleave', start);
      root.addEventListener('focusin', stop);
      root.addEventListener('focusout', start);
      start();
    }

    var credit = el('a', PREFIX + '__credit');
    credit.appendChild(logoSvg());
    credit.appendChild(document.createTextNode('Powered by haynes lab'));
    credit.href = 'https://hayneslab.dev/tools/widgets/testimonial-slider';
    credit.target = '_blank';
    credit.rel = 'noopener';
    root.appendChild(credit);

    if (script.parentNode && script.parentNode.nodeName !== 'HEAD') {
      script.insertAdjacentElement('afterend', root);
    } else {
      document.body.appendChild(root);
    }
  }

  function init() {
    var script = findScript();
    if (!script) {
      console.warn('[haynes lab testimonial-slider] Could not locate its own script tag. Nothing rendered.');
      return;
    }
    build(script);
  }

  if (document.body) {
    init();
  } else {
    document.addEventListener('DOMContentLoaded', init);
  }
})();

</script>