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/service-area-checker.js" data-hl-config='{"zips":["28202","28203","28204","28205","28207","28210","28211","28226","28269","28270","28277","28278"]}' data-hl-title="Serving Charlotte — check your ZIP" data-hl-link="https://hayneslab.dev/contact" data-hl-link-text="Book a service call" async></script>
<!-- Free Service Area Checker widget by haynes lab — https://hayneslab.dev/tools/widgets/service-area-checker -->
<!-- Free Service Area Checker widget by haynes lab — https://hayneslab.dev/tools/widgets/service-area-checker -->
<script data-hl-config='{"zips":["28202","28203","28204","28205","28207","28210","28211","28226","28269","28270","28277","28278"]}' data-hl-title="Serving Charlotte — check your ZIP" data-hl-link="https://hayneslab.dev/contact" data-hl-link-text="Book a service call">
/*!
* haynes lab — Service Area Checker widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/service-area-checker
*/
(function () {
'use strict';
var PREFIX = 'hlw-service-area-checker';
var STYLE_ID = 'hlw-service-area-checker-styles';
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/service-area-checker.js"]');
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
'.' + PREFIX + ' { position: relative; max-width: 480px; margin: 0 auto; padding: 28px 28px 36px;' +
' 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 + '__title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #111827; }' +
'.' + PREFIX + '__hint { margin: 0 0 18px; font-size: 14px; color: #6b7280; }' +
'.' + PREFIX + '__form { display: flex; gap: 8px; }' +
'.' + PREFIX + '__input { flex: 1; min-width: 0; padding: 10px 14px; font-size: 16px; color: #1f2937;' +
' background: #ffffff; border: 1px solid #d1d5db; border-radius: 8px; font-family: inherit; }' +
'.' + PREFIX + '__input:focus { outline: 2px solid var(--hlw-accent); outline-offset: 1px; border-color: var(--hlw-accent); }' +
'.' + PREFIX + '__btn { padding: 10px 18px; font-size: 15px; font-weight: 600; color: #ffffff;' +
' background: var(--hlw-accent); border: 0; border-radius: 8px; cursor: pointer; font-family: inherit;' +
' white-space: nowrap; }' +
'.' + PREFIX + '__btn:hover { filter: brightness(0.92); }' +
'.' + PREFIX + '__btn:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
'.' + PREFIX + '__result { margin: 16px 0 0; padding: 12px 14px; border-radius: 8px; font-size: 15px;' +
' display: none; }' +
'.' + PREFIX + '__result--ok { display: block; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }' +
'.' + PREFIX + '__result--no { display: block; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }' +
'.' + PREFIX + '__cta { display: inline-block; margin-top: 10px; padding: 8px 16px; font-size: 14px;' +
' font-weight: 600; color: #ffffff; background: var(--hlw-accent); border-radius: 8px;' +
' text-decoration: none; }' +
'.' + PREFIX + '__cta:hover { filter: brightness(0.92); }' +
'.' + PREFIX + '__cta: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: 480px) { .' + PREFIX + ' { padding: 22px 18px 34px; }' +
' .' + PREFIX + '__form { 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 service-area-checker] Missing required data-hl-config attribute (JSON like {"zips":["28202"]}). Nothing rendered.');
return null;
}
var cfg;
try {
cfg = JSON.parse(raw);
} catch (e) {
console.warn('[haynes lab service-area-checker] data-hl-config is not valid JSON. Nothing rendered.', e);
return null;
}
var zips = Array.isArray(cfg.zips) ? cfg.zips.map(String) : [];
var prefixes = Array.isArray(cfg.prefixes) ? cfg.prefixes.map(String) : [];
if (!zips.length && !prefixes.length) {
console.warn('[haynes lab service-area-checker] data-hl-config needs a non-empty "zips" or "prefixes" array. Nothing rendered.');
return null;
}
return { zips: zips, prefixes: prefixes };
}
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;
}
// A prefix entry is either a plain prefix ("28") or a numeric range ("280-284").
function prefixMatches(prefixes, zip) {
for (var i = 0; i < prefixes.length; i++) {
var p = prefixes[i];
var range = p.split('-');
if (range.length === 2 && range[0] && range[1]) {
var head = zip.slice(0, range[0].length);
if (head.length === range[0].length && head >= range[0] && head <= range[1]) return true;
} else if (zip.indexOf(p) === 0) {
return true;
}
}
return false;
}
function build(script) {
var cfg = parseConfig(script);
if (!cfg) return;
var accent = script.getAttribute('data-hl-accent') || '#f97316';
var title = script.getAttribute('data-hl-title') || 'Do we serve your area?';
var link = script.getAttribute('data-hl-link');
var linkText = script.getAttribute('data-hl-link-text') || 'Contact us';
injectStyles();
var root = el('div', PREFIX);
root.style.setProperty('--hlw-accent', accent);
root.appendChild(el('h3', PREFIX + '__title', title));
root.appendChild(el('p', PREFIX + '__hint', 'Enter your ZIP code to check availability.'));
var form = el('form', PREFIX + '__form');
form.setAttribute('novalidate', '');
var input = el('input', PREFIX + '__input');
input.type = 'text';
input.inputMode = 'numeric';
input.autocomplete = 'postal-code';
input.maxLength = 10;
input.placeholder = 'ZIP code';
input.setAttribute('aria-label', 'ZIP code');
var btn = el('button', PREFIX + '__btn', 'Check');
btn.type = 'submit';
form.appendChild(input);
form.appendChild(btn);
root.appendChild(form);
var result = el('div', PREFIX + '__result');
result.setAttribute('aria-live', 'polite');
root.appendChild(result);
form.addEventListener('submit', function (ev) {
ev.preventDefault();
var zip = input.value.trim();
result.textContent = '';
if (!/^\d{5}$/.test(zip)) {
result.className = PREFIX + '__result ' + PREFIX + '__result--no';
result.textContent = 'Please enter a valid 5-digit ZIP code.';
return;
}
var served = cfg.zips.indexOf(zip) !== -1 || prefixMatches(cfg.prefixes, zip);
if (served) {
result.className = PREFIX + '__result ' + PREFIX + '__result--ok';
result.appendChild(el('div', null, 'Good news — we serve ' + zip + '!'));
if (link) {
var cta = el('a', PREFIX + '__cta', linkText);
cta.href = link;
result.appendChild(cta);
}
} else {
result.className = PREFIX + '__result ' + PREFIX + '__result--no';
result.textContent = 'Sorry, ' + zip + ' is outside our current service area.';
}
});
var credit = el('a', PREFIX + '__credit');
credit.appendChild(logoSvg());
credit.appendChild(document.createTextNode('Powered by haynes lab'));
credit.href = 'https://hayneslab.dev/tools/widgets/service-area-checker';
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 service-area-checker] Could not locate its own script tag. Nothing rendered.');
return;
}
build(script);
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>