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.
<!-- Free Back In Stock Form widget by haynes lab — https://hayneslab.dev/tools/widgets/back-in-stock-form -->
<script data-hl-action="https://hayneslab.dev/api/widget-demo/back-in-stock" data-hl-product="Aurora Ceramic Pour-Over Set">
/*!
* haynes lab — Back In Stock Form widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/back-in-stock-form
*/
(function () {
'use strict';
var PREFIX = 'hlw-back-in-stock-form';
var STYLE_ID = 'hlw-back-in-stock-form-styles';
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/back-in-stock-form.js"]');
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
'.' + PREFIX + ' { position: relative; max-width: 480px; width: 100%; padding: 24px;' +
' 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; }' +
'.' + PREFIX + '__badge { display: inline-block; font-size: 11px; font-weight: 700;' +
' letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; margin-bottom: 10px;' +
' border-radius: 999px; background: #fef2f2; color: #b91c1c; }' +
'.' + PREFIX + '__title { display: block; font-size: 18px; font-weight: 700;' +
' line-height: 1.35; color: #111827; margin-bottom: 6px; }' +
'.' + PREFIX + '__product { font-size: 14px; color: #6b7280; margin: 0 0 16px; }' +
'.' + PREFIX + '__product strong { color: #374151; font-weight: 600; }' +
'.' + PREFIX + '__row { display: flex; gap: 8px; flex-wrap: wrap; }' +
'.' + PREFIX + '__input { flex: 1 1 180px; min-width: 0; font: inherit; font-size: 15px;' +
' padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px;' +
' background: #ffffff; color: #1f2937; }' +
'.' + PREFIX + '__input::placeholder { color: #9ca3af; }' +
'.' + PREFIX + '__input:focus { outline: 2px solid var(--hlw-accent); outline-offset: 1px;' +
' border-color: var(--hlw-accent); }' +
'.' + PREFIX + '__button { flex: 0 0 auto; font: inherit; font-size: 15px; font-weight: 600;' +
' padding: 10px 18px; border: 0; border-radius: 8px; color: #ffffff; cursor: pointer; }' +
'.' + PREFIX + '__button:hover { filter: brightness(1.08); }' +
'.' + PREFIX + '__button:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
'.' + PREFIX + '__button:disabled { opacity: 0.6; cursor: default; }' +
'.' + PREFIX + '__error { font-size: 13px; color: #b91c1c; margin: 10px 0 0; }' +
'.' + PREFIX + '__success { display: flex; align-items: flex-start; gap: 10px; }' +
'.' + PREFIX + '__check { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;' +
' display: flex; align-items: center; justify-content: center; }' +
'.' + PREFIX + '__check svg { display: block; }' +
'.' + PREFIX + '__success-text { font-size: 15px; color: #1f2937; padding-top: 3px; }' +
'.' + PREFIX + '__credit { display: block; text-align: right; margin-top: 14px; }' +
'.' + PREFIX + '__credit a { display: inline-flex; align-items: center; gap: 4px;' +
' font-size: 11px; color: #9ca3af; text-decoration: none; }' +
'.' + PREFIX + '__credit a svg { display: block; }' +
'.' + PREFIX + '__credit a:hover { color: #6b7280; text-decoration: underline; }';
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 checkSvg() {
var svgNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('viewBox', '0 0 16 16');
svg.setAttribute('width', '14');
svg.setAttribute('height', '14');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('focusable', 'false');
var path = document.createElementNS(svgNS, 'path');
path.setAttribute('d', 'M13.5 4.5l-7 7-3.5-3.5');
path.setAttribute('fill', 'none');
path.setAttribute('stroke', '#ffffff');
path.setAttribute('stroke-width', '2');
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'round');
svg.appendChild(path);
return svg;
}
function build(script) {
var action = script.getAttribute('data-hl-action');
if (!action) {
console.warn('[haynes lab back-in-stock-form] data-hl-action is required (URL the form POSTs to). Nothing rendered.');
return;
}
var product = script.getAttribute('data-hl-product') || '';
var title = script.getAttribute('data-hl-title') || 'Notify me when available';
var buttonText = script.getAttribute('data-hl-button-text') || 'Notify me';
var successMessage = script.getAttribute('data-hl-success-message') ||
"You're on the list! We'll email you as soon as it's back in stock.";
var accent = script.getAttribute('data-hl-accent') || '#f97316';
injectStyles();
var root = el('div', PREFIX);
root.style.setProperty('--hlw-accent', accent);
root.appendChild(el('span', PREFIX + '__badge', 'Sold out'));
root.appendChild(el('span', PREFIX + '__title', title));
if (product) {
var productLine = el('p', PREFIX + '__product');
var productName = el('strong', null, product);
productLine.appendChild(productName);
productLine.appendChild(document.createTextNode(' is currently out of stock.'));
root.appendChild(productLine);
}
var form = el('form');
form.noValidate = true;
var row = el('div', PREFIX + '__row');
var input = el('input', PREFIX + '__input');
input.type = 'email';
input.name = 'email';
input.placeholder = '[email protected]';
input.required = true;
input.setAttribute('aria-label', 'Email address');
var button = el('button', PREFIX + '__button', buttonText);
button.type = 'submit';
button.style.background = accent;
button.setAttribute('aria-label', buttonText);
row.appendChild(input);
row.appendChild(button);
form.appendChild(row);
root.appendChild(form);
var status = el('div');
status.setAttribute('role', 'status');
status.setAttribute('aria-live', 'polite');
root.appendChild(status);
form.addEventListener('submit', function (e) {
e.preventDefault();
var email = input.value.trim();
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
status.textContent = '';
status.appendChild(el('p', PREFIX + '__error', 'Please enter a valid email address.'));
input.focus();
return;
}
button.disabled = true;
var body = new FormData();
body.append('email', email);
if (product) body.append('product', product);
fetch(action, { method: 'POST', body: body, headers: { Accept: 'application/json' } })
.then(function (res) {
if (res.ok) {
form.style.display = 'none';
status.textContent = '';
var success = el('div', PREFIX + '__success');
var check = el('span', PREFIX + '__check');
check.style.background = accent;
check.appendChild(checkSvg());
success.appendChild(check);
success.appendChild(el('span', PREFIX + '__success-text', successMessage));
status.appendChild(success);
} else {
button.disabled = false;
status.textContent = '';
status.appendChild(el('p', PREFIX + '__error', 'Something went wrong — please try again.'));
}
})
.catch(function () {
button.disabled = false;
status.textContent = '';
status.appendChild(el('p', PREFIX + '__error', 'Something went wrong — please try again.'));
});
});
var credit = el('span', PREFIX + '__credit');
var link = el('a');
link.href = 'https://hayneslab.dev/tools/widgets/back-in-stock-form';
link.target = '_blank';
link.rel = 'noopener';
link.appendChild(logoSvg());
link.appendChild(document.createTextNode('Powered by haynes lab'));
credit.appendChild(link);
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 back-in-stock-form] Could not locate its own script tag. Nothing rendered.');
return;
}
build(script);
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>