Free Product Badge Widget

<script src="https://hayneslab.dev/widgets/product-badge.js" data-hl-text="Sale, New, Bestseller" async></script>
<!-- Free Product Badge widget by haynes lab — https://hayneslab.dev/tools/widgets/product-badge -->

<!-- Free Product Badge widget by haynes lab — https://hayneslab.dev/tools/widgets/product-badge -->
<script data-hl-text="Sale, New, Bestseller">
/*!
 * haynes lab — Product Badge widget (free)
 * Docs & embed code: https://hayneslab.dev/tools/widgets/product-badge
 */
(function () {
  'use strict';

  var PREFIX = 'hlw-product-badge';
  var STYLE_ID = 'hlw-product-badge-styles';

  var PRESETS = {
    sale: '#dc2626',
    new: '#16a34a',
    bestseller: '#d97706',
    'best seller': '#d97706',
    hot: '#ea580c',
    limited: '#7c3aed',
    sold: '#6b7280',
    'sold out': '#6b7280',
  };

  var POSITIONS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];

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

  function injectStyles() {
    if (document.getElementById(STYLE_ID)) return;
    var css =
      '.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
      '.' + PREFIX + ' { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }' +
      '.' + PREFIX + '--inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }' +
      '.' + PREFIX + '__tag { display: inline-block; padding: 4px 10px; border-radius: 4px;' +
      ' font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;' +
      ' line-height: 1.4; white-space: nowrap; }' +
      '.' + PREFIX + '__tag--overlay { position: absolute; z-index: 10; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }' +
      '.' + PREFIX + '__tag--top-left { top: 8px; left: 8px; }' +
      '.' + PREFIX + '__tag--top-right { top: 8px; right: 8px; }' +
      '.' + PREFIX + '__tag--bottom-left { bottom: 8px; left: 8px; }' +
      '.' + PREFIX + '__tag--bottom-right { bottom: 8px; right: 8px; }' +
      '.' + PREFIX + '__credit { 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; }' +
      '.' + PREFIX + '__credit--overlay { position: absolute; right: 6px; bottom: 4px; z-index: 10; opacity: 0.8; }';
    var style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = css;
    document.head.appendChild(style);
  }

  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 makeCredit(overlay) {
    var credit = el('a', PREFIX + '__credit' + (overlay ? ' ' + PREFIX + '__credit--overlay' : ''));
    credit.appendChild(logoSvg());
    credit.appendChild(document.createTextNode('Powered by haynes lab'));
    credit.href = 'https://hayneslab.dev/tools/widgets/product-badge';
    credit.target = '_blank';
    credit.rel = 'noopener';
    return credit;
  }

  function badgeColor(label, bg) {
    if (bg) return bg;
    var preset = PRESETS[String(label).trim().toLowerCase()];
    return preset || '#f97316';
  }

  function makeTag(label, bg, textColor, position) {
    var cls = PREFIX + '__tag';
    if (position) cls += ' ' + PREFIX + '__tag--overlay ' + PREFIX + '__tag--' + position;
    var tag = el('span', cls, label);
    tag.style.backgroundColor = badgeColor(label, bg);
    tag.style.color = textColor;
    return tag;
  }

  function build(script) {
    var text = script.getAttribute('data-hl-text') || 'Sale';
    var bg = script.getAttribute('data-hl-bg') || '';
    var textColor = script.getAttribute('data-hl-text-color') || '#ffffff';
    var position = script.getAttribute('data-hl-position') || 'top-right';
    if (POSITIONS.indexOf(position) === -1) {
      console.warn('[haynes lab product-badge] Unknown data-hl-position "' + position + '". Using "top-right".');
      position = 'top-right';
    }

    var labels = text.split(',').map(function (s) { return s.trim(); }).filter(Boolean);
    if (!labels.length) {
      console.warn('[haynes lab product-badge] data-hl-text is empty. Nothing rendered.');
      return;
    }

    injectStyles();

    var targetSelector = script.getAttribute('data-hl-target');
    var target = null;
    if (targetSelector) {
      try {
        target = document.querySelector(targetSelector);
      } catch (e) {
        target = null;
      }
      if (!target) {
        console.warn('[haynes lab product-badge] data-hl-target "' + targetSelector + '" matched nothing. Rendering inline instead.');
      }
    }

    if (target) {
      // Overlay mode: pin one badge to a corner of the target element.
      if (window.getComputedStyle(target).position === 'static') {
        target.style.position = 'relative';
      }
      target.appendChild(makeTag(labels[0], bg, textColor, position));
      target.appendChild(makeCredit(true));
      return;
    }

    // Inline mode: render a row of badges right after the script tag.
    var root = el('span', PREFIX + ' ' + PREFIX + '--inline');
    labels.forEach(function (label) {
      root.appendChild(makeTag(label, bg, textColor, null));
    });
    root.appendChild(makeCredit(false));

    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 product-badge] Could not locate its own script tag. Nothing rendered.');
      return;
    }
    build(script);
  }

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

</script>