Website Announcement Bar Generator

<script>
(() => {
  const config = {
  "id": "otter_offer_bar",
  "text": "Free shipping this week on orders over $75",
  "buttonText": "Shop now",
  "buttonLink": "https://example.com/sale",
  "fixed": true,
  "closeable": false,
  "background": "#2D4A35",
  "textColor": "#FFFFFF",
  "buttonBackground": "#E8A838",
  "buttonColor": "#1A2E1C",
  "fontSize": 14,
  "buttonFontSize": 14
};
  if (localStorage.getItem(config.id + ':closed')) return;
  const bar = document.createElement('div');
  bar.id = config.id;
  bar.style.cssText = 'box-sizing:border-box;left:0;right:0;top:0;z-index:99999;display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 16px;font-family:Inter,system-ui,sans-serif;';
  bar.style.position = config.fixed ? 'fixed' : 'relative';
  bar.style.background = config.background;
  bar.style.color = config.textColor;
  bar.style.fontSize = config.fontSize + 'px';
  const label = document.createElement('span');
  label.textContent = config.text;
  const link = document.createElement('a');
  link.href = config.buttonLink;
  link.textContent = config.buttonText;
  link.style.cssText = 'display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:6px;font-weight:700;text-decoration:none;';
  link.style.background = config.buttonBackground;
  link.style.color = config.buttonColor;
  link.style.fontSize = config.buttonFontSize + 'px';
  bar.append(label, link);
  if (config.closeable) {
    const close = document.createElement('button');
    close.type = 'button';
    close.setAttribute('aria-label', 'Close announcement');
    close.textContent = 'x';
    close.style.cssText = 'border:0;background:transparent;color:inherit;font-size:20px;cursor:pointer';
    close.addEventListener('click', () => { localStorage.setItem(config.id + ':closed', '1'); bar.remove(); });
    bar.append(close);
  }
  document.body.prepend(bar);
})();
</script>