Paste either snippet into your page — a Custom HTML block on WordPress, Shopify, or Squarespace works too. Both snippets update live as you customize, so what you copy is exactly what you configured.
<script src="https://hayneslab.dev/widgets/price-comparison-table.js" data-hl-config='{"tiers":[{"name":"Basic","price":"9","features":["1 website","5 GB storage","Email support"],"href":"#basic"},{"name":"Pro","price":"29","features":["10 websites","50 GB storage","Priority support","Custom domain"],"href":"#pro"},{"name":"Business","price":"79","features":["Unlimited websites","500 GB storage","24/7 phone support","Team seats"],"href":"#business"}],"highlight":1}' async></script>
<!-- Free Price Comparison Table widget by haynes lab — https://hayneslab.dev/tools/widgets/price-comparison-table -->
<!-- Free Price Comparison Table widget by haynes lab — https://hayneslab.dev/tools/widgets/price-comparison-table -->
<script data-hl-config='{"tiers":[{"name":"Basic","price":"9","features":["1 website","5 GB storage","Email support"],"href":"#basic"},{"name":"Pro","price":"29","features":["10 websites","50 GB storage","Priority support","Custom domain"],"href":"#pro"},{"name":"Business","price":"79","features":["Unlimited websites","500 GB storage","24/7 phone support","Team seats"],"href":"#business"}],"highlight":1}'>
/*!
* haynes lab — Price Comparison Table widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/price-comparison-table
*/
(function () {
'use strict';
var PREFIX = 'hlw-price-comparison-table';
var STYLE_ID = 'hlw-price-comparison-table-styles';
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/price-comparison-table.js"]');
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
'.' + PREFIX + ' { position: relative; max-width: 960px; margin: 0 auto; padding: 24px 16px 28px;' +
' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
' font-size: 16px; line-height: 1.5; color: #1f2937; }' +
'.' + PREFIX + '__grid { display: flex; align-items: stretch; gap: 16px; }' +
'.' + PREFIX + '__tier { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;' +
' padding: 24px 20px 20px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; text-align: center; }' +
'.' + PREFIX + '__tier--highlight { border: 2px solid var(--hlw-accent); box-shadow: 0 8px 24px rgba(17, 24, 39, 0.10); }' +
'.' + PREFIX + '__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap;' +
' padding: 3px 12px; border-radius: 999px; background: var(--hlw-accent); color: #ffffff;' +
' font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }' +
'.' + PREFIX + '__name { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #111827; }' +
'.' + PREFIX + '__price { margin: 0 0 16px; font-size: 32px; font-weight: 700; line-height: 1.1; color: #111827; }' +
'.' + PREFIX + '__features { list-style: none; margin: 0 0 20px; padding: 16px 0 0; border-top: 1px solid #f3f4f6;' +
' display: flex; flex-direction: column; gap: 8px; text-align: left; flex: 1 1 auto; }' +
'.' + PREFIX + '__feature { font-size: 14px; color: #374151; padding-left: 22px; position: relative; }' +
'.' + PREFIX + '__feature::before { content: "\\2713"; position: absolute; left: 0; top: 0;' +
' color: var(--hlw-accent); font-weight: 700; }' +
'.' + PREFIX + '__cta { display: block; padding: 10px 16px; border-radius: 8px; font-size: 15px; font-weight: 600;' +
' text-decoration: none; text-align: center; border: 1px solid var(--hlw-accent); color: var(--hlw-accent);' +
' background: #ffffff; }' +
'.' + PREFIX + '__cta:hover { background: var(--hlw-accent); color: #ffffff; }' +
'.' + PREFIX + '__cta:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
'.' + PREFIX + '__tier--highlight .' + PREFIX + '__cta { background: var(--hlw-accent); color: #ffffff; }' +
'.' + PREFIX + '__tier--highlight .' + PREFIX + '__cta:hover { filter: brightness(0.92); }' +
'.' + 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: 640px) { .' + PREFIX + '__grid { flex-direction: column; } }';
var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = css;
document.head.appendChild(style);
}
function parseConfig(script) {
var raw = script.getAttribute('data-hl-config');
if (!raw) {
console.warn('[haynes lab price-comparison-table] Missing required data-hl-config attribute (JSON {"tiers":[{"name","price","features","href"}],"highlight":index}). Nothing rendered.');
return null;
}
var config;
try {
config = JSON.parse(raw);
} catch (e) {
console.warn('[haynes lab price-comparison-table] data-hl-config is not valid JSON. Nothing rendered.', e);
return null;
}
if (!config || !Array.isArray(config.tiers)) {
console.warn('[haynes lab price-comparison-table] data-hl-config must be a JSON object with a "tiers" array. Nothing rendered.');
return null;
}
var tiers = config.tiers.filter(function (t) {
return t && typeof t.name === 'string' && t.name &&
(typeof t.price === 'string' || typeof t.price === 'number');
});
if (!tiers.length) {
console.warn('[haynes lab price-comparison-table] data-hl-config has no valid tiers (each needs at least "name" and "price"). Nothing rendered.');
return null;
}
var highlight = parseInt(config.highlight, 10);
if (isNaN(highlight) || highlight < 0 || highlight >= tiers.length) highlight = -1;
return { tiers: tiers, highlight: highlight };
}
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 config = parseConfig(script);
if (!config) return;
var accent = script.getAttribute('data-hl-accent') || '#f97316';
var currency = script.getAttribute('data-hl-currency') || '$';
injectStyles();
var root = el('div', PREFIX);
root.setAttribute('role', 'region');
root.setAttribute('aria-label', 'Price comparison');
root.style.setProperty('--hlw-accent', accent);
var grid = el('div', PREFIX + '__grid');
root.appendChild(grid);
config.tiers.forEach(function (tier, i) {
var isHighlight = i === config.highlight;
var col = el('div', PREFIX + '__tier' + (isHighlight ? ' ' + PREFIX + '__tier--highlight' : ''));
if (isHighlight) col.appendChild(el('span', PREFIX + '__badge', 'Most popular'));
col.appendChild(el('h3', PREFIX + '__name', tier.name));
var priceText = String(tier.price);
if (/^\d/.test(priceText)) priceText = currency + priceText;
col.appendChild(el('p', PREFIX + '__price', priceText));
if (Array.isArray(tier.features) && tier.features.length) {
var list = el('ul', PREFIX + '__features');
tier.features.forEach(function (f) {
if (f != null && f !== '') list.appendChild(el('li', PREFIX + '__feature', String(f)));
});
col.appendChild(list);
}
if (tier.href) {
var cta = el('a', PREFIX + '__cta', 'Get started');
cta.href = String(tier.href);
cta.setAttribute('aria-label', 'Get started with ' + tier.name);
col.appendChild(cta);
}
grid.appendChild(col);
});
var credit = el('a', PREFIX + '__credit');
credit.appendChild(logoSvg());
credit.appendChild(document.createTextNode('Powered by haynes lab'));
credit.href = 'https://hayneslab.dev/tools/widgets/price-comparison-table';
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 price-comparison-table] Could not locate its own script tag. Nothing rendered.');
return;
}
build(script);
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>